kalendly 0.3.1 → 0.3.3

package/dist/index.mjs

@@ -31,6 +31,54 @@ function generateYears(minYear, maxYear) {
   const max = maxYear ?? currentYear + 10;
   return Array.from({ length: max - min + 1 }, (_, i) => min + i);
 }
+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();
@@ -472,12 +520,14 @@ var init_calendar_engine = __esm({
       /**
        * Select a specific date
        */
-      selectDate(date, dayIndex) {
+      selectDate(date, dayIndex, navigate = true) {
         this.state.selectedDate = date;
         this.state.selectedDayIndex = dayIndex ?? null;
         this.state.currentDate = date.getDate();
-        this.state.currentMonth = date.getMonth();
-        this.state.currentYear = date.getFullYear();
+        if (navigate) {
+          this.state.currentMonth = date.getMonth();
+          this.state.currentYear = date.getFullYear();
+        }
         this.updateTasks();
         this.notify();
       }
@@ -505,8 +555,8 @@ var init_calendar_engine = __esm({
       /**
        * Handle date cell click
        */
-      handleDateClick(date, dayIndex) {
-        this.selectDate(date, dayIndex);
+      handleDateClick(date, dayIndex, options) {
+        this.selectDate(date, dayIndex, options?.navigate !== false);
       }
       /**
        * Check if date has events
@@ -763,6 +813,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;
@@ -881,8 +966,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));
         }
@@ -902,6 +1005,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();
@@ -945,7 +1053,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>` : ""}
@@ -1021,25 +1129,31 @@ var init_CalendarElement = __esm({
           ];
           this.warnMissingEndTime(events);
           const booked = bookedSlots(events, date, slotDuration);
+          const hours = this.availableHours;
           const slots = booked.map((isBooked, index) => {
-            const startTime = formatMinutes(index * slotDuration);
-            const endTime = formatMinutes((index + 1) * slotDuration);
-            const inTimeRange = !isBooked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
+            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",
+              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 = `data-action="select-slot" data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}" data-booked="${isBooked}"`;
+            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">${isBooked ? "Booked" : "Available"}</span>
+            <span class="time-grid-status">${status}</span>
           </div>`;
           });
           const gridClasses = selectable ? "time-grid time-grid-selectable" : "time-grid";
@@ -1074,7 +1188,7 @@ var init_CalendarElement = __esm({
             )) {
               classes.push("calendar-cell-selected");
             }
-            if (availabilityMode && calendarDate.isCurrentMonth) {
+            if (availabilityMode) {
               const bucket = this.resolveBucket(
                 calendarDate.date
               );
@@ -1095,7 +1209,7 @@ var init_CalendarElement = __esm({
                 `aria-label="${escapeHtml(bucket)}"`
               );
             }
-            if (availabilityMode === "day" && selectable && calendarDate.isCurrentMonth) {
+            if (availabilityMode === "day" && selectable) {
               const d = calendarDate.date;
               if (this._rangeStart && isSameDay2(d, this._rangeStart))
                 classes.push("availability-range-start");
@@ -1107,12 +1221,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()}
@@ -1300,7 +1420,7 @@ var init_CalendarElement = __esm({
               this._timeRangeEnd = null;
               this._timeRangeComplete = false;
             }
-            this.engine.handleDateClick(date, dayIndex);
+            this.engine.handleDateClick(date, dayIndex, { navigate: false });
             this.dispatchEvent(
               new CustomEvent("cal-date-select", {
                 bubbles: true,
@@ -1538,6 +1658,10 @@ var init_CalendarElement = __esm({
       "initial-date",
       "min-year",
       "max-year",
+      "min-date",
+      "max-date",
+      "available-days",
+      "available-hours",
       "week-starts-on",
       "heading",
       "months",
@@ -1559,6 +1683,18 @@ 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",
+      navArrowFg: "--calendar-nav-arrow-fg",
+      navArrowBg: "--calendar-nav-arrow-bg",
+      navArrowBorder: "--calendar-nav-arrow-border",
+      navArrowHoverFg: "--calendar-nav-arrow-hover-fg",
+      navArrowHoverBg: "--calendar-nav-arrow-hover-bg",
+      inputInvalidBg: "--calendar-input-invalid-bg",
+      popupHeaderFg: "--calendar-popup-header-fg",
+      popupCloseFg: "--calendar-popup-close-fg",
+      popupCloseBg: "--calendar-popup-close-bg",
+      popupCloseHoverBg: "--calendar-popup-close-hover-bg",
       headerBg: "--calendar-header-bg",
       popupBg: "--calendar-popup-bg",
       pickerBg: "--calendar-picker-bg",
@@ -1636,12 +1772,15 @@ export {
   getEventsForDate,
   getMonthYearText,
   hasEvents,
+  isDateWithinWindow,
+  isDayAllowed,
   isSameDay,
   isToday,
   isValidHexColor,
   mergeCategoryColors,
   mergeIntervals,
   normalizeDate,
+  parseHourRanges,
   parseTimeToMinutes,
   safeColor,
   safeUrl,