@glatam/calendar-ui 1.0.1 → 1.0.3

package/dist/glatam-calendar.js

@@ -1,9 +1,9 @@
 import { css as E, LitElement as O, html as d } from "lit";
-import { property as s, customElement as T, state as m } from "lit/decorators.js";
-import { isTimeBlocked as M, formatISODate as N, generateMonthDays as j, generateWeekDays as _ } from "@glatam/calendar-core";
-import { formatISODate as st, isTimeBlocked as lt, parseISODate as nt } from "@glatam/calendar-core";
-import { classMap as I } from "lit/directives/class-map.js";
-const A = E`
+import { property as s, customElement as T, state as u } from "lit/decorators.js";
+import { isTimeBlocked as I, formatISODate as _, generateMonthDays as A, generateWeekDays as j } from "@glatam/calendar-core";
+import { formatISODate as nt, isTimeBlocked as dt, parseISODate as ct } from "@glatam/calendar-core";
+import { classMap as N } from "lit/directives/class-map.js";
+const P = E`
   :host {
     /* Fonts */
     --glatam-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -91,7 +91,7 @@ const A = E`
     --glatam-padding: 24px;
     font-size: 1.1rem;
   }
-`, P = E`
+`, W = E`
   :host {
     display: grid;
     min-width: 0;
@@ -361,14 +361,14 @@ function C(e, t, a) {
       hour12: !1
     };
     l !== "local" && (o.timeZone = l);
-    const n = new Intl.DateTimeFormat("en-US", o).formatToParts(r), g = new Map(n.map((S) => [S.type, S.value])), u = Number(g.get("hour")), v = u === 24 ? 0 : u;
+    const n = new Intl.DateTimeFormat("en-US", o).formatToParts(r), c = new Map(n.map(($) => [$.type, $.value])), m = Number(c.get("hour")), y = m === 24 ? 0 : m;
     return new Date(
-      Number(g.get("year")),
-      Number(g.get("month")) - 1,
-      Number(g.get("day")),
-      v,
-      Number(g.get("minute")),
-      Number(g.get("second"))
+      Number(c.get("year")),
+      Number(c.get("month")) - 1,
+      Number(c.get("day")),
+      y,
+      Number(c.get("minute")),
+      Number(c.get("second"))
     );
   };
   try {
@@ -378,29 +378,29 @@ function C(e, t, a) {
     return 0;
   }
 }
-function W(e, t) {
+function U(e, t) {
   if (t === 0)
     return { start: e.start, end: e.end, dayShift: 0 };
-  const a = (g) => {
-    const [u, v] = g.split(":").map(Number);
-    return u * 60 + v;
-  }, i = (g) => {
-    let u = g % 1440;
-    u < 0 && (u += 1440);
-    const v = String(Math.floor(u / 60)).padStart(2, "0"), S = String(u % 60).padStart(2, "0");
-    return `${v}:${S}`;
-  }, r = a(e.start), l = a(e.end), o = r + t, c = l + t;
+  const a = (c) => {
+    const [m, y] = c.split(":").map(Number);
+    return m * 60 + y;
+  }, i = (c) => {
+    let m = c % 1440;
+    m < 0 && (m += 1440);
+    const y = String(Math.floor(m / 60)).padStart(2, "0"), $ = String(m % 60).padStart(2, "0");
+    return `${y}:${$}`;
+  }, r = a(e.start), l = a(e.end), o = r + t, h = l + t;
   let n = 0;
   return o < 0 ? n = -1 : o >= 1440 && (n = 1), {
     start: i(o),
-    end: i(c),
+    end: i(h),
     dayShift: n
   };
 }
-var U = Object.defineProperty, L = Object.getOwnPropertyDescriptor, k = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? L(t, a) : t, l = e.length - 1, o; l >= 0; l--)
+var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, D = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? F(t, a) : t, l = e.length - 1, o; l >= 0; l--)
     (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && U(t, a, r), r;
+  return i && r && L(t, a, r), r;
 };
 let f = class extends O {
   constructor() {
@@ -413,7 +413,8 @@ let f = class extends O {
     return e;
   }
   handleDayClick(e) {
-    this.role === "buyer" && e.isBlocked || this.dispatchEvent(new CustomEvent("day-select", {
+    const t = this.minDate && e.dateString < this.minDate || this.maxDate && e.dateString > this.maxDate;
+    this.role === "buyer" && (e.isBlocked || t) || this.dispatchEvent(new CustomEvent("day-select", {
       detail: { dateString: e.dateString, isBlocked: e.isBlocked },
       bubbles: !0,
       composed: !0
@@ -425,13 +426,13 @@ let f = class extends O {
       ${e.map((t) => d`<div class="weekday">${t}</div>`)}
       
       ${this.days.map((t) => {
-      var c;
+      var h;
       if (!t.isCurrentMonth && !this.showNeighboringMonth)
         return d`<div class="day-cell empty"></div>`;
       const a = t.dateString === (/* @__PURE__ */ new Date()).toISOString().split("T")[0], i = this.selectedDates.includes(t.dateString), r = t.slots.filter((n) => n.isBlocked), l = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate, o = this.tileClassName ? this.tileClassName({ date: t.date, dateString: t.dateString }) : "";
       return d`
           <div 
-            class=${I({
+            class=${N({
         "day-cell": !0,
         padding: !t.isCurrentMonth,
         blocked: t.isBlocked,
@@ -446,11 +447,11 @@ let f = class extends O {
             <div class="day-number">${t.dayNumber}</div>
             
             <div class="slot-indicator">
-              ${t.isBlocked ? d`<div class="badge blocked-day">${((c = t.rule) == null ? void 0 : c.description) || "Bloqueado"}</div>` : r.slice(0, 2).map((n) => {
-        var g, u;
+              ${t.isBlocked ? d`<div class="badge blocked-day">${((h = t.rule) == null ? void 0 : h.description) || "Bloqueado"}</div>` : r.slice(0, 2).map((n) => {
+        var c, m;
         return d`
-                    <div class="badge blocked-slot" title=${((g = n.rule) == null ? void 0 : g.description) || ""}>
-                      🚫 ${((u = n.rule) == null ? void 0 : u.description) || n.start}
+                    <div class="badge blocked-slot" title=${((c = n.rule) == null ? void 0 : c.description) || ""}>
+                      🚫 ${((m = n.rule) == null ? void 0 : m.description) || n.start}
                     </div>
                   `;
       })}
@@ -495,43 +496,43 @@ f.styles = E`
       .day-number { margin-bottom: 0; font-size: 0.8rem; }
     }
   `;
-k([
+D([
   s({ type: Array })
 ], f.prototype, "days", 2);
-k([
+D([
   s({ type: String })
 ], f.prototype, "locale", 2);
-k([
+D([
   s({ type: Number })
 ], f.prototype, "startOfWeekDay", 2);
-k([
+D([
   s({ type: Array })
 ], f.prototype, "selectedDates", 2);
-k([
+D([
   s({ type: String })
 ], f.prototype, "role", 2);
-k([
+D([
   s({ type: String, reflect: !0 })
 ], f.prototype, "size", 2);
-k([
+D([
   s({ type: String })
 ], f.prototype, "minDate", 2);
-k([
+D([
   s({ type: String })
 ], f.prototype, "maxDate", 2);
-k([
+D([
   s({ type: Boolean })
 ], f.prototype, "showNeighboringMonth", 2);
-k([
+D([
   s({ attribute: !1 })
 ], f.prototype, "tileClassName", 2);
-f = k([
+f = D([
   T("glatam-calendar-month-view")
 ], f);
-var F = Object.defineProperty, H = Object.getOwnPropertyDescriptor, R = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? H(t, a) : t, l = e.length - 1, o; l >= 0; l--)
+var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, R = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? q(t, a) : t, l = e.length - 1, o; l >= 0; l--)
     (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && F(t, a, r), r;
+  return i && r && H(t, a, r), r;
 };
 let w = class extends O {
   constructor() {
@@ -596,22 +597,22 @@ let w = class extends O {
             </div>
             
             ${t.slots.map((l, o) => {
-        var u, v;
-        const c = l.isBlocked, n = this.isSlotSelected(t.dateString, l), g = this.isSlotDragSelecting(a, o);
+        var m, y;
+        const h = l.isBlocked, n = this.isSlotSelected(t.dateString, l), c = this.isSlotDragSelecting(a, o);
         return d`
                 <div
-                  class=${I({
+                  class=${N({
           "slot-cell": !0,
-          available: !c,
-          blocked: c,
+          available: !h,
+          blocked: h,
           selected: n,
-          "drag-selecting": g
+          "drag-selecting": c
         })}
-                  @mousedown=${() => this.handleMouseDown(a, o, c)}
-                  @mouseenter=${() => this.handleMouseEnter(a, o, c)}
-                  title=${c && ((u = l.rule) != null && u.description) ? l.rule.description : ""}
+                  @mousedown=${() => this.handleMouseDown(a, o, h)}
+                  @mouseenter=${() => this.handleMouseEnter(a, o, h)}
+                  title=${h && ((m = l.rule) != null && m.description) ? l.rule.description : ""}
                 >
-                  ${c ? ((v = l.rule) == null ? void 0 : v.description) || "Ocupado" : n ? "Reservado" : ""}
+                  ${h ? ((y = l.rule) == null ? void 0 : y.description) || "Ocupado" : n ? "Reservado" : ""}
                 </div>
               `;
       })}
@@ -690,26 +691,26 @@ R([
   s({ type: String })
 ], w.prototype, "role", 2);
 R([
-  m()
+  u()
 ], w.prototype, "isDragging", 2);
 R([
-  m()
+  u()
 ], w.prototype, "dragDayIndex", 2);
 R([
-  m()
+  u()
 ], w.prototype, "dragStartSlotIndex", 2);
 R([
-  m()
+  u()
 ], w.prototype, "dragEndSlotIndex", 2);
 w = R([
   T("glatam-calendar-week-view")
 ], w);
-var q = Object.defineProperty, G = Object.getOwnPropertyDescriptor, z = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? G(t, a) : t, l = e.length - 1, o; l >= 0; l--)
+var G = Object.defineProperty, V = Object.getOwnPropertyDescriptor, z = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? V(t, a) : t, l = e.length - 1, o; l >= 0; l--)
     (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && q(t, a, r), r;
+  return i && r && G(t, a, r), r;
 };
-let D = class extends O {
+let S = class extends O {
   constructor() {
     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 = () => {
       if (!this.isDragging || !this.day || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
@@ -769,11 +770,11 @@ let D = class extends O {
         </div>
 
         ${this.day.slots.map((a, i) => {
-      var c, n;
+      var h, n;
       const r = a.isBlocked, l = this.isSlotSelected(a), o = this.isSlotDragSelecting(i);
       return d`
             <div
-              class=${I({
+              class=${N({
         "slot-cell": !0,
         available: !r,
         blocked: r,
@@ -782,7 +783,7 @@ let D = class extends O {
       })}
               @mousedown=${() => this.handleMouseDown(i, r)}
               @mouseenter=${() => this.handleMouseEnter(i, r)}
-              title=${r && ((c = a.rule) != null && c.description) ? a.rule.description : ""}
+              title=${r && ((h = a.rule) != null && h.description) ? a.rule.description : ""}
             >
               ${r ? ((n = a.rule) == null ? void 0 : n.description) || "Ocupado" : l ? "Reservado" : ""}
             </div>
@@ -792,7 +793,7 @@ let D = class extends O {
     `;
   }
 };
-D.styles = E`
+S.styles = E`
     :host {
       display: grid; grid-template-columns: var(--glatam-time-col-width) 1fr; gap: 2px;
       width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
@@ -824,35 +825,191 @@ D.styles = E`
   `;
 z([
   s({ type: Object })
-], D.prototype, "day", 2);
+], S.prototype, "day", 2);
 z([
   s({ type: Array })
-], D.prototype, "slots", 2);
+], S.prototype, "slots", 2);
 z([
   s({ type: String })
-], D.prototype, "locale", 2);
+], S.prototype, "locale", 2);
 z([
   s({ type: Object })
-], D.prototype, "selectedRange", 2);
+], S.prototype, "selectedRange", 2);
 z([
   s({ type: String })
-], D.prototype, "role", 2);
+], S.prototype, "role", 2);
 z([
-  m()
-], D.prototype, "isDragging", 2);
+  u()
+], S.prototype, "isDragging", 2);
 z([
-  m()
-], D.prototype, "dragStartSlotIndex", 2);
+  u()
+], S.prototype, "dragStartSlotIndex", 2);
 z([
-  m()
-], D.prototype, "dragEndSlotIndex", 2);
-D = z([
+  u()
+], S.prototype, "dragEndSlotIndex", 2);
+S = z([
   T("glatam-calendar-day-view")
-], D);
-var V = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, $ = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Y(t, a) : t, l = e.length - 1, o; l >= 0; l--)
+], S);
+const Y = E`
+  dialog {
+    background: transparent;
+    border: none;
+    padding: 0;
+    overflow: visible;
+    outline: none;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  .modal-content {
+    background: var(--glatam-bg);
+    color: var(--glatam-text);
+    border-radius: 24px;
+    padding: 28px;
+    width: 90vw;
+    max-width: 400px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
+    border: 1px solid var(--glatam-border);
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    box-sizing: border-box;
+    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.92) translateY(10px);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1) translateY(0);
+      opacity: 1;
+    }
+  }
+  h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  label { font-size: 0.8rem; color: var(--glatam-text-secondary); font-weight: 600; }
+  input[type="text"] {
+    background: var(--glatam-surface);
+    border: 1px solid var(--glatam-border);
+    border-radius: 10px;
+    padding: 10px 14px;
+    color: var(--glatam-text);
+    font-family: inherit;
+    font-size: 0.9rem;
+    outline: none;
+    transition: border-color var(--glatam-transition-fast);
+  }
+  input[type="text"]:focus {
+    border-color: var(--glatam-primary);
+  }
+  .switch-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+  }
+  
+  /* Apple Switch Style */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 46px;
+    height: 26px;
+  }
+  .switch input { opacity: 0; width: 0; height: 0; }
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: var(--glatam-border);
+    transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+    border-radius: 26px;
+  }
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  }
+  input:checked + .slider {
+    background-color: var(--glatam-primary);
+  }
+  input:checked + .slider:before {
+    transform: translateX(20px);
+  }
+
+  .days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    margin-top: 4px;
+  }
+  .day-btn {
+    width: 36px;
+    height: 36px;
+    margin: 0 auto;
+    border-radius: 50%;
+    border: 1px solid var(--glatam-border);
+    background: var(--glatam-bg);
+    color: var(--glatam-text);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--glatam-transition-fast), color var(--glatam-transition-fast), border-color var(--glatam-transition-fast);
+  }
+  .day-btn:hover {
+    background-color: var(--glatam-surface);
+  }
+  .day-btn.selected {
+    background: var(--glatam-primary);
+    color: var(--glatam-text-light);
+    border-color: var(--glatam-primary);
+  }
+  .btn-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
+  .btn {
+    padding: 10px 18px;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    transition: opacity var(--glatam-transition-fast), transform var(--glatam-transition-fast);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn:active { transform: scale(0.97); }
+  .btn-cancel { background: transparent; color: var(--glatam-text); border: 1px solid var(--glatam-border); }
+  .btn-cancel:hover { background-color: var(--glatam-surface); }
+  .btn-save { background: var(--glatam-primary); color: var(--glatam-text-light); }
+  .btn-save:hover { opacity: 0.95; }
+  .btn-danger {
+    background: rgba(255, 69, 58, 0.12);
+    color: #ff453a;
+    margin-right: auto;
+  }
+  .btn-danger:hover {
+    background: rgba(255, 69, 58, 0.18);
+  }
+`;
+var Z = Object.defineProperty, J = Object.getOwnPropertyDescriptor, k = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? J(t, a) : t, l = e.length - 1, o; l >= 0; l--)
     (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && V(t, a, r), r;
+  return i && r && Z(t, a, r), r;
 };
 let x = class extends O {
   constructor() {
@@ -861,8 +1018,19 @@ let x = class extends O {
   willUpdate(e) {
     e.has("open") && this.open && (this.existingRule ? (this.description = "Bloqueo", this.blockAllDay = !this.existingRule.slots || this.existingRule.slots.length === 0, this.isRecurring = this.existingRule.type === "weekly", this.selectedDays = this.existingRule.daysOfWeek || []) : (this.description = "", this.blockAllDay = !this.isRange, this.isRecurring = !1, this.selectedDays = [(/* @__PURE__ */ new Date(this.dateString + "T00:00:00")).getDay()]));
   }
+  updated(e) {
+    var t;
+    if (e.has("open")) {
+      const a = (t = this.shadowRoot) == null ? void 0 : t.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(e) {
-    this.selectedDays.indexOf(e) > -1 ? this.selectedDays = this.selectedDays.filter((a) => a !== e) : this.selectedDays = [...this.selectedDays, e];
+    const t = this.selectedDays.indexOf(e);
+    this.selectedDays = t > -1 ? this.selectedDays.filter((a) => a !== e) : [...this.selectedDays, e];
   }
   handleSave() {
     const e = {
@@ -886,7 +1054,7 @@ let x = class extends O {
   render() {
     const e = ["D", "L", "M", "M", "J", "V", "S"], t = this.isRange ? `${this.dateString} (${this.startTime} - ${this.endTime})` : this.dateString;
     return d`
-      <div class=${I({ "modal-overlay": !0, open: this.open })}>
+      <dialog id="booking-dialog" @close=${this.handleDialogClose}>
         <div class="modal-content">
           <h3>${this.existingRule ? "Gestionar Bloqueo" : "Crear Bloqueo"}</h3>
           
@@ -950,199 +1118,50 @@ let x = class extends O {
             <button class="btn btn-save" @click=${this.handleSave}>Guardar</button>
           </div>
         </div>
-      </div>
+      </dialog>
     `;
   }
 };
-x.styles = E`
-    .modal-overlay {
-      position: fixed;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0, 0, 0, 0.35);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      opacity: 0; pointer-events: none;
-      transition: opacity var(--glatam-transition-normal);
-    }
-    .modal-overlay.open {
-      opacity: 1; pointer-events: auto;
-    }
-    .modal-content {
-      background: var(--glatam-bg);
-      color: var(--glatam-text);
-      border-radius: 24px;
-      padding: 28px;
-      width: 90%;
-      max-width: 400px;
-      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
-      border: 1px solid var(--glatam-border);
-      transform: scale(0.92) translateY(10px);
-      transition: transform var(--glatam-transition-normal), background-color var(--glatam-transition-normal);
-      display: flex;
-      flex-direction: column;
-      gap: 18px;
-    }
-    .modal-overlay.open .modal-content {
-      transform: scale(1) translateY(0);
-    }
-    h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
-    .form-group { display: flex; flex-direction: column; gap: 6px; }
-    label { font-size: 0.8rem; color: var(--glatam-text-secondary); font-weight: 600; }
-    input[type="text"] {
-      background: var(--glatam-surface);
-      border: 1px solid var(--glatam-border);
-      border-radius: 10px;
-      padding: 10px 14px;
-      color: var(--glatam-text);
-      font-family: inherit;
-      font-size: 0.9rem;
-      outline: none;
-      transition: border-color var(--glatam-transition-fast);
-    }
-    input[type="text"]:focus {
-      border-color: var(--glatam-primary);
-    }
-    .switch-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 4px 0;
-    }
-    
-    /* Apple Switch Style */
-    .switch {
-      position: relative;
-      display: inline-block;
-      width: 46px;
-      height: 26px;
-    }
-    .switch input { opacity: 0; width: 0; height: 0; }
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background-color: var(--glatam-border);
-      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
-      border-radius: 26px;
-    }
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 20px;
-      width: 20px;
-      left: 3px;
-      bottom: 3px;
-      background-color: white;
-      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
-      border-radius: 50%;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-    }
-    input:checked + .slider {
-      background-color: var(--glatam-primary);
-    }
-    input:checked + .slider:before {
-      transform: translateX(20px);
-    }
-
-    .days-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 6px;
-      margin-top: 4px;
-    }
-    .day-btn {
-      width: 36px;
-      height: 36px;
-      margin: 0 auto;
-      border-radius: 50%;
-      border: 1px solid var(--glatam-border);
-      background: var(--glatam-bg);
-      color: var(--glatam-text);
-      font-size: 0.8rem;
-      font-weight: 600;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background-color var(--glatam-transition-fast), color var(--glatam-transition-fast), border-color var(--glatam-transition-fast);
-    }
-    .day-btn:hover {
-      background-color: var(--glatam-surface);
-    }
-    .day-btn.selected {
-      background: var(--glatam-primary);
-      color: var(--glatam-text-light);
-      border-color: var(--glatam-primary);
-    }
-    .btn-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
-    .btn {
-      padding: 10px 18px;
-      border-radius: 20px;
-      font-size: 0.875rem;
-      font-weight: 600;
-      cursor: pointer;
-      border: none;
-      transition: opacity var(--glatam-transition-fast), transform var(--glatam-transition-fast);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .btn:active { transform: scale(0.97); }
-    .btn-cancel { background: transparent; color: var(--glatam-text); border: 1px solid var(--glatam-border); }
-    .btn-cancel:hover { background-color: var(--glatam-surface); }
-    .btn-save { background: var(--glatam-primary); color: var(--glatam-text-light); }
-    .btn-save:hover { opacity: 0.95; }
-    .btn-danger {
-      background: rgba(255, 69, 58, 0.12);
-      color: #ff453a;
-      margin-right: auto;
-    }
-    .btn-danger:hover {
-      background: rgba(255, 69, 58, 0.18);
-    }
-  `;
-$([
+x.styles = Y;
+k([
   s({ type: Boolean })
 ], x.prototype, "open", 2);
-$([
+k([
   s({ type: String })
 ], x.prototype, "dateString", 2);
-$([
+k([
   s({ type: String })
 ], x.prototype, "startTime", 2);
-$([
+k([
   s({ type: String })
 ], x.prototype, "endTime", 2);
-$([
+k([
   s({ type: Boolean })
 ], x.prototype, "isRange", 2);
-$([
+k([
   s({ type: Object })
 ], x.prototype, "existingRule", 2);
-$([
-  m()
+k([
+  u()
 ], x.prototype, "description", 2);
-$([
-  m()
+k([
+  u()
 ], x.prototype, "blockAllDay", 2);
-$([
-  m()
+k([
+  u()
 ], x.prototype, "isRecurring", 2);
-$([
-  m()
+k([
+  u()
 ], x.prototype, "selectedDays", 2);
-x = $([
+x = k([
   T("glatam-calendar-modal")
 ], x);
-var Z = Object.defineProperty, J = Object.getOwnPropertyDescriptor, h = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? J(t, a) : t, l = e.length - 1, o; l >= 0; l--)
+var X = Object.defineProperty, K = Object.getOwnPropertyDescriptor, p = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? K(t, a) : t, l = e.length - 1, o; l >= 0; l--)
     (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && Z(t, a, r), r;
+  return i && r && X(t, a, r), r;
 };
-const X = [
+const Q = [
   { start: "09:00", end: "10:00" },
   { start: "10:00", end: "11:00" },
   { start: "11:00", end: "12:00" },
@@ -1153,9 +1172,9 @@ const X = [
   { start: "16:00", end: "17:00" },
   { start: "17:00", end: "18:00" }
 ];
-let p = class extends O {
+let g = class extends O {
   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.activeDate = /* @__PURE__ */ new Date(), this.localRules = [], this.darkMode = !1, this.modalOpen = !1, this.modalDateString = "", this.modalStartTime = "", this.modalEndTime = "", this.modalIsRange = !1, this.modalExistingRule = null;
+    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 = Q, this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, 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;
   }
   firstUpdated() {
     this.darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches, this.localRules = [...this.rules];
@@ -1183,25 +1202,29 @@ let p = class extends O {
     this.role === "buyer" && a || (this.activeDate = /* @__PURE__ */ new Date(t + "T00:00:00"), this.view = "day", this.dispatchEvent(new CustomEvent("date-selected", { detail: { dateString: t }, bubbles: !0, composed: !0 })));
   }
   handleRangeSelect(e) {
-    var u, v;
-    const { dateString: t, start: a, end: i } = e.detail, r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = this.getDisplaySlots(r), o = l.findIndex((S) => S.start === a), c = l.findIndex((S) => S.end === i), n = ((u = this.slots[o]) == null ? void 0 : u.start) || a, g = ((v = this.slots[c]) == null ? void 0 : v.end) || i;
+    var $, M;
+    const { dateString: t, start: a, end: i } = e.detail, r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
+    if (this.role === "buyer" && o && t < o) return;
+    const h = this.getDisplaySlots(r), n = h.findIndex((B) => B.start === a), c = h.findIndex((B) => B.end === i), m = (($ = this.slots[n]) == null ? void 0 : $.start) || a, y = ((M = this.slots[c]) == null ? void 0 : M.end) || i;
     if (this.role === "buyer") {
-      this.selectedRange = { dateString: t, start: a, end: i }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a, end: i, hostStart: n, hostEnd: g }, bubbles: !0, composed: !0 }));
+      this.selectedRange = { dateString: t, start: a, end: i }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a, end: i, hostStart: m, hostEnd: y }, bubbles: !0, composed: !0 }));
       return;
     }
-    this.openModal(t, n, g, !0, null);
+    this.openModal(t, m, y, !0, null);
   }
   handleSlotClick(e) {
-    const { dateString: t, slot: a } = e.detail, i = /* @__PURE__ */ new Date(t + "T00:00:00"), r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = this.getDisplaySlots(r), o = l.findIndex((g) => g.start === a.start), c = this.slots[o] || a;
+    const { dateString: t, slot: a } = e.detail, i = /* @__PURE__ */ new Date(t + "T00:00:00"), r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
+    if (this.role === "buyer" && (a.isBlocked || o && t < o)) return;
+    const h = this.getDisplaySlots(r), n = h.findIndex((y) => y.start === a.start), c = this.slots[n] || a;
     if (this.role === "buyer") {
       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: c.start, hostEnd: c.end }, bubbles: !0, composed: !0 }));
       return;
     }
-    const n = this.localRules.find((g) => M(i, c, [g]));
-    this.openModal(t, c.start, c.end, !0, n || null);
+    const m = this.localRules.find((y) => I(i, c, [y]));
+    this.openModal(t, c.start, c.end, !0, m || null);
   }
   handleBlockDayAction() {
-    const e = N(this.activeDate), t = this.localRules.find((a) => M(this.activeDate, void 0, [a]));
+    const e = _(this.activeDate), t = this.localRules.find((a) => I(this.activeDate, void 0, [a]));
     this.openModal(e, "", "", !1, t || null);
   }
   openModal(e, t, a, i, r) {
@@ -1224,16 +1247,16 @@ let p = class extends O {
   }
   getDisplaySlots(e) {
     return e === 0 ? this.slots : this.slots.map((t) => {
-      const a = W(t, e), i = a.dayShift > 0 ? " (+1d)" : a.dayShift < 0 ? " (-1d)" : "";
+      const a = U(t, e), i = a.dayShift > 0 ? " (+1d)" : a.dayShift < 0 ? " (-1d)" : "";
       return { start: a.start + i, end: a.end + i };
     });
   }
   render() {
-    var c;
-    const e = this.activeDate.getFullYear(), t = this.activeDate.getMonth(), a = M(this.activeDate, void 0, this.localRules), i = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, r = this.getDisplaySlots(i), l = (n) => n.map((g) => ({ ...g, slots: g.slots.map((u, v) => {
-      var S, B;
-      return { ...u, start: ((S = r[v]) == null ? void 0 : S.start) || u.start, end: ((B = r[v]) == null ? void 0 : B.end) || u.end };
-    }) })), o = ((c = this.hostTimezone.split("/").pop()) == null ? void 0 : c.replace("_", " ")) || "Anfitrión";
+    var h;
+    const e = this.activeDate.getFullYear(), t = this.activeDate.getMonth(), a = I(this.activeDate, void 0, this.localRules), i = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, r = this.getDisplaySlots(i), l = (n) => n.map((c) => ({ ...c, slots: c.slots.map((m, y) => {
+      var $, M;
+      return { ...m, start: (($ = r[y]) == null ? void 0 : $.start) || m.start, end: ((M = r[y]) == null ? void 0 : M.end) || m.end };
+    }) })), o = ((h = this.hostTimezone.split("/").pop()) == null ? void 0 : h.replace("_", " ")) || "Anfitrión";
     return d`
       <div class="calendar-header">
         <div class="nav-group">
@@ -1264,7 +1287,7 @@ let p = class extends O {
       </div>
 
       <div class="calendar-body">
-        ${this.view === "month" ? d`<glatam-calendar-month-view .days=${j(e, t, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>` : this.view === "week" ? d`<glatam-calendar-week-view .days=${l(_(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>` : d`<glatam-calendar-day-view .day=${l(_(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find((n) => n.dateString === N(this.activeDate)) || null} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
+        ${this.view === "month" ? d`<glatam-calendar-month-view .days=${A(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" ? (/* @__PURE__ */ new Date()).toISOString().split("T")[0] : "")} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>` : this.view === "week" ? d`<glatam-calendar-week-view .days=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>` : d`<glatam-calendar-day-view .day=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find((n) => n.dateString === _(this.activeDate)) || null} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
       </div>
 
       <glatam-calendar-modal
@@ -1275,86 +1298,86 @@ let p = class extends O {
     `;
   }
 };
-p.styles = [A, P];
-h([
+g.styles = [P, W];
+p([
   s({ type: String })
-], p.prototype, "role", 2);
-h([
+], g.prototype, "role", 2);
+p([
   s({ type: String, reflect: !0 })
-], p.prototype, "size", 2);
-h([
+], g.prototype, "size", 2);
+p([
   s({ type: String })
-], p.prototype, "view", 2);
-h([
+], g.prototype, "view", 2);
+p([
   s({ type: String })
-], p.prototype, "locale", 2);
-h([
+], g.prototype, "locale", 2);
+p([
   s({ type: Number })
-], p.prototype, "startOfWeekDay", 2);
-h([
+], g.prototype, "startOfWeekDay", 2);
+p([
   s({ type: Array })
-], p.prototype, "rules", 2);
-h([
+], g.prototype, "rules", 2);
+p([
   s({ type: Array })
-], p.prototype, "selectedDates", 2);
-h([
+], g.prototype, "selectedDates", 2);
+p([
   s({ type: Object })
-], p.prototype, "selectedRange", 2);
-h([
+], g.prototype, "selectedRange", 2);
+p([
   s({ type: String })
-], p.prototype, "hostTimezone", 2);
-h([
+], g.prototype, "hostTimezone", 2);
+p([
   s({ type: String })
-], p.prototype, "activeTimezone", 2);
-h([
+], g.prototype, "activeTimezone", 2);
+p([
   s({ type: Array })
-], p.prototype, "slots", 2);
-h([
+], g.prototype, "slots", 2);
+p([
   s({ type: String })
-], p.prototype, "minDate", 2);
-h([
+], g.prototype, "minDate", 2);
+p([
   s({ type: String })
-], p.prototype, "maxDate", 2);
-h([
+], g.prototype, "maxDate", 2);
+p([
   s({ type: Boolean })
-], p.prototype, "showNeighboringMonth", 2);
-h([
+], g.prototype, "showNeighboringMonth", 2);
+p([
   s({ attribute: !1 })
-], p.prototype, "tileClassName", 2);
-h([
-  m()
-], p.prototype, "activeDate", 2);
-h([
-  m()
-], p.prototype, "localRules", 2);
-h([
-  m()
-], p.prototype, "darkMode", 2);
-h([
-  m()
-], p.prototype, "modalOpen", 2);
-h([
-  m()
-], p.prototype, "modalDateString", 2);
-h([
-  m()
-], p.prototype, "modalStartTime", 2);
-h([
-  m()
-], p.prototype, "modalEndTime", 2);
-h([
-  m()
-], p.prototype, "modalIsRange", 2);
-h([
-  m()
-], p.prototype, "modalExistingRule", 2);
-p = h([
+], g.prototype, "tileClassName", 2);
+p([
+  u()
+], g.prototype, "activeDate", 2);
+p([
+  u()
+], g.prototype, "localRules", 2);
+p([
+  u()
+], g.prototype, "darkMode", 2);
+p([
+  u()
+], g.prototype, "modalOpen", 2);
+p([
+  u()
+], g.prototype, "modalDateString", 2);
+p([
+  u()
+], g.prototype, "modalStartTime", 2);
+p([
+  u()
+], g.prototype, "modalEndTime", 2);
+p([
+  u()
+], g.prototype, "modalIsRange", 2);
+p([
+  u()
+], g.prototype, "modalExistingRule", 2);
+g = p([
   T("glatam-calendar")
-], p);
-var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, y = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Q(t, a) : t, l = e.length - 1, o; l >= 0; l--)
+], g);
+var tt = Object.defineProperty, et = Object.getOwnPropertyDescriptor, v = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? et(t, a) : t, l = e.length - 1, o; l >= 0; l--)
     (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && K(t, a, r), r;
+  return i && r && tt(t, a, r), r;
 };
 let b = class extends O {
   constructor() {
@@ -1385,12 +1408,12 @@ let b = class extends O {
   }
   render() {
     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(), i = this.dropdownSelectedDateString ? /* @__PURE__ */ new Date(this.dropdownSelectedDateString + "T00:00:00") : null, r = i && this.activeTimezone === "local" ? C(i, this.hostTimezone, "local") : 0, l = i ? this.slots.map((o) => {
-      const c = M(i, o, this.rules), n = W(o, r), g = n.dayShift > 0 ? " (+1d)" : n.dayShift < 0 ? " (-1d)" : "";
+      const h = I(i, o, this.rules), n = U(o, r), c = n.dayShift > 0 ? " (+1d)" : n.dayShift < 0 ? " (-1d)" : "";
       return {
         ...o,
-        displayStart: n.start + g,
-        displayEnd: n.end + g,
-        isBlocked: c
+        displayStart: n.start + c,
+        displayEnd: n.end + c,
+        isBlocked: h
       };
     }) : [];
     return d`
@@ -1420,7 +1443,7 @@ let b = class extends O {
                     ` : d`
                       <div style="font-weight:600; font-size:0.9rem; text-align:center; color: var(--glatam-text);">Selecciona un Día</div>
                       <glatam-calendar-month-view
-                        .days=${j(t, a, this.rules, this.slots, this.startOfWeekDay)}
+                        .days=${A(t, a, this.rules, this.slots, this.startOfWeekDay)}
                         .locale=${this.locale}
                         .startOfWeekDay=${this.startOfWeekDay}
                         .role=${this.role}
@@ -1439,8 +1462,8 @@ let b = class extends O {
   }
 };
 b.styles = [
-  A,
   P,
+  W,
   E`
       :host {
         display: inline-block;
@@ -1452,67 +1475,67 @@ b.styles = [
       }
     `
 ];
-y([
+v([
   s({ type: String })
 ], b.prototype, "role", 2);
-y([
+v([
   s({ type: String })
 ], b.prototype, "locale", 2);
-y([
+v([
   s({ type: Number })
 ], b.prototype, "startOfWeekDay", 2);
-y([
+v([
   s({ type: Array })
 ], b.prototype, "rules", 2);
-y([
+v([
   s({ type: Object })
 ], b.prototype, "selectedRange", 2);
-y([
+v([
   s({ type: String, reflect: !0 })
 ], b.prototype, "size", 2);
-y([
+v([
   s({ type: String })
 ], b.prototype, "hostTimezone", 2);
-y([
+v([
   s({ type: String })
 ], b.prototype, "activeTimezone", 2);
-y([
+v([
   s({ type: String })
 ], b.prototype, "minDate", 2);
-y([
+v([
   s({ type: String })
 ], b.prototype, "maxDate", 2);
-y([
+v([
   s({ type: Boolean })
 ], b.prototype, "showNeighboringMonth", 2);
-y([
+v([
   s({ attribute: !1 })
 ], b.prototype, "tileClassName", 2);
-y([
+v([
   s({ type: Array })
 ], b.prototype, "slots", 2);
-y([
-  m()
+v([
+  u()
 ], b.prototype, "activeDate", 2);
-y([
-  m()
+v([
+  u()
 ], b.prototype, "dropdownOpen", 2);
-y([
-  m()
+v([
+  u()
 ], b.prototype, "dropdownSelectedDateString", 2);
-b = y([
+b = v([
   T("glatam-calendar-mini")
 ], b);
 export {
-  p as GlatamCalendar,
-  D as GlatamCalendarDayView,
+  g as GlatamCalendar,
+  S as GlatamCalendarDayView,
   b as GlatamCalendarMini,
   x as GlatamCalendarModal,
   f as GlatamCalendarMonthView,
   w as GlatamCalendarWeekView,
-  P as calendarStyles,
-  st as formatISODate,
-  lt as isTimeBlocked,
-  nt as parseISODate,
-  A as variablesStyles
+  W as calendarStyles,
+  nt as formatISODate,
+  dt as isTimeBlocked,
+  ct as parseISODate,
+  P as variablesStyles
 };