kalendly 0.1.7 → 0.2.0

package/dist/{vanilla/index.umd.js → index.umd.js}

@@ -18,34 +18,11 @@ var Kalendly = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-  // src/vanilla/index.ts
-  var index_exports = {};
-  __export(index_exports, {
-    CalendarEngine: () => CalendarEngine,
-    DAYS: () => DAYS,
-    DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
-    MONTHS: () => MONTHS,
-    MONTHS_FULL: () => MONTHS_FULL,
-    VanillaCalendar: () => VanillaCalendar,
-    createCalendar: () => createCalendar,
-    formatAttendees: () => formatAttendees,
-    formatDateForDisplay: () => formatDateForDisplay,
-    formatTimeRange: () => formatTimeRange,
-    generateCalendarDates: () => generateCalendarDates,
-    generateYears: () => generateYears,
-    getCategoryColor: () => getCategoryColor,
-    getCellClasses: () => getCellClasses,
-    getDefaultEventColor: () => getDefaultEventColor,
-    getEventsForDate: () => getEventsForDate,
-    getMonthYearText: () => getMonthYearText,
-    getPopupPositionClass: () => getPopupPositionClass,
-    hasEvents: () => hasEvents,
-    isSameDay: () => isSameDay,
-    isToday: () => isToday,
-    isValidHexColor: () => isValidHexColor,
-    mergeCategoryColors: () => mergeCategoryColors,
-    normalizeDate: () => normalizeDate,
-    sortEventsByTime: () => sortEventsByTime
+  // src/web-components/CalendarElement.ts
+  var CalendarElement_exports = {};
+  __export(CalendarElement_exports, {
+    CalendarElement: () => CalendarElement,
+    defineCalendarElement: () => defineCalendarElement
   });
 
   // src/core/utils.ts
@@ -108,9 +85,6 @@ var Kalendly = (() => {
       return eventDate.getTime() === normalizedTargetDate.getTime();
     });
   }
-  function hasEvents(events, date) {
-    return getEventsForDate(events, date).length > 0;
-  }
   function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
@@ -212,16 +186,6 @@ var Kalendly = (() => {
     if (attendees.length === 2) return attendees.join(" and ");
     return `${attendees.slice(0, -1).join(", ")}, and ${attendees[attendees.length - 1]}`;
   }
-  function sortEventsByTime(events) {
-    return [...events].sort((a, b) => {
-      const aAllDay = a.allDay || !a.startTime && !a.endTime;
-      const bAllDay = b.allDay || !b.startTime && !b.endTime;
-      if (aAllDay && !bAllDay) return -1;
-      if (!aAllDay && bAllDay) return 1;
-      if (!a.startTime || !b.startTime) return 0;
-      return a.startTime.localeCompare(b.startTime);
-    });
-  }
   var DEFAULT_CATEGORY_COLORS = {
     work: "#3b82f6",
     personal: "#8b5cf6",
@@ -230,13 +194,6 @@ var Kalendly = (() => {
     appointment: "#f59e0b",
     other: "#6b7280"
   };
-  function getDefaultEventColor(category, customColors) {
-    const colorMap = customColors || DEFAULT_CATEGORY_COLORS;
-    if (category && colorMap[category]) {
-      return colorMap[category];
-    }
-    return "#fc8917";
-  }
   function mergeCategoryColors(customColors) {
     return {
       ...DEFAULT_CATEGORY_COLORS,
@@ -480,83 +437,174 @@ var Kalendly = (() => {
     }
   };
 
-  // src/vanilla/Calendar.ts
-  var VanillaCalendar = class {
-    constructor(props) {
+  // src/web-components/CalendarElement.ts
+  var CalendarElement = class extends HTMLElement {
+    constructor() {
+      super(...arguments);
+      this.engine = null;
       this.unsubscribe = null;
+      this.actions = null;
       this.pickerOpen = false;
       this.yearInput = "";
       this.yearInputValid = true;
+      this.listenersAttached = false;
       this.clickOutsideHandler = null;
       this.delegatedClickHandler = null;
       this.delegatedInputHandler = null;
       this.delegatedBlurHandler = null;
       this.delegatedKeydownHandler = null;
-      this.listenersAttached = false;
-      this.props = props;
-      if (typeof props.container === "string") {
-        const element = document.querySelector(props.container);
-        if (!element) {
-          throw new Error(`Container element "${props.container}" not found`);
-        }
-        this.container = element;
-      } else {
-        this.container = props.container;
+      // Rich property backing fields
+      this._events = [];
+      this._theme = null;
+      this._categoryColors = null;
+      this._renderEvent = null;
+      this._renderNoEvents = null;
+    }
+    get events() {
+      return this._events;
+    }
+    set events(val) {
+      this._events = val;
+      if (this.engine) {
+        this.engine.updateEvents(val);
       }
-      this.engine = new CalendarEngine({
-        events: props.events,
-        initialDate: props.initialDate,
-        minYear: props.minYear,
-        maxYear: props.maxYear,
-        weekStartsOn: props.weekStartsOn
-      });
-      this.actions = this.engine.getActions();
+    }
+    set theme(val) {
+      this._theme = val;
       this.applyTheme();
-      this.init();
     }
-    applyTheme() {
-      if (this.props.theme) {
-        const root = document.documentElement;
-        const theme = this.props.theme;
-        if (theme.primary)
-          root.style.setProperty("--calendar-primary-color", theme.primary);
-        if (theme.secondary)
-          root.style.setProperty("--calendar-secondary-color", theme.secondary);
-        if (theme.tertiary)
-          root.style.setProperty("--calendar-tertiary-color", theme.tertiary);
-        if (theme.textColor)
-          root.style.setProperty("--calendar-text-color", theme.textColor);
-        if (theme.textLight)
-          root.style.setProperty("--calendar-text-light", theme.textLight);
-        if (theme.background)
-          root.style.setProperty("--calendar-background", theme.background);
-        if (theme.cellHover)
-          root.style.setProperty("--calendar-cell-hover", theme.cellHover);
-        if (theme.borderColor)
-          root.style.setProperty("--calendar-border-color", theme.borderColor);
-        if (theme.todayOutline)
-          root.style.setProperty("--calendar-today-outline", theme.todayOutline);
-        if (theme.selectedBg)
-          root.style.setProperty("--calendar-selected-bg", theme.selectedBg);
-        if (theme.eventIndicator)
-          root.style.setProperty(
-            "--calendar-event-indicator",
-            theme.eventIndicator
-          );
+    set categoryColors(val) {
+      this._categoryColors = val;
+      if (this.engine) {
+        this.engine.updateCategoryColors(val);
       }
     }
-    init() {
-      this.container.classList.add("kalendly-calendar");
-      if (this.props.className) {
-        this.container.classList.add(this.props.className);
-      }
+    set renderEvent(val) {
+      this._renderEvent = val;
+      if (this.engine) this.render();
+    }
+    set renderNoEvents(val) {
+      this._renderNoEvents = val;
+      if (this.engine) this.render();
+    }
+    connectedCallback() {
+      this.classList.add("kalendly-calendar");
+      this.initEngine();
+      this.render();
+    }
+    disconnectedCallback() {
+      this.cleanup();
+      this.classList.remove("kalendly-calendar");
+      this.innerHTML = "";
+    }
+    attributeChangedCallback(_name, oldVal, newVal) {
+      if (oldVal === newVal) return;
+      this.reinit();
+    }
+    get minYear() {
+      const val = this.getAttribute("min-year");
+      return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() - 30;
+    }
+    get maxYear() {
+      const val = this.getAttribute("max-year");
+      return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() + 10;
+    }
+    initEngine() {
+      const initialDateAttr = this.getAttribute("initial-date");
+      const initialDate = initialDateAttr ? new Date(initialDateAttr) : void 0;
+      const weekStartsOnAttr = this.getAttribute("week-starts-on");
+      const weekStartsOn = weekStartsOnAttr === "1" ? 1 : 0;
+      this.engine = new CalendarEngine({
+        events: this._events,
+        initialDate,
+        minYear: this.minYear,
+        maxYear: this.maxYear,
+        weekStartsOn,
+        categoryColors: this._categoryColors ?? void 0
+      });
+      this.actions = this.engine.getActions();
+      this.applyTheme();
       this.unsubscribe = this.engine.subscribe(() => {
         this.render();
       });
+    }
+    reinit() {
+      if (!this.engine) return;
+      this.cleanup();
+      this.initEngine();
       this.render();
     }
+    cleanup() {
+      if (this.unsubscribe) {
+        this.unsubscribe();
+        this.unsubscribe = null;
+      }
+      if (this.delegatedClickHandler) {
+        this.removeEventListener("click", this.delegatedClickHandler);
+        this.delegatedClickHandler = null;
+      }
+      if (this.delegatedInputHandler) {
+        this.removeEventListener("input", this.delegatedInputHandler);
+        this.delegatedInputHandler = null;
+      }
+      if (this.delegatedBlurHandler) {
+        this.removeEventListener("blur", this.delegatedBlurHandler, true);
+        this.delegatedBlurHandler = null;
+      }
+      if (this.delegatedKeydownHandler) {
+        this.removeEventListener("keydown", this.delegatedKeydownHandler);
+        this.delegatedKeydownHandler = null;
+      }
+      if (this.clickOutsideHandler) {
+        document.removeEventListener("click", this.clickOutsideHandler);
+        this.clickOutsideHandler = null;
+      }
+      this.listenersAttached = false;
+      if (this.engine) {
+        this.engine.destroy();
+        this.engine = null;
+      }
+      this.actions = null;
+    }
+    applyTheme() {
+      if (!this._theme) return;
+      const root = document.documentElement;
+      const t = this._theme;
+      if (t.primary)
+        root.style.setProperty("--calendar-primary-color", t.primary);
+      if (t.secondary)
+        root.style.setProperty("--calendar-secondary-color", t.secondary);
+      if (t.tertiary)
+        root.style.setProperty("--calendar-tertiary-color", t.tertiary);
+      if (t.textColor)
+        root.style.setProperty("--calendar-text-color", t.textColor);
+      if (t.textLight)
+        root.style.setProperty("--calendar-text-light", t.textLight);
+      if (t.background)
+        root.style.setProperty("--calendar-background", t.background);
+      if (t.cellHover)
+        root.style.setProperty("--calendar-cell-hover", t.cellHover);
+      if (t.borderColor)
+        root.style.setProperty("--calendar-border-color", t.borderColor);
+      if (t.todayOutline)
+        root.style.setProperty("--calendar-today-outline", t.todayOutline);
+      if (t.selectedBg)
+        root.style.setProperty("--calendar-selected-bg", t.selectedBg);
+      if (t.eventIndicator)
+        root.style.setProperty("--calendar-event-indicator", t.eventIndicator);
+    }
     render() {
+      if (!this.engine) return;
       const viewModel = this.engine.getViewModel();
+      const useShortMonths = this.hasAttribute("use-short-month-names");
+      const title = this.getAttribute("title");
+      const minYear = this.minYear;
+      const maxYear = this.maxYear;
+      const today = /* @__PURE__ */ new Date();
+      const todayMonth = today.getMonth();
+      const todayYear = today.getFullYear();
+      const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
+      const showScrollHint = viewModel.tasks.length > 3;
       const defaultRenderEvent = (event) => {
         const timeRange = formatTimeRange(event);
         const attendeesList = formatAttendees(event.attendees);
@@ -602,46 +650,46 @@ var Kalendly = (() => {
               ${event.status && event.status !== "scheduled" ? `<span class="badge status-${event.status}">${getStatusLabel(event.status)}</span>` : ""}
             </div>
           </div>
-          
+
           ${timeRange ? `
           <div class="event-time">
             <span class="event-time-label">Time:</span>
             <span class="event-time-value">${timeRange}</span>
           </div>
           ` : ""}
-          
+
           ${event.description ? `
           <div class="event-description">${event.description}</div>
           ` : ""}
-          
+
           ${event.location ? `
           <div class="event-time">
             <span class="event-time-label">Location:</span>
             <span class="event-time-value">${event.location}</span>
           </div>
           ` : ""}
-          
+
           ${attendeesList ? `
           <div class="event-time">
             <span class="event-time-label">Attendees:</span>
             <span class="event-time-value">${attendeesList}</span>
           </div>
           ` : ""}
-          
+
           ${event.organizer ? `
           <div class="event-time">
             <span class="event-time-label">Organizer:</span>
             <span class="event-time-value">${event.organizer}</span>
           </div>
           ` : ""}
-          
+
           ${event.notes ? `
           <div class="event-time">
             <span class="event-time-label">Notes:</span>
             <span class="event-time-value">${event.notes}</span>
           </div>
           ` : ""}
-          
+
           ${event.url ? `
           <div class="event-time">
             <a href="${event.url}" target="_blank" rel="noopener noreferrer" class="event-link">
@@ -649,7 +697,7 @@ var Kalendly = (() => {
             </a>
           </div>
           ` : ""}
-          
+
           ${event.tags && event.tags.length > 0 ? `
           <div class="event-tags">
             ${event.tags.map((tag) => `<span class="event-tag">${tag}</span>`).join("")}
@@ -659,25 +707,17 @@ var Kalendly = (() => {
       `;
       };
       const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
-      const renderEvent = this.props.renderEvent || defaultRenderEvent;
-      const renderNoEvents = this.props.renderNoEvents || defaultRenderNoEvents;
-      const showScrollHint = viewModel.tasks.length > 3;
-      const today = /* @__PURE__ */ new Date();
-      const todayMonth = today.getMonth();
-      const todayYear = today.getFullYear();
-      const minYear = this.props.minYear ?? todayYear - 30;
-      const maxYear = this.props.maxYear ?? todayYear + 10;
-      const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
+      const renderEvent = this._renderEvent || defaultRenderEvent;
+      const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
       const html = `
-      ${this.props.title ? `
-        <div class="page--title">
-          <h1>${this.props.title}</h1>
-        </div>
+      ${title ? `
+      <div class="page--title">
+        <h1>${title}</h1>
+      </div>
       ` : ""}
 
       <div class="calendar--content">
         <div class="calendar--card">
-          <!-- Navigation Header -->
           <div class="calendar--nav-header">
             <button type="button" class="calendar--nav-arrow" data-action="previous" aria-label="Previous month">
               &#8249;
@@ -691,7 +731,7 @@ var Kalendly = (() => {
                 aria-expanded="${this.pickerOpen ? "true" : "false"}"
                 aria-haspopup="true"
               >
-                ${this.props.useShortMonthNames ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
+                ${useShortMonths ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
                 <span class="calendar--picker-chevron">&#9662;</span>
               </button>
 
@@ -722,7 +762,7 @@ var Kalendly = (() => {
                   </div>
 
                   <div class="calendar--picker-months">
-                    ${(this.props.useShortMonthNames ? MONTHS : MONTHS_FULL).map((month, index) => {
+                    ${(useShortMonths ? MONTHS : MONTHS_FULL).map((month, index) => {
         const isSelected = index === viewModel.currentMonth;
         const isCurrent = index === todayMonth && viewModel.currentYear === todayYear;
         return `
@@ -795,26 +835,21 @@ var Kalendly = (() => {
               ` : ""}
 
               <div class="events-container">
-                ${viewModel.tasks.length > 0 ? `
-                  ${viewModel.tasks.map((event) => renderEvent(event)).join("")}
-                ` : renderNoEvents()}
+                ${viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
         </div>
       </div>
     `;
-      this.container.innerHTML = html;
+      this.innerHTML = html;
       this.attachEventListeners();
     }
     attachEventListeners() {
       if (this.listenersAttached) return;
       this.listenersAttached = true;
-      const today = /* @__PURE__ */ new Date();
-      const todayYear = today.getFullYear();
-      const todayMonth = today.getMonth();
-      const minYear = this.props.minYear ?? todayYear - 30;
-      const maxYear = this.props.maxYear ?? todayYear + 10;
+      const minYear = this.minYear;
+      const maxYear = this.maxYear;
       this.delegatedClickHandler = (e) => {
         const target = e.target;
         const cell = target.closest('td[data-clickable="true"]');
@@ -823,8 +858,12 @@ var Kalendly = (() => {
           const date = new Date(cell.dataset.date);
           const dayIndex = parseInt(cell.dataset.dayIndex || "0");
           this.engine.handleDateClick(date, dayIndex);
-          this.container.dispatchEvent(
-            new CustomEvent("dateSelect", { detail: { date, dayIndex } })
+          this.dispatchEvent(
+            new CustomEvent("cal-date-select", {
+              bubbles: true,
+              composed: true,
+              detail: { date, events: this.engine.getEventsForDate(date) }
+            })
           );
           return;
         }
@@ -844,11 +883,7 @@ var Kalendly = (() => {
           case "today":
             this.actions.goToToday();
             this.pickerOpen = false;
-            this.container.dispatchEvent(
-              new CustomEvent("monthChange", {
-                detail: { year: todayYear, month: todayMonth }
-              })
-            );
+            this.dispatchMonthChange();
             break;
           case "toggle-picker":
             this.pickerOpen = !this.pickerOpen;
@@ -921,118 +956,83 @@ var Kalendly = (() => {
       this.delegatedKeydownHandler = (e) => {
         const target = e.target;
         if (!target.matches("[data-year-input]")) return;
-        if (e.key === "Enter") {
-          target.blur();
-        }
+        if (e.key === "Enter") target.blur();
       };
-      this.container.addEventListener("click", this.delegatedClickHandler);
-      this.container.addEventListener("input", this.delegatedInputHandler);
-      this.container.addEventListener("blur", this.delegatedBlurHandler, true);
-      this.container.addEventListener("keydown", this.delegatedKeydownHandler);
+      this.addEventListener("click", this.delegatedClickHandler);
+      this.addEventListener("input", this.delegatedInputHandler);
+      this.addEventListener("blur", this.delegatedBlurHandler, true);
+      this.addEventListener("keydown", this.delegatedKeydownHandler);
       this.clickOutsideHandler = (e) => {
         const target = e.target;
-        if (this.container.contains(target)) return;
+        if (this.contains(target)) return;
         if (this.pickerOpen) {
           this.pickerOpen = false;
           this.render();
           return;
         }
-        const popup = this.container.querySelector(".date-popup");
+        const popup = this.querySelector(".date-popup");
         if (popup) {
           this.engine.clearSelection();
         }
       };
       document.addEventListener("click", this.clickOutsideHandler);
     }
-    // Targeted update for picker year - avoids full DOM rebuild
     updatePickerYear(year) {
-      const input = this.container.querySelector(
-        "[data-year-input]"
-      );
-      if (input) {
-        input.value = String(year);
-      }
-      const today = /* @__PURE__ */ new Date();
-      const todayYear = today.getFullYear();
-      const minYear = this.props.minYear ?? todayYear - 30;
-      const maxYear = this.props.maxYear ?? todayYear + 10;
-      const prevBtn = this.container.querySelector(
+      const input = this.querySelector("[data-year-input]");
+      if (input) input.value = String(year);
+      const prevBtn = this.querySelector(
         '[data-action="year-prev"]'
       );
-      const nextBtn = this.container.querySelector(
+      const nextBtn = this.querySelector(
         '[data-action="year-next"]'
       );
-      if (prevBtn) prevBtn.disabled = year <= minYear;
-      if (nextBtn) nextBtn.disabled = year >= maxYear;
+      if (prevBtn) prevBtn.disabled = year <= this.minYear;
+      if (nextBtn) nextBtn.disabled = year >= this.maxYear;
     }
     dispatchMonthChange() {
+      if (!this.engine) return;
       const vm = this.engine.getViewModel();
-      this.container.dispatchEvent(
-        new CustomEvent("monthChange", {
+      this.dispatchEvent(
+        new CustomEvent("cal-month-change", {
+          bubbles: true,
+          composed: true,
           detail: { year: vm.currentYear, month: vm.currentMonth }
         })
       );
     }
+    // Public API
     updateEvents(events) {
-      this.engine.updateEvents(events);
+      this.events = events;
     }
     updateTheme(theme) {
-      this.props.theme = theme;
-      this.applyTheme();
+      this.theme = theme;
     }
     getCurrentDate() {
-      return this.engine.getViewModel().selectedDate;
+      return this.engine?.getViewModel().selectedDate ?? null;
     }
     goToDate(date) {
-      this.actions.jump(date.getFullYear(), date.getMonth());
+      this.actions?.jump(date.getFullYear(), date.getMonth());
     }
     getEngine() {
+      if (!this.engine)
+        throw new Error("CalendarElement is not connected to the DOM");
       return this.engine;
     }
-    destroy() {
-      if (this.unsubscribe) {
-        this.unsubscribe();
-        this.unsubscribe = null;
-      }
-      if (this.delegatedClickHandler) {
-        this.container.removeEventListener("click", this.delegatedClickHandler);
-        this.delegatedClickHandler = null;
-      }
-      if (this.delegatedInputHandler) {
-        this.container.removeEventListener("input", this.delegatedInputHandler);
-        this.delegatedInputHandler = null;
-      }
-      if (this.delegatedBlurHandler) {
-        this.container.removeEventListener(
-          "blur",
-          this.delegatedBlurHandler,
-          true
-        );
-        this.delegatedBlurHandler = null;
-      }
-      if (this.delegatedKeydownHandler) {
-        this.container.removeEventListener(
-          "keydown",
-          this.delegatedKeydownHandler
-        );
-        this.delegatedKeydownHandler = null;
-      }
-      if (this.clickOutsideHandler) {
-        document.removeEventListener("click", this.clickOutsideHandler);
-        this.clickOutsideHandler = null;
-      }
-      this.listenersAttached = false;
-      this.engine.destroy();
-      this.container.innerHTML = "";
-      this.container.classList.remove("kalendly-calendar");
-      if (this.props.className) {
-        this.container.classList.remove(this.props.className);
-      }
-    }
   };
-  function createCalendar(props) {
-    return new VanillaCalendar(props);
+  CalendarElement.observedAttributes = [
+    "initial-date",
+    "min-year",
+    "max-year",
+    "week-starts-on",
+    "title",
+    "use-short-month-names"
+  ];
+  function defineCalendarElement(tagName = "kal-calendar") {
+    if (typeof customElements !== "undefined" && !customElements.get(tagName)) {
+      customElements.define(tagName, CalendarElement);
+    }
   }
-  return __toCommonJS(index_exports);
+  return __toCommonJS(CalendarElement_exports);
 })();
+if (typeof customElements !== 'undefined' && !customElements.get('kal-calendar')) { customElements.define('kal-calendar', Kalendly.CalendarElement); }
 //# sourceMappingURL=index.umd.js.map