kalendly 0.3.0 → 0.3.2

package/dist/index.js

@@ -43,12 +43,76 @@ function generateYears(minYear, maxYear) {
   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 hasEvents(events, date) {
   return getEventsForDate(events, date).length > 0;
@@ -192,7 +256,67 @@ function safeColor(value) {
   const trimmed = String(value).trim();
   return isValidHexColor(trimmed) || /^[a-z]+$/i.test(trimmed) ? trimmed : "#3b82f6";
 }
-var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS, HTML_ESCAPES;
+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);
+    }
+  );
+}
+var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS, HTML_ESCAPES, MINUTES_PER_DAY, DEFAULT_SLOT_DURATION;
 var init_utils = __esm({
   "src/core/utils.ts"() {
     "use strict";
@@ -248,6 +372,8 @@ var init_utils = __esm({
       '"': "&quot;",
       "'": "&#39;"
     };
+    MINUTES_PER_DAY = 1440;
+    DEFAULT_SLOT_DURATION = 60;
   }
 });
 
@@ -661,6 +787,29 @@ var init_CalendarElement = __esm({
         }
         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;
@@ -674,6 +823,41 @@ var init_CalendarElement = __esm({
         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;
@@ -792,8 +976,26 @@ var init_CalendarElement = __esm({
         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));
         }
@@ -813,6 +1015,11 @@ var init_CalendarElement = __esm({
           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();
@@ -856,7 +1063,7 @@ var init_CalendarElement = __esm({
           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>` : ""}
@@ -922,42 +1129,45 @@ var init_CalendarElement = __esm({
         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) => `
@@ -982,6 +1192,12 @@ var init_CalendarElement = __esm({
                         ${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
@@ -1015,12 +1231,18 @@ var init_CalendarElement = __esm({
               }
             }
             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()}
@@ -1134,7 +1356,7 @@ var init_CalendarElement = __esm({
               ` : ""}
 
               <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>
           ` : ""}
@@ -1295,6 +1517,20 @@ var init_CalendarElement = __esm({
               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;
@@ -1432,9 +1668,14 @@ var init_CalendarElement = __esm({
       "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",
@@ -1452,6 +1693,8 @@ var init_CalendarElement = __esm({
       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",
@@ -1486,6 +1729,7 @@ var init_CalendarElement = __esm({
       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;
     CalendarElement = _CalendarElement;
@@ -1499,12 +1743,18 @@ __export(web_components_exports, {
   CalendarEngine: () => CalendarEngine,
   DAYS: () => DAYS,
   DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
+  DEFAULT_SLOT_DURATION: () => DEFAULT_SLOT_DURATION,
+  MINUTES_PER_DAY: () => MINUTES_PER_DAY,
   MONTHS: () => MONTHS,
   MONTHS_FULL: () => MONTHS_FULL,
+  bookedSlots: () => bookedSlots,
   defineCalendarElement: () => defineCalendarElement,
   escapeHtml: () => escapeHtml,
+  eventCoversDate: () => eventCoversDate,
+  eventInterval: () => eventInterval,
   formatAttendees: () => formatAttendees,
   formatDateForDisplay: () => formatDateForDisplay,
+  formatMinutes: () => formatMinutes,
   formatTimeRange: () => formatTimeRange,
   generateCalendarDates: () => generateCalendarDates,
   generateYears: () => generateYears,
@@ -1514,11 +1764,16 @@ __export(web_components_exports, {
   getEventsForDate: () => getEventsForDate,
   getMonthYearText: () => getMonthYearText,
   hasEvents: () => hasEvents,
+  isDateWithinWindow: () => isDateWithinWindow,
+  isDayAllowed: () => isDayAllowed,
   isSameDay: () => isSameDay,
   isToday: () => isToday,
   isValidHexColor: () => isValidHexColor,
   mergeCategoryColors: () => mergeCategoryColors,
+  mergeIntervals: () => mergeIntervals,
   normalizeDate: () => normalizeDate,
+  parseHourRanges: () => parseHourRanges,
+  parseTimeToMinutes: () => parseTimeToMinutes,
   safeColor: () => safeColor,
   safeUrl: () => safeUrl,
   slugifyToken: () => slugifyToken,
@@ -1540,12 +1795,18 @@ if (typeof customElements !== "undefined" && !customElements.get("kal-calendar")
   CalendarEngine,
   DAYS,
   DEFAULT_CATEGORY_COLORS,
+  DEFAULT_SLOT_DURATION,
+  MINUTES_PER_DAY,
   MONTHS,
   MONTHS_FULL,
+  bookedSlots,
   defineCalendarElement,
   escapeHtml,
+  eventCoversDate,
+  eventInterval,
   formatAttendees,
   formatDateForDisplay,
+  formatMinutes,
   formatTimeRange,
   generateCalendarDates,
   generateYears,
@@ -1555,11 +1816,16 @@ if (typeof customElements !== "undefined" && !customElements.get("kal-calendar")
   getEventsForDate,
   getMonthYearText,
   hasEvents,
+  isDateWithinWindow,
+  isDayAllowed,
   isSameDay,
   isToday,
   isValidHexColor,
   mergeCategoryColors,
+  mergeIntervals,
   normalizeDate,
+  parseHourRanges,
+  parseTimeToMinutes,
   safeColor,
   safeUrl,
   slugifyToken,