kalendly 0.3.0 → 0.3.2

package/dist/index.umd.js

@@ -78,12 +78,76 @@ var Kalendly = (() => {
     const max = maxYear ?? currentYear + 10;
     return Array.from({ length: max - min + 1 }, (_, i) => min + i);
   }
-  function getEventsForDate(events, date) {
-    const normalizedTargetDate = normalizeDate(date);
-    return events.filter((event) => {
-      const eventDate = normalizeDate(new Date(event.date));
-      return eventDate.getTime() === normalizedTargetDate.getTime();
+  function parseHourRanges(value, slotDuration) {
+    const parts = value.split(",").map((part) => part.trim()).filter(Boolean);
+    if (parts.length === 0) {
+      throw new Error(
+        `<kal-calendar> available-hours is empty. Omit the attribute to allow every hour, or name at least one HH:MM-HH:MM range.`
+      );
+    }
+    const ranges = parts.map((part) => {
+      const halves = part.split("-");
+      if (halves.length !== 2) {
+        throw new Error(
+          `<kal-calendar> available-hours range "${part}" is not HH:MM-HH:MM.`
+        );
+      }
+      const [start, end] = halves.map((half) => parseTimeToMinutes(half.trim()));
+      if (start === null || end === null) {
+        throw new Error(
+          `<kal-calendar> available-hours range "${part}" has an unreadable time. Use 24-hour HH:MM.`
+        );
+      }
+      if (start >= end) {
+        throw new Error(
+          `<kal-calendar> available-hours range "${part}" starts at or after it ends.`
+        );
+      }
+      if (start % slotDuration !== 0 || end % slotDuration !== 0) {
+        throw new Error(
+          `<kal-calendar> available-hours range "${part}" does not land on a ${slotDuration}-minute slot boundary.`
+        );
+      }
+      return [start, end];
     });
+    if (mergeIntervals(ranges).length !== ranges.length) {
+      throw new Error(
+        `<kal-calendar> available-hours ranges overlap or touch: "${value}". Write each bookable window once.`
+      );
+    }
+    return ranges;
+  }
+  function isDateWithinWindow(date, min, max) {
+    const target = normalizeDate(date).getTime();
+    if (min && target < normalizeDate(min).getTime()) return false;
+    if (max && target > normalizeDate(max).getTime()) return false;
+    return true;
+  }
+  function isDayAllowed(date, days) {
+    return days === null || days.includes(date.getDay());
+  }
+  function eventCoversDate(event, date) {
+    const start = normalizeDate(new Date(event.date)).getTime();
+    const target = normalizeDate(date).getTime();
+    if (Number.isNaN(start)) return false;
+    if (event.endDate === void 0 || event.endDate === null) {
+      return start === target;
+    }
+    const end = normalizeDate(new Date(event.endDate)).getTime();
+    if (Number.isNaN(end)) {
+      throw new Error(
+        `<kal-calendar> event ${event.id} has an unreadable endDate: ${String(event.endDate)}.`
+      );
+    }
+    if (end < start) {
+      throw new Error(
+        `<kal-calendar> event ${event.id} has an endDate before its date: ${String(event.endDate)} < ${String(event.date)}.`
+      );
+    }
+    return target >= start && target <= end;
+  }
+  function getEventsForDate(events, date) {
+    return events.filter((event) => eventCoversDate(event, date));
   }
   function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
     const firstDay = new Date(year, month, 1);
@@ -222,6 +286,68 @@ var Kalendly = (() => {
     const trimmed = String(value).trim();
     return isValidHexColor(trimmed) || /^[a-z]+$/i.test(trimmed) ? trimmed : "#3b82f6";
   }
+  var MINUTES_PER_DAY = 1440;
+  var DEFAULT_SLOT_DURATION = 60;
+  function parseTimeToMinutes(time) {
+    if (typeof time !== "string") return null;
+    const match = /^(\d{1,2}):(\d{2})$/.exec(time.trim());
+    if (!match) return null;
+    const hours = Number(match[1]);
+    const mins = Number(match[2]);
+    if (hours > 24 || mins > 59 || hours === 24 && mins > 0) return null;
+    return hours * 60 + mins;
+  }
+  function formatMinutes(total) {
+    const hours = Math.floor(total / 60);
+    const mins = total % 60;
+    return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
+  }
+  function eventInterval(event, slotDuration, onDay) {
+    const day = normalizeDate(onDay).getTime();
+    if (Number.isNaN(day)) return null;
+    const base = day / 6e4;
+    const wholeDay = [base, base + MINUTES_PER_DAY];
+    if (event.allDay || !event.startTime) return wholeDay;
+    const from = parseTimeToMinutes(event.startTime);
+    if (from === null) return wholeDay;
+    if (event.endTime === void 0 || event.endTime === null) {
+      return [base + from, base + from + slotDuration];
+    }
+    const to = parseTimeToMinutes(event.endTime);
+    if (to === null) return wholeDay;
+    return [base + from, base + (to <= from ? to + MINUTES_PER_DAY : to)];
+  }
+  function mergeIntervals(intervals) {
+    const sorted = [...intervals].sort((a, b) => a[0] - b[0]);
+    return sorted.reduce((merged, [start, end]) => {
+      const last = merged[merged.length - 1];
+      if (last && start <= last[1]) last[1] = Math.max(last[1], end);
+      else merged.push([start, end]);
+      return merged;
+    }, []);
+  }
+  function bookedSlots(events, date, slotDuration = DEFAULT_SLOT_DURATION) {
+    const base = normalizeDate(date).getTime() / 6e4;
+    const previousDay = new Date(date);
+    previousDay.setDate(previousDay.getDate() - 1);
+    const intervals = [];
+    for (const event of new Set(events)) {
+      for (const day of [previousDay, date]) {
+        if (!eventCoversDate(event, day)) continue;
+        const interval = eventInterval(event, slotDuration, day);
+        if (interval) intervals.push(interval);
+      }
+    }
+    const merged = mergeIntervals(intervals);
+    return Array.from(
+      { length: Math.floor(MINUTES_PER_DAY / slotDuration) },
+      (_, index) => {
+        const start = base + index * slotDuration;
+        const end = start + slotDuration;
+        return merged.some(([from, to]) => start < to && end > from);
+      }
+    );
+  }
 
   // src/core/calendar-engine.ts
   var CalendarEngine = class {
@@ -600,6 +726,29 @@ var Kalendly = (() => {
       }
       return title;
     }
+    get slotDuration() {
+      const raw = this.getAttribute("slot-duration");
+      if (raw === null) return DEFAULT_SLOT_DURATION;
+      const minutes = Number(raw);
+      if (Number.isInteger(minutes) && minutes > 0 && MINUTES_PER_DAY % minutes === 0) {
+        return minutes;
+      }
+      console.warn(
+        `<kal-calendar> slot-duration="${raw}" must be a positive whole number of minutes that divides ${MINUTES_PER_DAY} \u2014 falling back to ${DEFAULT_SLOT_DURATION}.`
+      );
+      return DEFAULT_SLOT_DURATION;
+    }
+    warnMissingEndTime(events) {
+      for (const event of events) {
+        if (!event.startTime || event.endTime) continue;
+        const key = String(event.id);
+        if (_CalendarElement.warnedMissingEnd.has(key)) continue;
+        _CalendarElement.warnedMissingEnd.add(key);
+        console.warn(
+          `<kal-calendar> event ${key} has startTime but no endTime \u2014 occupying one ${this.slotDuration}-minute slot. Send an endTime to say how long it runs.`
+        );
+      }
+    }
     get monthCount() {
       const requested = Number(this.getAttribute("months") ?? 1);
       if (!Number.isInteger(requested) || requested < 1) return 1;
@@ -613,6 +762,41 @@ var Kalendly = (() => {
       const val = this.getAttribute("max-year");
       return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() + 10;
     }
+    boundaryDate(attr) {
+      const val = this.getAttribute(attr);
+      if (!val) return null;
+      const parsed = new Date(val);
+      if (Number.isNaN(parsed.getTime())) {
+        throw new Error(
+          `<kal-calendar> ${attr} is unreadable: "${val}". Use a value Date can parse, the same as initial-date.`
+        );
+      }
+      return parsed;
+    }
+    get availableDays() {
+      const val = this.getAttribute("available-days");
+      if (val === null) return null;
+      const parts = val.split(",").map((part) => part.trim()).filter(Boolean);
+      if (parts.length === 0) {
+        throw new Error(
+          `<kal-calendar> available-days is empty. Omit the attribute to allow every day, or name at least one weekday.`
+        );
+      }
+      return parts.map((part) => {
+        const day = Number(part);
+        if (!Number.isInteger(day) || day < 0 || day > 6) {
+          throw new Error(
+            `<kal-calendar> available-days must list integers 0-6, 0 = Sunday. Got "${part}".`
+          );
+        }
+        return day;
+      });
+    }
+    get availableHours() {
+      const val = this.getAttribute("available-hours");
+      if (val === null) return null;
+      return parseHourRanges(val, this.slotDuration);
+    }
     initEngine() {
       const initialDateAttr = this.getAttribute("initial-date");
       const initialDate = initialDateAttr ? new Date(initialDateAttr) : void 0;
@@ -731,8 +915,26 @@ var Kalendly = (() => {
       if (declared.size === 0) return "open";
       return this.knownBuckets.find((bucket) => declared.has(bucket));
     }
+    assertHorizonOrdered() {
+      const min = this.boundaryDate("min-date");
+      const max = this.boundaryDate("max-date");
+      if (min && max && min.getTime() > max.getTime()) {
+        throw new Error(
+          `<kal-calendar> min-date is after max-date: "${this.getAttribute("min-date")}" > "${this.getAttribute("max-date")}".`
+        );
+      }
+    }
+    // Whether the vendor offers this day at all, before any event is considered.
+    isDateOffered(date) {
+      return isDateWithinWindow(
+        date,
+        this.boundaryDate("min-date"),
+        this.boundaryDate("max-date")
+      ) && isDayAllowed(date, this.availableDays);
+    }
     isDateSelectable(date) {
       if (!this.engine) return false;
+      if (!this.isDateOffered(date)) return false;
       if (this._selectableStatuses) {
         return this._selectableStatuses.includes(this.resolveBucket(date));
       }
@@ -752,6 +954,11 @@ var Kalendly = (() => {
         this.assertStatusesDeclared();
         this.assertStatusesKnown();
       }
+      this.boundaryDate("min-date");
+      this.boundaryDate("max-date");
+      void this.availableDays;
+      void this.availableHours;
+      this.assertHorizonOrdered();
       const today = /* @__PURE__ */ new Date();
       const todayMonth = today.getMonth();
       const todayYear = today.getFullYear();
@@ -795,7 +1002,7 @@ var Kalendly = (() => {
         return `
         <div class="event-card" style="border-left-color: ${borderColor}">
           <div class="event-header">
-            <div class="event-title">${escapeHtml(event.name)}</div>
+            ${event.name ? `<div class="event-title">${escapeHtml(event.name)}</div>` : ""}
             <div class="event-badges">
               ${event.category ? `<span class="badge category category-${slugifyToken(event.category)}">${escapeHtml(getCategoryLabel(event.category))}</span>` : ""}
               ${event.priority ? `<span class="badge priority priority-${slugifyToken(event.priority)}">${escapeHtml(getPriorityLabel(event.priority))}</span>` : ""}
@@ -861,42 +1068,45 @@ var Kalendly = (() => {
       const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
       const renderEvent = this._renderEvent || defaultRenderEvent;
       const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
-      const renderTimeGrid = (events, date) => {
-        const startHour = (time) => {
-          if (typeof time !== "string") return null;
-          const hour = Number(time.split(":")[0]);
-          return Number.isInteger(hour) && hour >= 0 && hour <= 24 ? hour : null;
-        };
-        const isHourBooked = (hour) => events.some((event) => {
-          if (!event.startTime) return true;
-          const from = startHour(event.startTime);
-          const to = event.endTime ? startHour(event.endTime) : 24;
-          if (from === null || to === null) return true;
-          return hour >= from && hour < to;
-        });
-        const slots = Array.from({ length: 24 }, (_, hour) => {
-          const startTime = `${String(hour).padStart(2, "0")}:00`;
-          const endTime = `${String(hour + 1).padStart(2, "0")}:00`;
-          const booked = isHourBooked(hour);
-          const inTimeRange = !booked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
+      const renderTimeGrid = (date) => {
+        const slotDuration = this.slotDuration;
+        const previousDay = new Date(date);
+        previousDay.setDate(previousDay.getDate() - 1);
+        const events = [
+          ...this.engine.getEventsForDate(previousDay),
+          ...this.engine.getEventsForDate(date)
+        ];
+        this.warnMissingEndTime(events);
+        const booked = bookedSlots(events, date, slotDuration);
+        const hours = this.availableHours;
+        const slots = booked.map((isBooked, index) => {
+          const slotStart = index * slotDuration;
+          const slotEnd = slotStart + slotDuration;
+          const startTime = formatMinutes(slotStart);
+          const endTime = formatMinutes(slotEnd);
+          const offered = hours === null || hours.some(([from, to]) => slotStart >= from && slotEnd <= to);
+          const inTimeRange = offered && !isBooked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
           const isRangeStart = inTimeRange && startTime === this._timeRangeStart;
           const isRangeEnd = inTimeRange && endTime === this._timeRangeEnd;
           const isInRange = inTimeRange && !isRangeStart && !isRangeEnd;
           const slotClasses = [
             "time-grid-slot",
-            booked ? "time-grid-slot-blocked" : "time-grid-slot-open",
+            offered ? "" : "time-grid-slot-out-of-range",
+            isBooked ? "time-grid-slot-blocked" : "time-grid-slot-open",
             isRangeStart ? "time-grid-slot-range-start" : "",
             isRangeEnd ? "time-grid-slot-range-end" : "",
             isInRange ? "time-grid-slot-in-range" : ""
           ].filter(Boolean).join(" ");
-          const slotAttrs = !booked && selectable ? `data-action="select-slot" data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}"` : "";
+          const slotAttrs = `${offered ? 'data-action="select-slot" ' : ""}data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}" data-booked="${isBooked}"`;
+          const status = !offered ? "Closed" : isBooked ? "Booked" : "Available";
           return `
           <div class="${slotClasses}" ${slotAttrs}>
             <span class="time-grid-label">${startTime}</span>
-            <span class="time-grid-status">${booked ? "Booked" : "Available"}</span>
+            <span class="time-grid-status">${status}</span>
           </div>`;
         });
-        return `<div class="time-grid">${slots.join("")}</div>`;
+        const gridClasses = selectable ? "time-grid time-grid-selectable" : "time-grid";
+        return `<div class="${gridClasses}">${slots.join("")}</div>`;
       };
       const multiMonth = viewModel.panes.length > 1;
       const renderPane = (pane) => `
@@ -921,6 +1131,12 @@ var Kalendly = (() => {
                         ${week.map((calendarDate, dayIndex) => {
           const classes = getCellClasses(calendarDate);
           const cellAttrs = [];
+          if (viewModel.selectedDate && isSameDay2(
+            calendarDate.date,
+            viewModel.selectedDate
+          )) {
+            classes.push("calendar-cell-selected");
+          }
           if (availabilityMode && calendarDate.isCurrentMonth) {
             const bucket = this.resolveBucket(
               calendarDate.date
@@ -954,12 +1170,18 @@ var Kalendly = (() => {
             }
           }
           const dateString = calendarDate.date.toISOString();
+          const offered = this.isDateOffered(
+            calendarDate.date
+          );
+          if (!offered) {
+            classes.push("calendar-cell-out-of-range");
+          }
           return `
                             <td
                               class="${classes.join(" ")}"
                               data-date="${dateString}"
                               data-day-index="${dayIndex}"
-                              data-clickable="true"
+                              ${offered ? 'data-clickable="true"' : ""}
                               ${cellAttrs.join(" ")}
                             >
                               ${calendarDate.date.getDate()}
@@ -1073,7 +1295,7 @@ var Kalendly = (() => {
               ` : ""}
 
               <div class="events-container">
-                ${availabilityMode === "time" ? renderTimeGrid(viewModel.tasks, viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
+                ${availabilityMode === "time" ? renderTimeGrid(viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
@@ -1234,6 +1456,20 @@ var Kalendly = (() => {
             const slotStart = actionEl.dataset.startTime;
             const slotEnd = actionEl.dataset.endTime;
             const slotDate = new Date(actionEl.dataset.date);
+            const slotBooked = actionEl.dataset.booked === "true";
+            this.dispatchEvent(
+              new CustomEvent("cal-slot-select", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  date: slotDate,
+                  startTime: slotStart,
+                  endTime: slotEnd,
+                  booked: slotBooked
+                }
+              })
+            );
+            if (slotBooked || !this.hasAttribute("selectable")) break;
             if (this._timeRangeComplete) {
               this._timeRangeDate = slotDate;
               this._timeRangeStart = slotStart;
@@ -1371,9 +1607,14 @@ var Kalendly = (() => {
     "initial-date",
     "min-year",
     "max-year",
+    "min-date",
+    "max-date",
+    "available-days",
+    "available-hours",
     "week-starts-on",
     "heading",
     "months",
+    "slot-duration",
     "title",
     "use-short-month-names",
     "availability-mode",
@@ -1391,6 +1632,8 @@ var Kalendly = (() => {
     borderColor: "--calendar-border-color",
     todayOutline: "--calendar-today-outline",
     selectedBg: "--calendar-selected-bg",
+    outOfRangeBg: "--calendar-out-of-range-bg",
+    outOfRangeFg: "--calendar-out-of-range-fg",
     headerBg: "--calendar-header-bg",
     popupBg: "--calendar-popup-bg",
     pickerBg: "--calendar-picker-bg",
@@ -1425,6 +1668,7 @@ var Kalendly = (() => {
     badgeTentativeBg: "--calendar-badge-tentative-bg",
     badgeTentativeText: "--calendar-badge-tentative-text"
   };
+  _CalendarElement.warnedMissingEnd = /* @__PURE__ */ new Set();
   _CalendarElement.BUILT_IN_BUCKETS = ["blocked", "conditional", "open"];
   _CalendarElement.titleDeprecationWarned = false;
   var CalendarElement = _CalendarElement;