kalendly 0.3.1 → 0.3.3

package/dist/index.umd.js

@@ -78,6 +78,54 @@ var Kalendly = (() => {
     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();
@@ -451,12 +499,14 @@ var Kalendly = (() => {
     /**
      * 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();
     }
@@ -484,8 +534,8 @@ var Kalendly = (() => {
     /**
      * 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
@@ -714,6 +764,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;
@@ -832,8 +917,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));
       }
@@ -853,6 +956,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();
@@ -896,7 +1004,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>` : ""}
@@ -972,25 +1080,31 @@ var Kalendly = (() => {
         ];
         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";
@@ -1025,7 +1139,7 @@ var Kalendly = (() => {
           )) {
             classes.push("calendar-cell-selected");
           }
-          if (availabilityMode && calendarDate.isCurrentMonth) {
+          if (availabilityMode) {
             const bucket = this.resolveBucket(
               calendarDate.date
             );
@@ -1046,7 +1160,7 @@ var Kalendly = (() => {
               `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");
@@ -1058,12 +1172,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()}
@@ -1251,7 +1371,7 @@ var Kalendly = (() => {
             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,
@@ -1489,6 +1609,10 @@ var Kalendly = (() => {
     "initial-date",
     "min-year",
     "max-year",
+    "min-date",
+    "max-date",
+    "available-days",
+    "available-hours",
     "week-starts-on",
     "heading",
     "months",
@@ -1510,6 +1634,18 @@ 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",
+    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",