kalendly 0.2.0 → 0.2.2

package/dist/index.js

@@ -494,11 +494,12 @@ function defineCalendarElement(tagName = "kal-calendar") {
     customElements.define(tagName, CalendarElement);
   }
 }
-var CalendarElement;
+var isSameDay2, CalendarElement;
 var init_CalendarElement = __esm({
   "src/web-components/CalendarElement.ts"() {
     "use strict";
     init_core();
+    isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
     CalendarElement = class extends HTMLElement {
       constructor() {
         super(...arguments);
@@ -520,6 +521,13 @@ var init_CalendarElement = __esm({
         this._categoryColors = null;
         this._renderEvent = null;
         this._renderNoEvents = null;
+        // Selection state (availability mode — range)
+        this._rangeStart = null;
+        this._rangeEnd = null;
+        this._timeRangeDate = null;
+        this._timeRangeStart = null;
+        this._timeRangeEnd = null;
+        this._timeRangeComplete = false;
       }
       get events() {
         return this._events;
@@ -548,6 +556,13 @@ var init_CalendarElement = __esm({
         this._renderNoEvents = val;
         if (this.engine) this.render();
       }
+      get loading() {
+        return this.hasAttribute("loading");
+      }
+      set loading(val) {
+        if (val) this.setAttribute("loading", "");
+        else this.removeAttribute("loading");
+      }
       connectedCallback() {
         this.classList.add("kalendly-calendar");
         this.initEngine();
@@ -558,8 +573,20 @@ var init_CalendarElement = __esm({
         this.classList.remove("kalendly-calendar");
         this.innerHTML = "";
       }
-      attributeChangedCallback(_name, oldVal, newVal) {
+      attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal) return;
+        if (name === "loading") {
+          this.render();
+          return;
+        }
+        if (name === "selectable" && newVal === null) {
+          this._rangeStart = null;
+          this._rangeEnd = null;
+          this._timeRangeDate = null;
+          this._timeRangeStart = null;
+          this._timeRangeEnd = null;
+          this._timeRangeComplete = false;
+        }
         this.reinit();
       }
       get minYear() {
@@ -651,6 +678,8 @@ var init_CalendarElement = __esm({
           root.style.setProperty("--calendar-today-outline", t.todayOutline);
         if (t.selectedBg)
           root.style.setProperty("--calendar-selected-bg", t.selectedBg);
+        if (t.headerBg) root.style.setProperty("--calendar-header-bg", t.headerBg);
+        if (t.popupBg) root.style.setProperty("--calendar-popup-bg", t.popupBg);
         if (t.eventIndicator)
           root.style.setProperty("--calendar-event-indicator", t.eventIndicator);
       }
@@ -661,6 +690,9 @@ var init_CalendarElement = __esm({
         const title = this.getAttribute("title");
         const minYear = this.minYear;
         const maxYear = this.maxYear;
+        const availabilityMode = this.getAttribute("availability-mode");
+        const selectable = this.hasAttribute("selectable");
+        const isLoading = this.loading;
         const today = /* @__PURE__ */ new Date();
         const todayMonth = today.getMonth();
         const todayYear = today.getFullYear();
@@ -770,6 +802,37 @@ 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 isHourBooked = (hour) => events.some((event) => {
+            if (!event.startTime || !event.endTime) return true;
+            const [startH] = event.startTime.split(":").map(Number);
+            const [endH] = event.endTime.split(":").map(Number);
+            return hour >= startH && hour < endH;
+          });
+          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 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--booked" : "time-grid__slot--free",
+              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()}"` : "";
+            return `
+          <div class="${slotClasses}" ${slotAttrs}>
+            <span class="time-grid__label">${startTime}</span>
+            <span class="time-grid__status">${booked ? "Booked" : "Available"}</span>
+          </div>`;
+          });
+          return `<div class="time-grid">${slots.join("")}</div>`;
+        };
         const html = `
       ${title ? `
       <div class="page--title">
@@ -859,30 +922,52 @@ var init_CalendarElement = __esm({
               </tr>
             </thead>
             <tbody data-calendar-body>
-              ${viewModel.calendarDates.map(
+              ${isLoading ? Array.from(
+          { length: 6 },
+          () => `<tr>${Array.from(
+            { length: 7 },
+            () => `<td class="calendar--skeleton" aria-hidden="true"></td>`
+          ).join("")}</tr>`
+        ).join("") : viewModel.calendarDates.map(
           (week) => `
-                <tr>
-                  ${week.map((calendarDate, dayIndex) => {
+                    <tr>
+                      ${week.map((calendarDate, dayIndex) => {
             const classes = getCellClasses(calendarDate);
+            if (availabilityMode && calendarDate.isCurrentMonth) {
+              classes.push(
+                calendarDate.hasEvents ? "availability--booked" : "availability--free"
+              );
+            }
+            if (availabilityMode === "day" && selectable && calendarDate.isCurrentMonth) {
+              const d = calendarDate.date;
+              if (this._rangeStart && isSameDay2(d, this._rangeStart))
+                classes.push("availability--range-start");
+              if (this._rangeEnd && isSameDay2(d, this._rangeEnd))
+                classes.push("availability--range-end");
+              if (this._rangeStart && this._rangeEnd) {
+                if (d > this._rangeStart && d < this._rangeEnd)
+                  classes.push("availability--in-range");
+              }
+            }
             const dateString = calendarDate.date.toISOString();
             return `
-                      <td
-                        class="${classes.join(" ")}"
-                        data-date="${dateString}"
-                        data-day-index="${dayIndex}"
-                        data-clickable="true"
-                      >
-                        ${calendarDate.date.getDate()}
-                      </td>
-                    `;
+                          <td
+                            class="${classes.join(" ")}"
+                            data-date="${dateString}"
+                            data-day-index="${dayIndex}"
+                            data-clickable="true"
+                          >
+                            ${calendarDate.date.getDate()}
+                          </td>
+                        `;
           }).join("")}
-                </tr>
-              `
+                    </tr>
+                  `
         ).join("")}
             </tbody>
           </table>
 
-          ${viewModel.selectedDate ? `
+          ${!isLoading && availabilityMode !== "day" && viewModel.selectedDate ? `
             <div class="date-popup ${viewModel.popupPositionClass}">
               <div class="popup-header">
                 <h2>${viewModel.scheduleDay}</h2>
@@ -896,7 +981,7 @@ var init_CalendarElement = __esm({
               ` : ""}
 
               <div class="events-container">
-                ${viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
+                ${availabilityMode === "time" ? renderTimeGrid(viewModel.tasks, viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
@@ -918,6 +1003,59 @@ var init_CalendarElement = __esm({
             e.stopPropagation();
             const date = new Date(cell.dataset.date);
             const dayIndex = parseInt(cell.dataset.dayIndex || "0");
+            const availMode = this.getAttribute("availability-mode");
+            const isSelectable = this.hasAttribute("selectable");
+            if (availMode === "day" && isSelectable) {
+              const isBooked = cell.classList.contains("availability--booked");
+              if (!isBooked) {
+                let startDate;
+                let endDate;
+                if (this._rangeEnd !== null) {
+                  this._rangeStart = date;
+                  this._rangeEnd = null;
+                  startDate = date;
+                  endDate = date;
+                } else if (this._rangeStart === null) {
+                  this._rangeStart = date;
+                  startDate = date;
+                  endDate = date;
+                } else {
+                  const [s, e2] = this._rangeStart <= date ? [this._rangeStart, date] : [date, this._rangeStart];
+                  const cursor = new Date(s);
+                  cursor.setDate(cursor.getDate() + 1);
+                  let blocked = false;
+                  while (cursor < e2) {
+                    if (this.engine.getEventsForDate(cursor).length > 0) {
+                      blocked = true;
+                      break;
+                    }
+                    cursor.setDate(cursor.getDate() + 1);
+                  }
+                  if (blocked) {
+                    this._rangeStart = date;
+                    this._rangeEnd = null;
+                  } else {
+                    this._rangeStart = s;
+                    this._rangeEnd = e2;
+                  }
+                  startDate = this._rangeStart;
+                  endDate = this._rangeEnd ?? this._rangeStart;
+                }
+                this.dispatchEvent(
+                  new CustomEvent("cal-availability-select", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { startDate, endDate }
+                  })
+                );
+              }
+            }
+            if (availMode === "time") {
+              this._timeRangeDate = null;
+              this._timeRangeStart = null;
+              this._timeRangeEnd = null;
+              this._timeRangeComplete = false;
+            }
             this.engine.handleDateClick(date, dayIndex);
             this.dispatchEvent(
               new CustomEvent("cal-date-select", {
@@ -933,19 +1071,29 @@ var init_CalendarElement = __esm({
           const action = actionEl.dataset.action;
           e.stopPropagation();
           switch (action) {
-            case "previous":
+            case "previous": {
+              const vm = this.engine.getViewModel();
+              const tMonth = vm.currentMonth === 0 ? 11 : vm.currentMonth - 1;
+              const tYear = vm.currentMonth === 0 ? vm.currentYear - 1 : vm.currentYear;
+              this.dispatchMonthChange(tYear, tMonth);
               this.actions.previous();
-              this.dispatchMonthChange();
               break;
-            case "next":
+            }
+            case "next": {
+              const vm = this.engine.getViewModel();
+              const tMonth = vm.currentMonth === 11 ? 0 : vm.currentMonth + 1;
+              const tYear = vm.currentMonth === 11 ? vm.currentYear + 1 : vm.currentYear;
+              this.dispatchMonthChange(tYear, tMonth);
               this.actions.next();
-              this.dispatchMonthChange();
               break;
-            case "today":
+            }
+            case "today": {
+              const t = /* @__PURE__ */ new Date();
+              this.dispatchMonthChange(t.getFullYear(), t.getMonth());
               this.actions.goToToday();
               this.pickerOpen = false;
-              this.dispatchMonthChange();
               break;
+            }
             case "toggle-picker":
               this.pickerOpen = !this.pickerOpen;
               if (this.pickerOpen) {
@@ -960,8 +1108,8 @@ var init_CalendarElement = __esm({
                 const newYear = vm.currentYear - 1;
                 this.yearInput = String(newYear);
                 this.updatePickerYear(newYear);
+                this.dispatchMonthChange(newYear, vm.currentMonth);
                 this.actions.jump(newYear, vm.currentMonth);
-                this.dispatchMonthChange();
               }
               break;
             }
@@ -971,21 +1119,60 @@ var init_CalendarElement = __esm({
                 const newYear = vm.currentYear + 1;
                 this.yearInput = String(newYear);
                 this.updatePickerYear(newYear);
+                this.dispatchMonthChange(newYear, vm.currentMonth);
                 this.actions.jump(newYear, vm.currentMonth);
-                this.dispatchMonthChange();
               }
               break;
             }
             case "select-month": {
               const month = parseInt(actionEl.dataset.month || "0", 10);
-              this.actions.jump(this.engine.getViewModel().currentYear, month);
+              const year = this.engine.getViewModel().currentYear;
+              this.dispatchMonthChange(year, month);
+              this.actions.jump(year, month);
               this.pickerOpen = false;
-              this.dispatchMonthChange();
               break;
             }
             case "close-popup":
+              this._timeRangeDate = null;
+              this._timeRangeStart = null;
+              this._timeRangeEnd = null;
+              this._timeRangeComplete = false;
               this.engine.clearSelection();
               break;
+            case "select-slot": {
+              const slotStart = actionEl.dataset.startTime;
+              const slotEnd = actionEl.dataset.endTime;
+              const slotDate = new Date(actionEl.dataset.date);
+              if (this._timeRangeComplete) {
+                this._timeRangeDate = slotDate;
+                this._timeRangeStart = slotStart;
+                this._timeRangeEnd = slotEnd;
+                this._timeRangeComplete = false;
+              } else if (this._timeRangeStart === null) {
+                this._timeRangeDate = slotDate;
+                this._timeRangeStart = slotStart;
+                this._timeRangeEnd = slotEnd;
+              } else {
+                const newStart = slotStart < this._timeRangeStart ? slotStart : this._timeRangeStart;
+                const newEnd = slotEnd > this._timeRangeEnd ? slotEnd : this._timeRangeEnd;
+                this._timeRangeStart = newStart;
+                this._timeRangeEnd = newEnd;
+                this._timeRangeComplete = true;
+              }
+              this.render();
+              this.dispatchEvent(
+                new CustomEvent("cal-availability-select", {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    date: this._timeRangeDate,
+                    startTime: this._timeRangeStart,
+                    endTime: this._timeRangeEnd
+                  }
+                })
+              );
+              break;
+            }
           }
         };
         this.delegatedInputHandler = (e) => {
@@ -1010,8 +1197,8 @@ var init_CalendarElement = __esm({
             target.value = this.yearInput;
             target.classList.remove("invalid");
           } else if (year !== vm.currentYear) {
+            this.dispatchMonthChange(year, vm.currentMonth);
             this.actions.jump(year, vm.currentMonth);
-            this.dispatchMonthChange();
           }
         };
         this.delegatedKeydownHandler = (e) => {
@@ -1050,14 +1237,17 @@ var init_CalendarElement = __esm({
         if (prevBtn) prevBtn.disabled = year <= this.minYear;
         if (nextBtn) nextBtn.disabled = year >= this.maxYear;
       }
-      dispatchMonthChange() {
+      dispatchMonthChange(year, month) {
         if (!this.engine) return;
         const vm = this.engine.getViewModel();
         this.dispatchEvent(
           new CustomEvent("cal-month-change", {
             bubbles: true,
             composed: true,
-            detail: { year: vm.currentYear, month: vm.currentMonth }
+            detail: {
+              year: year ?? vm.currentYear,
+              month: month ?? vm.currentMonth
+            }
           })
         );
       }
@@ -1072,7 +1262,10 @@ var init_CalendarElement = __esm({
         return this.engine?.getViewModel().selectedDate ?? null;
       }
       goToDate(date) {
-        this.actions?.jump(date.getFullYear(), date.getMonth());
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        this.dispatchMonthChange(year, month);
+        this.actions?.jump(year, month);
       }
       getEngine() {
         if (!this.engine)
@@ -1086,7 +1279,10 @@ var init_CalendarElement = __esm({
       "max-year",
       "week-starts-on",
       "title",
-      "use-short-month-names"
+      "use-short-month-names",
+      "availability-mode",
+      "selectable",
+      "loading"
     ];
   }
 });