@nylas/web-elements 1.0.0-prealpha1

package/dist/components/nylas-open-hours-picker.js

@@ -0,0 +1,365 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debug, k as get24HourTime, l as getUserTimezone } from './utils.js';
+import { t as timeInterval, d as durationMinute, b as durationSecond, c as durationHour } from './duration.js';
+
+const timeMinute = timeInterval((date) => {
+  date.setTime(date - date.getMilliseconds() - date.getSeconds() * durationSecond);
+}, (date, step) => {
+  date.setTime(+date + step * durationMinute);
+}, (start, end) => {
+  return (end - start) / durationMinute;
+}, (date) => {
+  return date.getMinutes();
+});
+
+const timeMinutes = timeMinute.range;
+
+timeInterval((date) => {
+  date.setUTCSeconds(0, 0);
+}, (date, step) => {
+  date.setTime(+date + step * durationMinute);
+}, (start, end) => {
+  return (end - start) / durationMinute;
+}, (date) => {
+  return date.getUTCMinutes();
+});
+
+const timeHour = timeInterval((date) => {
+  date.setTime(date - date.getMilliseconds() - date.getSeconds() * durationSecond - date.getMinutes() * durationMinute);
+}, (date, step) => {
+  date.setTime(+date + step * durationHour);
+}, (start, end) => {
+  return (end - start) / durationHour;
+}, (date) => {
+  return date.getHours();
+});
+
+const timeHours = timeHour.range;
+
+timeInterval((date) => {
+  date.setUTCMinutes(0, 0, 0);
+}, (date, step) => {
+  date.setTime(+date + step * durationHour);
+}, (start, end) => {
+  return (end - start) / durationHour;
+}, (date) => {
+  return date.getUTCHours();
+});
+
+const nylasOpenHoursPickerCss = ":host{display:block;font-size:inherit;font-family:inherit;--nylas-grid-border-color:var(--nylas-base-100);--nylas-available-color:var(--nylas-base-500);--nylas-available-hover-color:var(--nylas-base-100);--nylas-unavailable-color:inherit}.legend{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center;font-size:inherit;font-family:inherit;max-width:fit-content;margin:0 auto;margin-top:1rem}.legend .available{display:grid;grid-template-columns:auto 1fr;gap:0.5rem;align-items:center;font-size:inherit;font-family:inherit}.legend .available .box{width:2rem;height:2rem;background-color:var(--nylas-available-color);border:1px dashed var(--nylas-grid-border-color)}.legend .unavailable{display:grid;grid-template-columns:auto 1fr;gap:0.5rem;align-items:center;font-size:inherit;font-family:inherit}.legend .unavailable .box{width:2rem;height:2rem;background-color:var(--nylas-unavailable-color);border:1px dashed var(--nylas-grid-border-color)}.open-hours{display:grid;gap:1rem;grid-template:\".... days days\" \"hours selected-hours selected-hours\" 1fr/auto 1fr}.open-hours .days{grid-area:days;display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;text-align:center;justify-items:center;font-size:inherit;font-family:inherit}.open-hours .hours{display:grid;grid-auto-flow:row;grid-area:hours;text-align:right;align-items:start;font-size:inherit;font-family:inherit}.open-hours .hours span{top:-0.6rem;display:block;position:relative}.open-hours .selected-hours{display:grid;grid-area:selected-hours;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr}.open-hours .selected-hours .hour{display:grid;border:1px dashed var(--nylas-grid-border-color);height:40px;background-color:var(--nylas-unavailable-color)}.open-hours .selected-hours .hour.selected{background-color:var(--nylas-available-color)}.open-hours .selected-hours .hour.hovered{background-color:var(--nylas-available-hover-color)}.open-hours .selected-hours.inverse .hour{background-color:var(--nylas-available-color)}.open-hours .selected-hours.inverse .hour.selected{background-color:var(--nylas-unavailable-color)}.open-hours .selected-hours.inverse .hour.hovered{background-color:var(--nylas-available-hover-color)}";
+const NylasOpenHoursPickerStyle0 = nylasOpenHoursPickerCss;
+
+const NylasOpenHoursPicker$1 = proxyCustomElement(class NylasOpenHoursPicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.openHoursChanged = createEvent(this, "openHoursChanged", 7);
+        this.dragStartTime = 0;
+        this.onSelectedHoursWeel = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const { deltaY } = event;
+            const step = deltaY > 0 ? -1 : 1;
+            if (this.intervalMinutes === this.stepMinutes && step === -1) {
+                return;
+            }
+            if (this.intervalMinutes === 60 && step === 1) {
+                return;
+            }
+            this.intervalMinutes = this.intervalMinutes + step * this.stepMinutes;
+            const end = new Date(this.startTime);
+            end.setHours(this.endTime.getHours(), 0, 0, 0);
+            if (this.intervalMinutes < 60) {
+                this.times = timeMinutes(this.startTime, end, this.intervalMinutes);
+            }
+            else {
+                this.times = timeHours(this.startTime, end, this.intervalMinutes / 60);
+            }
+        };
+        this.onContextMenu = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.inverse = !this.inverse;
+        };
+        this.onMouseDown = (event, date) => {
+            this.draggingStartDate = date;
+            this.dragStartTime = new Date().getTime();
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        this.onMouseOver = (_event, date) => {
+            if (!this.isDragging()) {
+                return;
+            }
+            this.draggingEndDate = date;
+        };
+        this.onMouseUp = (event, _date) => {
+            const hoveredElements = this.host.querySelectorAll('.hovered');
+            hoveredElements.forEach(element => {
+                element.classList.remove('hovered');
+            });
+            if (this.isDragging() && this.draggingStartDate && this.draggingEndDate) {
+                const availableTimes = [];
+                let start = this.draggingStartDate;
+                let end = this.draggingEndDate;
+                end.setMinutes(end.getMinutes() + this.intervalMinutes);
+                const startDay = start.getDay();
+                const endDay = end.getDay();
+                if (startDay === endDay) {
+                    availableTimes.push({ start, end });
+                }
+                else if (endDay > startDay) {
+                    for (let i = 0; i <= endDay - startDay; i++) {
+                        const newStart = new Date(start);
+                        const newEnd = new Date(start);
+                        newStart.setDate(start.getDate() + i);
+                        newEnd.setDate(start.getDate() + i);
+                        newEnd.setHours(end.getHours());
+                        availableTimes.push({ start: newStart, end: newEnd });
+                    }
+                }
+                for (let availableTime of availableTimes) {
+                    this.updateAvailableTimes(availableTime.start, availableTime.end);
+                }
+            }
+            this.draggingStartDate = null;
+            this.draggingEndDate = null;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        this.onTimeClick = (selectedDate) => {
+            if (this.isDragging()) {
+                debug('dragging for more than threshold, skipping click event');
+                return;
+            }
+            this.draggingStartDate = null;
+            const start = new Date(selectedDate);
+            const end = new Date(selectedDate);
+            end.setMinutes(end.getMinutes() + this.intervalMinutes);
+            this.updateAvailableTimes(start, end);
+        };
+        this.isDragging = () => {
+            const now = new Date().getTime();
+            return this.draggingStartDate && now - this.dragStartTime > this.dragThreshold;
+        };
+        this.updateAvailableTimes = (start, end) => {
+            const { availableTimes } = this;
+            const index = availableTimes.findIndex(aTime => start.getTime() >= aTime.start.getTime() && end.getTime() <= aTime.end.getTime());
+            if (index !== -1) {
+                availableTimes.splice(index, 1);
+                this.availableTimes = [...availableTimes];
+                return;
+            }
+            const prevIndex = availableTimes.findIndex(aTime => start.getTime() === aTime.end.getTime());
+            if (prevIndex !== -1) {
+                availableTimes[prevIndex].end = end;
+                this.availableTimes = [...availableTimes];
+                return;
+            }
+            const nextIndex = availableTimes.findIndex(aTime => end.getTime() === aTime.start.getTime());
+            if (nextIndex !== -1) {
+                availableTimes[nextIndex].start = start;
+                this.availableTimes = [...availableTimes];
+                return;
+            }
+            this.availableTimes = [...availableTimes, { start, end }];
+        };
+        this.isAvailableTime = (date) => {
+            return this.availableTimes.some(aTime => {
+                return aTime.start.getTime() <= date.getTime() && aTime.end.getTime() > date.getTime();
+            });
+        };
+        this.getSelectedDate = (index) => {
+            const selectedDate = new Date(this.startTime);
+            selectedDate.setDate((index % 7) + 1);
+            const i = Math.floor(index / 7);
+            selectedDate.setHours(this.times[i].getHours());
+            selectedDate.setMinutes(this.times[i].getMinutes());
+            return selectedDate;
+        };
+        this.isHovering = (hoveredDate) => {
+            if (!this.draggingStartDate || !this.draggingEndDate) {
+                return false;
+            }
+            return (hoveredDate.getDay() >= this.draggingStartDate.getDay() &&
+                hoveredDate.getHours() >= this.draggingStartDate.getHours() &&
+                hoveredDate.getHours() <= this.draggingEndDate.getHours() &&
+                hoveredDate.getDay() <= this.draggingEndDate.getDay());
+        };
+        this.calculateAvailableTimes = (openHours) => {
+            const availableTimes = [];
+            for (const openHour of openHours) {
+                for (const day of openHour.days) {
+                    if (openHour.start === openHour.end) {
+                        continue;
+                    }
+                    const [startHours, startMinutes] = openHour.start.split(':').map(s => parseInt(s, 10));
+                    const [endHours, endMinutes] = openHour.end.split(':').map(s => parseInt(s, 10));
+                    const start = new Date(this.startTime);
+                    start.setDate(start.getDate() + day);
+                    start.setHours(startHours);
+                    start.setMinutes(startMinutes);
+                    const end = new Date(this.startTime);
+                    end.setDate(end.getDate() + day);
+                    end.setHours(endHours);
+                    end.setMinutes(endMinutes);
+                    availableTimes.push({ start, end });
+                }
+            }
+            availableTimes.sort((a, b) => a.start.getTime() - b.start.getTime());
+            debug('availableTimes', availableTimes);
+            return availableTimes;
+        };
+        this.calculateOpenHours = () => {
+            const hours = {};
+            const openHours = [];
+            let availableTimes = [...this.availableTimes];
+            availableTimes.sort((a, b) => a.start.getTime() - b.start.getTime());
+            if (this.inverse) {
+                const copyOfAvailableTimes = [...availableTimes];
+                availableTimes = [];
+                let start = this.startTime;
+                for (const availableTime of copyOfAvailableTimes) {
+                    const end = availableTime.start;
+                    availableTimes.push({ start, end });
+                    start = availableTime.end;
+                }
+                availableTimes.push({ start, end: this.endTime });
+            }
+            availableTimes.sort((a, b) => a.start.getTime() - b.start.getTime());
+            for (const availableTime of availableTimes) {
+                const startDay = availableTime.start.getDay();
+                const endDay = availableTime.end.getDay();
+                const nextDay = new Date(availableTime.start);
+                nextDay.setDate(nextDay.getDate() + 1);
+                nextDay.setHours(0, 0, 0, 0);
+                if (startDay > endDay || endDay > startDay) {
+                    availableTimes.push({ start: nextDay, end: availableTime.end });
+                    availableTime.end = new Date(availableTime.start);
+                    availableTime.end.setHours(23, 0, 0, 0);
+                }
+                const startHours = get24HourTime(availableTime.start);
+                const endHours = get24HourTime(availableTime.end);
+                const pair = `${startHours}-${endHours}`;
+                if (!hours[pair]) {
+                    hours[pair] = [startDay];
+                }
+                else {
+                    hours[pair].push(startDay);
+                }
+            }
+            for (const key in hours) {
+                const [startHours, endHours] = key.split('-');
+                const days = hours[key];
+                const openHour = {
+                    days,
+                    start: startHours,
+                    end: endHours,
+                    timezone: getUserTimezone(),
+                };
+                openHours.push(openHour);
+            }
+            this.openHoursChanged.emit(openHours);
+        };
+        this.getNumberOfDatesBetween = (start, end) => {
+            const diff = Math.abs(end.getTime() - start.getTime());
+            return Math.ceil(diff / (1000 * 60 * 60 * 24));
+        };
+        this.openHours = [];
+        this.startTime = new Date(2024, 8, 1, 8, 0, 0, 0);
+        this.endTime = new Date(2024, 8, 7, 18, 0, 0, 0);
+        this.stepMinutes = 15;
+        this.dragThreshold = 150;
+        this.mobileViewPortWidth = 768;
+        this.intervalMinutes = 60;
+        this.times = [];
+        this.availableTimes = [];
+        this.draggingStartDate = null;
+        this.draggingEndDate = null;
+        this.inverse = false;
+        this.isMobile = false;
+    }
+    componentWillLoad() {
+        this.onResize();
+        const end = new Date(this.startTime);
+        end.setHours(this.endTime.getHours(), 0, 0, 0);
+        this.times = timeHours(this.startTime, end, this.intervalMinutes / 60);
+        this.availableTimes = this.calculateAvailableTimes(this.openHours);
+    }
+    whenOpenHoursChanged(newValue, oldValue) {
+        if (JSON.stringify(newValue) === JSON.stringify(oldValue)) {
+            return;
+        }
+        this.availableTimes = this.calculateAvailableTimes(newValue);
+    }
+    availableTimesChanged() {
+        this.calculateOpenHours();
+    }
+    inverseChanged() {
+        this.calculateOpenHours();
+    }
+    onResize() {
+        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        this.isMobile = vw <= this.mobileViewPortWidth;
+    }
+    render() {
+        return (h(Host, { key: '7d7260510342c7d666f9596eddee704088451dbb' }, h("div", { key: '8ebc305e29157af40c432ec8ff0e182c206cfda0', class: "open-hours", part: "open-hours" }, h("div", { key: 'df2e84e8387773ff864c56b78d5fbb3f8f7db606', class: "days", part: "days" }, Array.from({ length: this.getNumberOfDatesBetween(this.startTime, this.endTime) }).map((_, index) => {
+            const date = new Date(this.startTime);
+            date.setDate(date.getDate() + index);
+            return h("span", null, date.toLocaleDateString(undefined, { weekday: this.isMobile ? 'short' : 'long' }));
+        })), h("div", { key: '88dff2631e52fed25458d0545dfaba0e0586b8ec', class: "hours", part: "hours" }, this.times.map(date => (h("span", null, date.toLocaleTimeString(undefined, { timeStyle: 'short' }))))), h("div", { key: '53f658bf52ea9367376fb297ce50d8849bf99841', class: {
+                'selected-hours': true,
+                'inverse': this.inverse,
+            }, part: "selected-hours", onWheel: this.onSelectedHoursWeel, onContextMenu: this.onContextMenu }, Array.from({ length: this.getNumberOfDatesBetween(this.startTime, this.endTime) * this.times.length }).map((_, index) => (h("div", { part: "hour", class: {
+                hour: true,
+                selected: this.isAvailableTime(this.getSelectedDate(index)),
+                hovered: this.isHovering(this.getSelectedDate(index)),
+            }, onMouseDown: event => this.onMouseDown(event, this.getSelectedDate(index)), onMouseUp: event => this.onMouseUp(event, this.getSelectedDate(index)), onMouseOver: event => this.onMouseOver(event, this.getSelectedDate(index)), onClick: () => this.onTimeClick(this.getSelectedDate(index)) }, "\u00A0"))))), h("div", { key: '2f0459102a39a37ee38ff550b7fe7d303bfa9fef', class: "legend", part: "legend" }, h("div", { key: 'b2ce6eb4496270ae2577164f2fecb9145e7120d5', class: "available", part: "available" }, h("span", { key: '0fe60c643e3d9cee77509109bbb99059f1900716', class: "box", part: "box" }), h("span", { key: '3f03d82fe8b20dab316910ced828682880057a4d', class: "label", part: "label" }, "Available")), h("div", { key: '188ea3df5640bcd2fe197bf00e2dfd4ede0189cf', class: "unavailable", part: "unavailable" }, h("span", { key: '9b313c8a36f2752a8327612efd665ea275175fb5', class: "box", part: "box" }), h("span", { key: '772d25822bd93b80d434f8bb501b4487b5d6a04a', class: "label", part: "label" }, "Unavailable")))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "openHours": ["whenOpenHoursChanged"],
+        "availableTimes": ["availableTimesChanged"],
+        "inverse": ["inverseChanged"]
+    }; }
+    static get style() { return NylasOpenHoursPickerStyle0; }
+}, [1, "nylas-open-hours-picker", {
+        "openHours": [16],
+        "startTime": [1040],
+        "endTime": [1040],
+        "stepMinutes": [2, "step-minutes"],
+        "dragThreshold": [2, "drag-threshold"],
+        "mobileViewPortWidth": [2, "mobile-view-port-width"],
+        "intervalMinutes": [32],
+        "times": [32],
+        "availableTimes": [32],
+        "draggingStartDate": [32],
+        "draggingEndDate": [32],
+        "inverse": [32],
+        "isMobile": [32]
+    }, [[9, "resize", "onResize"]], {
+        "openHours": ["whenOpenHoursChanged"],
+        "availableTimes": ["availableTimesChanged"],
+        "inverse": ["inverseChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-open-hours-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-open-hours-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasOpenHoursPicker$1);
+            }
+            break;
+    } });
+}
+
+const NylasOpenHoursPicker = NylasOpenHoursPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasOpenHoursPicker, defineCustomElement };
+
+//# sourceMappingURL=nylas-open-hours-picker.js.map

package/dist/components/nylas-open-hours-picker.js.map

@@ -0,0 +1 @@
+{"file":"nylas-open-hours-picker.js","mappings":"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","names":["NylasOpenHoursPicker"],"sources":["../../node_modules/.pnpm/d3-time@3.1.0/node_modules/d3-time/src/minute.js","../../node_modules/.pnpm/d3-time@3.1.0/node_modules/d3-time/src/hour.js","src/components/scheduler/nylas-open-hours-picker/nylas-open-hours-picker.scss?tag=nylas-open-hours-picker&encapsulation=shadow","src/components/scheduler/nylas-open-hours-picker/nylas-open-hours-picker.tsx"],"sourcesContent":["import {timeInterval} from \"./interval.js\";\nimport {durationMinute, durationSecond} from \"./duration.js\";\n\nexport const timeMinute = timeInterval((date) => {\n  date.setTime(date - date.getMilliseconds() - date.getSeconds() * durationSecond);\n}, (date, step) => {\n  date.setTime(+date + step * durationMinute);\n}, (start, end) => {\n  return (end - start) / durationMinute;\n}, (date) => {\n  return date.getMinutes();\n});\n\nexport const timeMinutes = timeMinute.range;\n\nexport const utcMinute = timeInterval((date) => {\n  date.setUTCSeconds(0, 0);\n}, (date, step) => {\n  date.setTime(+date + step * durationMinute);\n}, (start, end) => {\n  return (end - start) / durationMinute;\n}, (date) => {\n  return date.getUTCMinutes();\n});\n\nexport const utcMinutes = utcMinute.range;\n","import {timeInterval} from \"./interval.js\";\nimport {durationHour, durationMinute, durationSecond} from \"./duration.js\";\n\nexport const timeHour = timeInterval((date) => {\n  date.setTime(date - date.getMilliseconds() - date.getSeconds() * durationSecond - date.getMinutes() * durationMinute);\n}, (date, step) => {\n  date.setTime(+date + step * durationHour);\n}, (start, end) => {\n  return (end - start) / durationHour;\n}, (date) => {\n  return date.getHours();\n});\n\nexport const timeHours = timeHour.range;\n\nexport const utcHour = timeInterval((date) => {\n  date.setUTCMinutes(0, 0, 0);\n}, (date, step) => {\n  date.setTime(+date + step * durationHour);\n}, (start, end) => {\n  return (end - start) / durationHour;\n}, (date) => {\n  return date.getUTCHours();\n});\n\nexport const utcHours = utcHour.range;\n",":host {\n  display: block;\n  font-size: inherit;\n  font-family: inherit;\n  --nylas-grid-border-color: var(--nylas-base-100);\n  --nylas-available-color: var(--nylas-base-500);\n  --nylas-available-hover-color: var(--nylas-base-100);\n  --nylas-unavailable-color: inherit;\n}\n\n.legend {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n  align-items: center;\n  font-size: inherit;\n  font-family: inherit;\n\n  max-width: fit-content;\n  margin: 0 auto;\n  margin-top: 1rem;\n\n  .available {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    gap: 0.5rem;\n    align-items: center;\n    font-size: inherit;\n    font-family: inherit;\n\n    .box {\n      width: 2rem;\n      height: 2rem;\n      background-color: var(--nylas-available-color);\n      border: 1px dashed var(--nylas-grid-border-color);\n    }\n  }\n\n  .unavailable {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    gap: 0.5rem;\n    align-items: center;\n    font-size: inherit;\n    font-family: inherit;\n\n    .box {\n      width: 2rem;\n      height: 2rem;\n      background-color: var(--nylas-unavailable-color);\n      border: 1px dashed var(--nylas-grid-border-color);\n    }\n  }\n}\n\n.open-hours {\n  display: grid;\n  gap: 1rem;\n  grid-template:\n    '.... days days'\n    'hours selected-hours selected-hours' 1fr / auto 1fr;\n\n  .days {\n    grid-area: days;\n    display: grid;\n    grid-auto-flow: column;\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n    text-align: center;\n    justify-items: center;\n    font-size: inherit;\n    font-family: inherit;\n  }\n\n  .hours {\n    display: grid;\n    grid-auto-flow: row;\n    grid-area: hours;\n    text-align: right;\n    align-items: start;\n    font-size: inherit;\n    font-family: inherit;\n\n    span {\n      top: -0.6rem;\n      display: block;\n      position: relative;\n    }\n  }\n\n  .selected-hours {\n    display: grid;\n    grid-area: selected-hours;\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\n    .hour {\n      display: grid;\n      border: 1px dashed var(--nylas-grid-border-color);\n\n      height: 40px;\n\n      background-color: var(--nylas-unavailable-color);\n\n      &.selected {\n        background-color: var(--nylas-available-color);\n      }\n\n      &.hovered {\n        background-color: var(--nylas-available-hover-color);\n      }\n    }\n\n    &.inverse {\n      .hour {\n        background-color: var(--nylas-available-color);\n\n        &.selected {\n          background-color: var(--nylas-unavailable-color);\n        }\n\n        &.hovered {\n          background-color: var(--nylas-available-hover-color);\n        }\n      }\n    }\n  }\n}\n","import { debug, get24HourTime, getUserTimezone } from '@/utils/utils';\nimport { OpenHour } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { timeHours, timeMinutes } from 'd3-time';\n\n@Component({\n  tag: 'nylas-open-hours-picker',\n  styleUrl: 'nylas-open-hours-picker.scss',\n  shadow: true,\n})\nexport class NylasOpenHoursPicker {\n  @Element() public host!: HTMLElement;\n\n  /**\n   * A pre-populated open hour configuration.\n   */\n  @Prop() public readonly openHours: OpenHour[] = [];\n\n  /**\n   * The start time of the day.\n   * Leave this to the default date of 2024-09-01T00:00:00.000Z\n   * unless you want want available times to be a specific year, month, and day.\n   */\n  @Prop({ mutable: true }) public startTime = new Date(2024, 8, 1, 8, 0, 0, 0);\n\n  /**\n   * The end time of the day.\n   * Leave this to the default date of 2024-09-07T23:59:59.999Z\n   * unless you want want available times to be a specific year, month, and day.\n   */\n  @Prop({ mutable: true }) public endTime: Date = new Date(2024, 8, 7, 18, 0, 0, 0);\n\n  /**\n   * The number of minutes between each time.\n   * If this is 15, we'll show 15 minute intervals.\n   * If this is 60, we'll show 1 hour intervals.\n   */\n  @Prop() public stepMinutes: number = 15;\n\n  /**\n   * The number of milliseconds the user must be dragging for before we consider it a drag event.\n   */\n  @Prop() public dragThreshold: number = 150;\n\n  /**\n   * The width of the viewport in mobile.\n   */\n  @Prop() public readonly mobileViewPortWidth: number = 768;\n\n  @State() private intervalMinutes: number = 60;\n  @State() private times: Date[] = [];\n  @State() private availableTimes: { start: Date; end: Date }[] = [];\n  @State() private draggingStartDate: Date | null = null;\n  @State() private draggingEndDate: Date | null = null;\n  @State() private inverse: boolean = false;\n  @State() private isMobile: boolean = false;\n\n  /**\n   * Emitted when open hours is changed.\n   */\n  @Event() readonly openHoursChanged!: EventEmitter<OpenHour[]>;\n\n  private dragStartTime: number = 0;\n\n  componentWillLoad() {\n    this.onResize();\n    const end = new Date(this.startTime);\n    end.setHours(this.endTime.getHours(), 0, 0, 0);\n\n    this.times = timeHours(this.startTime, end, this.intervalMinutes / 60);\n    this.availableTimes = this.calculateAvailableTimes(this.openHours);\n  }\n\n  @Watch('openHours')\n  whenOpenHoursChanged(newValue: OpenHour[], oldValue: OpenHour[]) {\n    // Deep compare newValue with this.openHours\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) {\n      return;\n    }\n\n    this.availableTimes = this.calculateAvailableTimes(newValue);\n  }\n\n  @Watch('availableTimes')\n  availableTimesChanged() {\n    this.calculateOpenHours();\n  }\n\n  @Watch('inverse')\n  inverseChanged() {\n    this.calculateOpenHours();\n  }\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);\n    this.isMobile = vw <= this.mobileViewPortWidth;\n  }\n\n  private onSelectedHoursWeel = (event: WheelEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { deltaY } = event;\n    const step = deltaY > 0 ? -1 : 1;\n\n    // Do nothing if this.intervalMinutes is 15 and we're scrolling up\n    if (this.intervalMinutes === this.stepMinutes && step === -1) {\n      return;\n    }\n\n    // Do nothing if this.intervalMinutes is 60 and we're scrolling dwon\n    if (this.intervalMinutes === 60 && step === 1) {\n      return;\n    }\n\n    // If scrolling up, increase the interval betwen times by this.stepMinutes minutes\n    // If scrolling down, decrease the interval between times by this.stepMinutes minutes\n    this.intervalMinutes = this.intervalMinutes + step * this.stepMinutes;\n\n    // If the interval is less than 1 hour, we'll use timeMinutes instead of timeHours\n    // This will allow us to show 15 minute intervals\n\n    const end = new Date(this.startTime);\n    end.setHours(this.endTime.getHours(), 0, 0, 0);\n\n    if (this.intervalMinutes < 60) {\n      this.times = timeMinutes(this.startTime, end, this.intervalMinutes);\n    } else {\n      this.times = timeHours(this.startTime, end, this.intervalMinutes / 60);\n    }\n  };\n\n  private onContextMenu = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.inverse = !this.inverse;\n  };\n\n  private onMouseDown = (event: MouseEvent, date: Date) => {\n    this.draggingStartDate = date;\n    this.dragStartTime = new Date().getTime();\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  private onMouseOver = (_event: MouseEvent, date: Date) => {\n    // Only if draggingAt is within 500ms of the mouseup event\n    if (!this.isDragging()) {\n      return;\n    }\n\n    this.draggingEndDate = date;\n  };\n\n  private onMouseUp = (event: MouseEvent, _date: Date) => {\n    // Remove all hovered classes\n    const hoveredElements = this.host.querySelectorAll('.hovered');\n    hoveredElements.forEach(element => {\n      element.classList.remove('hovered');\n    });\n    // Only if draggingAt is within 500ms of the mouseup event\n    if (this.isDragging() && this.draggingStartDate && this.draggingEndDate) {\n      const availableTimes: { start: Date; end: Date }[] = [];\n      let start = this.draggingStartDate;\n      let end = this.draggingEndDate;\n      end.setMinutes(end.getMinutes() + this.intervalMinutes);\n\n      // Get the day of the week\n      const startDay = start.getDay();\n      const endDay = end.getDay();\n\n      if (startDay === endDay) {\n        availableTimes.push({ start, end });\n      } else if (endDay > startDay) {\n        for (let i = 0; i <= endDay - startDay; i++) {\n          const newStart = new Date(start);\n          const newEnd = new Date(start);\n          newStart.setDate(start.getDate() + i);\n          newEnd.setDate(start.getDate() + i);\n          newEnd.setHours(end.getHours());\n          availableTimes.push({ start: newStart, end: newEnd });\n        }\n      }\n\n      for (let availableTime of availableTimes) {\n        this.updateAvailableTimes(availableTime.start, availableTime.end);\n      }\n    }\n    this.draggingStartDate = null;\n    this.draggingEndDate = null;\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  /**\n   * When a time is clicked, we'll add it to the list of available times.\n   * If the time is already in the list of available times, we'll remove it.\n   *\n   * If the time is near start of a previous available time, we'll extend the previous available time.\n   * If the time is near the end of a previous available time, we'll extend the previous available time.\n   */\n  private onTimeClick = (selectedDate: Date) => {\n    // If user has been dragging for more than threshold, skip click event\n    if (this.isDragging()) {\n      debug('dragging for more than threshold, skipping click event');\n      return;\n    }\n    this.draggingStartDate = null;\n\n    const start = new Date(selectedDate);\n    const end = new Date(selectedDate);\n    end.setMinutes(end.getMinutes() + this.intervalMinutes);\n\n    this.updateAvailableTimes(start, end);\n  };\n\n  private isDragging = () => {\n    const now = new Date().getTime();\n    return this.draggingStartDate && now - this.dragStartTime > this.dragThreshold;\n  };\n\n  private updateAvailableTimes = (start: Date, end: Date) => {\n    const { availableTimes } = this;\n\n    // If the selected date is already in the list of available times, remove it\n    const index = availableTimes.findIndex(aTime => start.getTime() >= aTime.start.getTime() && end.getTime() <= aTime.end.getTime());\n    if (index !== -1) {\n      availableTimes.splice(index, 1);\n      this.availableTimes = [...availableTimes];\n      return;\n    }\n\n    // If the selected date starts at the end of a previous available time, extend the previous available time\n    const prevIndex = availableTimes.findIndex(aTime => start.getTime() === aTime.end.getTime());\n    if (prevIndex !== -1) {\n      availableTimes[prevIndex].end = end;\n      this.availableTimes = [...availableTimes];\n      return;\n    }\n\n    // If the selected date is near the end of a previous available time, extend the previous available time\n    const nextIndex = availableTimes.findIndex(aTime => end.getTime() === aTime.start.getTime());\n    if (nextIndex !== -1) {\n      availableTimes[nextIndex].start = start;\n      this.availableTimes = [...availableTimes];\n      return;\n    }\n\n    // Otherwise, add the selected date to the list of available times\n    this.availableTimes = [...availableTimes, { start, end }];\n  };\n\n  private isAvailableTime = (date: Date) => {\n    return this.availableTimes.some(aTime => {\n      return aTime.start.getTime() <= date.getTime() && aTime.end.getTime() > date.getTime();\n    });\n  };\n\n  private getSelectedDate = (index: number) => {\n    // Create a new date object with the date and time\n    const selectedDate = new Date(this.startTime);\n    selectedDate.setDate((index % 7) + 1);\n    const i = Math.floor(index / 7);\n    selectedDate.setHours(this.times[i].getHours());\n    selectedDate.setMinutes(this.times[i].getMinutes());\n    return selectedDate;\n  };\n\n  private isHovering = (hoveredDate: Date): boolean => {\n    if (!this.draggingStartDate || !this.draggingEndDate) {\n      return false;\n    }\n\n    return (\n      hoveredDate.getDay() >= this.draggingStartDate.getDay() &&\n      hoveredDate.getHours() >= this.draggingStartDate.getHours() &&\n      hoveredDate.getHours() <= this.draggingEndDate.getHours() &&\n      hoveredDate.getDay() <= this.draggingEndDate.getDay()\n    );\n  };\n\n  private calculateAvailableTimes = (openHours: OpenHour[]) => {\n    const availableTimes: { start: Date; end: Date }[] = [];\n\n    // Loop through each OpenHour object\n    for (const openHour of openHours) {\n      // Loop through each day in the OpenHour object\n      for (const day of openHour.days) {\n        // Skip if invalid\n        if (openHour.start === openHour.end) {\n          continue;\n        }\n\n        // Get the start and end hours\n        const [startHours, startMinutes] = openHour.start.split(':').map(s => parseInt(s, 10));\n        const [endHours, endMinutes] = openHour.end.split(':').map(s => parseInt(s, 10));\n\n        // Create a new start date\n        const start = new Date(this.startTime);\n        start.setDate(start.getDate() + day);\n        start.setHours(startHours);\n        start.setMinutes(startMinutes);\n\n        // Create a new end date\n        const end = new Date(this.startTime);\n        end.setDate(end.getDate() + day);\n        end.setHours(endHours);\n        end.setMinutes(endMinutes);\n\n        // Add the start and end date to the availableTimes array\n        availableTimes.push({ start, end });\n      }\n    }\n\n    // Sort the availableTimes array\n    availableTimes.sort((a, b) => a.start.getTime() - b.start.getTime());\n\n    debug('availableTimes', availableTimes);\n\n    // Emit the openHoursChanged event\n    return availableTimes;\n  };\n\n  private calculateOpenHours = () => {\n    const hours: { [key: string]: number[] } = {};\n    const openHours: OpenHour[] = [];\n\n    let availableTimes = [...this.availableTimes];\n    availableTimes.sort((a, b) => a.start.getTime() - b.start.getTime());\n\n    if (this.inverse) {\n      const copyOfAvailableTimes = [...availableTimes];\n      availableTimes = [];\n      let start = this.startTime;\n      for (const availableTime of copyOfAvailableTimes) {\n        const end = availableTime.start;\n        availableTimes.push({ start, end });\n        start = availableTime.end;\n      }\n      availableTimes.push({ start, end: this.endTime });\n    }\n    availableTimes.sort((a, b) => a.start.getTime() - b.start.getTime());\n\n    for (const availableTime of availableTimes) {\n      const startDay = availableTime.start.getDay();\n      const endDay = availableTime.end.getDay();\n\n      const nextDay = new Date(availableTime.start);\n      nextDay.setDate(nextDay.getDate() + 1);\n      nextDay.setHours(0, 0, 0, 0);\n\n      if (startDay > endDay || endDay > startDay) {\n        availableTimes.push({ start: nextDay, end: availableTime.end });\n        availableTime.end = new Date(availableTime.start);\n        availableTime.end.setHours(23, 0, 0, 0);\n      }\n\n      const startHours = get24HourTime(availableTime.start);\n      const endHours = get24HourTime(availableTime.end);\n      const pair = `${startHours}-${endHours}`;\n\n      if (!hours[pair]) {\n        hours[pair] = [startDay];\n      } else {\n        hours[pair].push(startDay);\n      }\n    }\n\n    for (const key in hours) {\n      const [startHours, endHours] = key.split('-');\n      const days = hours[key];\n      const openHour: OpenHour = {\n        days,\n        start: startHours,\n        end: endHours,\n        timezone: getUserTimezone(),\n      };\n      openHours.push(openHour);\n    }\n\n    this.openHoursChanged.emit(openHours);\n  };\n\n  private getNumberOfDatesBetween = (start: Date, end: Date) => {\n    const diff = Math.abs(end.getTime() - start.getTime());\n    return Math.ceil(diff / (1000 * 60 * 60 * 24));\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"open-hours\" part=\"open-hours\">\n          <div class=\"days\" part=\"days\">\n            {\n              // Get the days of the week from the start time\n              // and loop through each day\n              Array.from({ length: this.getNumberOfDatesBetween(this.startTime, this.endTime) }).map((_, index) => {\n                const date = new Date(this.startTime);\n                date.setDate(date.getDate() + index);\n                return <span>{date.toLocaleDateString(undefined, { weekday: this.isMobile ? 'short' : 'long' })}</span>;\n              })\n            }\n          </div>\n          <div class=\"hours\" part=\"hours\">\n            {this.times.map(date => (\n              <span>{date.toLocaleTimeString(undefined, { timeStyle: 'short' })}</span>\n            ))}\n          </div>\n          <div\n            class={{\n              'selected-hours': true,\n              'inverse': this.inverse,\n            }}\n            part=\"selected-hours\"\n            onWheel={this.onSelectedHoursWeel}\n            onContextMenu={this.onContextMenu}\n          >\n            {\n              // Grid of 7 * this.hours.length\n              Array.from({ length: this.getNumberOfDatesBetween(this.startTime, this.endTime) * this.times.length }).map((_, index) => (\n                <div\n                  part=\"hour\"\n                  class={{\n                    hour: true,\n                    selected: this.isAvailableTime(this.getSelectedDate(index)),\n                    hovered: this.isHovering(this.getSelectedDate(index)),\n                  }}\n                  onMouseDown={event => this.onMouseDown(event, this.getSelectedDate(index))}\n                  onMouseUp={event => this.onMouseUp(event, this.getSelectedDate(index))}\n                  onMouseOver={event => this.onMouseOver(event, this.getSelectedDate(index))}\n                  onClick={() => this.onTimeClick(this.getSelectedDate(index))}\n                >\n                  &nbsp;\n                </div>\n              ))\n            }\n          </div>\n        </div>\n        <div class=\"legend\" part=\"legend\">\n          <div class=\"available\" part=\"available\">\n            <span class=\"box\" part=\"box\"></span>\n            <span class=\"label\" part=\"label\">\n              Available\n            </span>\n          </div>\n          <div class=\"unavailable\" part=\"unavailable\">\n            <span class=\"box\" part=\"box\"></span>\n            <span class=\"label\" part=\"label\">\n              Unavailable\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-provider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasProvider extends Components.NylasProvider, HTMLElement {}
+export const NylasProvider: {
+    prototype: NylasProvider;
+    new (): NylasProvider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nylas-provider.js

@@ -0,0 +1,206 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { N as NylasBaseProvider, e as es } from './index.es.js';
+import { d as debug } from './utils.js';
+import { N as NylasAuthConnector, a as NylasThreadsConnector, b as NylasMessagesConnector, c as NylasFoldersConnector, C as CreateNylasAuthStore, d as CreateNylasMailboxStore, H as HashRouter } from './mailbox-store.js';
+import { N as NylaSchedulerAPIConnector, C as CreateNylasSchedulerStore } from './scheduler-store.js';
+
+class NylasConnector {
+    constructor(router, nylasAuth, nylasAuthStore, nylasMailboxStore, nylasSchedulerStore, schedulerAPIURL = 'https://scheduler.nylas.com') {
+        this.router = router;
+        this.schedulerAPIURL = schedulerAPIURL;
+        this.nylasAuth = nylasAuth;
+        this.nylasAuthStore = nylasAuthStore;
+        this.nylasMailboxStore = nylasMailboxStore;
+        this.nylasSchedulerStore = nylasSchedulerStore;
+    }
+    init() {
+        debug('NylasConnector init');
+    }
+    get authStore() {
+        return this.nylasAuthStore;
+    }
+    get mailboxStore() {
+        return this.nylasMailboxStore;
+    }
+    get schedulerStore() {
+        return this.nylasSchedulerStore;
+    }
+    get auth() {
+        if (this._authConnector) {
+            return this._authConnector;
+        }
+        this._authConnector = new NylasAuthConnector(this.nylasAuth, this.nylasAuthStore);
+        return this._authConnector;
+    }
+    get threads() {
+        if (this._threadConnector) {
+            return this._threadConnector;
+        }
+        this._threadConnector = new NylasThreadsConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore, this.router);
+        return this._threadConnector;
+    }
+    get messages() {
+        if (this._messageConnector) {
+            return this._messageConnector;
+        }
+        this._messageConnector = new NylasMessagesConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);
+        return this._messageConnector;
+    }
+    get folders() {
+        if (this._foldersConnector) {
+            return this._foldersConnector;
+        }
+        this._foldersConnector = new NylasFoldersConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);
+        return this._foldersConnector;
+    }
+    get scheduler() {
+        if (this._schedulerAPIConnector) {
+            return this._schedulerAPIConnector;
+        }
+        this._schedulerAPIConnector = new NylaSchedulerAPIConnector({
+            schedulerAPIURL: this.schedulerAPIURL,
+            schedulerStore: this.schedulerStore,
+        });
+        return this._schedulerAPIConnector;
+    }
+    getAuth() {
+        return this.nylasAuth;
+    }
+    resetStores() {
+        this.nylasAuthStore.reset();
+        this.nylasMailboxStore.reset();
+    }
+    async logout() {
+        await this.nylasAuth.logout();
+        this.resetStores();
+    }
+}
+
+const nylasProviderCss = ":host{display:contents}";
+const NylasProviderStyle0 = nylasProviderCss;
+
+const NylasProvider$1 = proxyCustomElement(class NylasProvider extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.init = createEvent(this, "init", 7);
+        this.loggedIn = createEvent(this, "loggedIn", 7);
+        this.loggedOut = createEvent(this, "loggedOut", 7);
+        this.handleAuthChange = async (isAuthenticated) => {
+            if (isAuthenticated) {
+                this.loggedIn.emit(this.host);
+            }
+            else {
+                this.loggedOut.emit(this.host);
+            }
+        };
+        this.authConfig = undefined;
+        this.eventOverrides = {};
+        this.automaticComponentRegistration = true;
+    }
+    connectedCallback() {
+        debug('[nylas-provider] connectedCallback');
+    }
+    async componentWillLoad() {
+        debug('[nylas-provider] componentWillLoad');
+        this.stores = {
+            auth: CreateNylasAuthStore(),
+            mailbox: CreateNylasMailboxStore(),
+            scheduler: CreateNylasSchedulerStore(),
+        };
+        this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);
+        const router = new HashRouter();
+        this.nylasAuth = es({
+            apiUri: 'https://api.us.nylas.com',
+            elementsApiUri: 'https://elements.us.nylas.com',
+            storageType: 'indexeddb',
+            clientId: 'YOUR_CLIENT_ID',
+            defaultScopes: [],
+            redirectURI: '/',
+            ...this.authConfig,
+        });
+        const nylasMailboxStore = this.baseProvider?.getStore('mailbox');
+        if (!nylasMailboxStore) {
+            throw new Error('The mailbox store is not set');
+        }
+        const nylasAuthStore = this.baseProvider?.getStore('auth');
+        if (!nylasAuthStore) {
+            throw new Error('The auth store is not set');
+        }
+        const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
+        if (!nylasSchedulerStore) {
+            throw new Error('The scheduler store is not set');
+        }
+        this.nylasConnector = new NylasConnector(router, this.nylasAuth, nylasAuthStore, nylasMailboxStore, nylasSchedulerStore);
+        const initEvent = this.init.emit(this.host);
+        if (!initEvent.defaultPrevented) {
+            await this.nylasConnector?.auth.validateSession();
+        }
+        this.handleAuthChange(nylasAuthStore.state.isAuthenticated);
+        this.baseProvider?.componentWillLoad(this.nylasConnector);
+    }
+    componentDidLoad() {
+        const nylasAuthStore = this.baseProvider?.getStore('auth');
+        nylasAuthStore?.onChange('isAuthenticated', this.handleAuthChange);
+        this.baseProvider?.componentDidLoad();
+    }
+    componentDisconnected() {
+        this.baseProvider?.componentDisconnected();
+    }
+    async registerComponentHandler(event) {
+        this.baseProvider?.registerComponent(event.detail);
+    }
+    async unregisterComponentHandler(event) {
+        this.baseProvider?.unregisterComponent(event.detail);
+    }
+    async getNylasAuth() {
+        return this.nylasAuth;
+    }
+    async getNylasConnector() {
+        return this.nylasConnector;
+    }
+    async getMailboxStore() {
+        return this.baseProvider?.getStore('mailbox');
+    }
+    async getAuthStore() {
+        return this.baseProvider?.getStore('auth');
+    }
+    async getNylasSchedulerStore() {
+        return this.baseProvider?.getStore('scheduler');
+    }
+    render() {
+        return (h(Host, { key: 'ff2cfa488faf8587aae9b577b59f536921dc125a' }, h("slot", { key: 'a5faaff431a3140912330969ea744fbc1519c121' })));
+    }
+    get host() { return this; }
+    static get style() { return NylasProviderStyle0; }
+}, [1, "nylas-provider", {
+        "authConfig": [16],
+        "eventOverrides": [16],
+        "automaticComponentRegistration": [4, "automatic-component-registration"],
+        "getNylasAuth": [64],
+        "getNylasConnector": [64],
+        "getMailboxStore": [64],
+        "getAuthStore": [64],
+        "getNylasSchedulerStore": [64]
+    }, [[0, "registerComponent", "registerComponentHandler"], [0, "unregisterComponent", "unregisterComponentHandler"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-provider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-provider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasProvider$1);
+            }
+            break;
+    } });
+}
+
+const NylasProvider = NylasProvider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasProvider, defineCustomElement };
+
+//# sourceMappingURL=nylas-provider.js.map