@nylas/web-elements 1.4.2 → 1.4.4

package/dist/esm/nylas-booked-event-card_12.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-091600eb.js';
-import { R as RegisterComponent } from './register-component-238f28de.js';
-import { a as debug, i as instance, j as capitalizeFirstLetter, l as formatBookedEventDate, s as sanitizeHtml, n as sanitize, b as addDaysToCurrentDate, o as isSameMonth, q as getLastDayOfMonth, r as getFirstDayOfMonth, v as isSameDay, w as isSameDayTimezone, x as convertMinutesToHoursAndMinutes, y as translateMonth, z as getTimezoneOffset } from './utils-7d962146.js';
+import { R as RegisterComponent } from './register-component-02a05665.js';
+import { a as debug, i as instance, j as capitalizeFirstLetter, l as formatBookedEventDate, s as sanitizeHtml, n as sanitize, t as timezone, b as addDaysToCurrentDate, o as isSameMonth, q as getLastDayOfMonth, r as getFirstDayOfMonth, v as isSameDay, w as convertMinutesToHoursAndMinutes, x as translateMonth, y as getTimezoneOffset, z as isSameDayTimezone } from './utils-e27d0e4b.js';
 import { T as TIMEZONE_MAP, c as LANGUAGE_CODE_TO_LOCALE_MAP, a as LANGUAGE_MAP } from './constants-3d8016e3.js';
-import './utc-484aac6d.js';
+import { a as dayjs, u as utc } from './utc-484aac6d.js';
 
 const nylasBookedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.nylas-booked-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:16px;font-weight:400;border-bottom:1px solid var(--nylas-base-200);width:inherit;padding:0 0 1.5rem}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booked-event-header .card-description{text-align:center}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:16px;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.button-container{width:inherit}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);border-top:1px solid var(--nylas-base-200);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
 const NylasBookedEventCardStyle0 = nylasBookedEventCardCss;
@@ -1054,6 +1054,8 @@ var __metadata$4 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
+dayjs.extend(utc);
+dayjs.extend(timezone);
 const NylasDatePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -1070,6 +1072,7 @@ const NylasDatePicker = class {
         this.month = this.selectedDate || new Date();
         this.dates = this.getDates();
         this.disableNextMonthButton = false;
+        this.selectableDatesTimezone = [];
     }
     configSettingsChanged(newConfigSettings) {
         const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);
@@ -1097,6 +1100,21 @@ const NylasDatePicker = class {
         }
         this.dates = this.getDates();
     }
+    convertDatesToTimezone(dates, targetTimezone) {
+        if (!dates || dates.length === 0) {
+            return [];
+        }
+        return dates.map(d => {
+            const tzDate = dayjs(d).tz(targetTimezone);
+            return new Date(tzDate.year(), tzDate.month(), tzDate.date());
+        });
+    }
+    selectedTimezoneChanged(newSelectedTimezone) {
+        this.selectableDatesTimezone = this.convertDatesToTimezone(this.selectableDates, newSelectedTimezone);
+    }
+    selectableDatesChanged(newSelectableDates) {
+        this.selectableDatesTimezone = this.convertDatesToTimezone(newSelectableDates, this.selectedTimezone);
+    }
     connectedCallback() { }
     disconnectedCallback() { }
     componentWillLoad() { }
@@ -1105,6 +1123,7 @@ const NylasDatePicker = class {
         this.applyThemeConfig(this.themeConfig);
         this.month = this.selectedDate || new Date();
         this.dates = this.getDates();
+        this.selectableDatesTimezone = this.convertDatesToTimezone(this.selectableDates, this.selectedTimezone);
     }
     applyThemeConfig(themeConfig) {
         if (themeConfig) {
@@ -1138,11 +1157,16 @@ const NylasDatePicker = class {
     isSelected(date, selectedDate, selectableDates) {
         return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;
     }
-    isDisabled(date, selectableDates) {
-        return date && selectableDates?.find(d => isSameDayTimezone(d, date, this.selectedTimezone)) === undefined;
+    isDisabled(date) {
+        if (!date || !this.selectableDatesTimezone || this.selectableDatesTimezone.length === 0) {
+            return true;
+        }
+        return !this.selectableDatesTimezone.some(d => {
+            return date.getFullYear() === d.getFullYear() && date.getMonth() === d.getMonth() && date.getDate() === d.getDate();
+        });
     }
     render() {
-        return (h(Host, { key: 'de367c35af66e9f312be6682884062da9e747c9a', part: "ndp" }, h("div", { key: '80c028e4e630fa2a58359a2b8ad8425e24b21cc2', class: "nylas-date-picker" }, h("div", { key: '282dc9ba42e5fb652858d4ff0b49ea069db96175', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'd7f9d6deb57eafcd9b37f6a98e3e9afda74e143e' }, h("clock-icon", { key: 'a54f0131170d81b2d8644b2d9d349d30654be393' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: 'e8924e6272011e68f6fc605b83f9816b4844e3b1', class: 'header flex-row' }, h("h2", { key: 'ce9bf342cfd4737f4693956ce62d6a8a2ade388d', part: 'ndp__month-header' }, h("strong", { key: '02b93cc055a1445b32008e346ee9dd250f0b2b21' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'b9cf990f4d25209e3058769a7903f731bc80fd2c', class: 'pagination' }, h("button", { key: '2879994e18001a6fbb96cfd5f2ae4d22b17c4da4', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '313a9663314b2e875ac4146a7d23838ac71a4336' })), h("button", { key: '5f87ad4833c10fa362e93cbbee20861cc6363466', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '408cd5ef79316815f929aec270309b3e5d8659b6' })))), h("div", { key: 'ee100542f37d246a2cd7a2c27adf4ff0efcade18', class: 'dates' }, [
+        return (h(Host, { key: '36322bd1badb927a3d8505334c339b220a81c946', part: "ndp" }, h("div", { key: '666e06338a8be95fdf5a18d0d5e1db006ce0623e', class: "nylas-date-picker" }, h("div", { key: '7429e08d3dc984205a07efb8a7a0dc21d8b3b6b2', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'a5b1770d7f39d173a37f4ee627645f43230b83eb' }, h("clock-icon", { key: '383105a9bfdb7e45e414941c06278de8b73e705f' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '91cd7691b593bd8af1bd930f0206cc284826ee83', class: 'header flex-row' }, h("h2", { key: 'c490b7fe8a6a04ba8fda318b41a7ad5db9c13d0c', part: 'ndp__month-header' }, h("strong", { key: 'bfe557291e300cc8ec876d889909168fa5cd798b' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'a19535626041e7cb3550aabd677fd788bf003b03', class: 'pagination' }, h("button", { key: '6174f0128f51c6ad814473425da3e983e1dd80bc', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '9c6c965ca7273205229ee6f3918226588b9cceb6' })), h("button", { key: 'd83a846832a897e8a35242093ba01fc04497b0ff', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: 'b7106b3807f93e73eb86102a7ce4b81997a2c57a' })))), h("div", { key: '3c5809a8f1447005d82a75bc035a52918397a423', class: 'dates' }, [
             instance.t('days.sunday'),
             instance.t('days.monday'),
             instance.t('days.tuesday'),
@@ -1153,7 +1177,7 @@ const NylasDatePicker = class {
         ].map(day => {
             return (h("div", { class: 'day', part: "ndp__day" }, day));
         }), this.dates.map((date, i) => {
-            const isDisabled = this.isDisabled(date, this.selectableDates);
+            const isDisabled = this.isDisabled(date);
             if (this.isLoading) {
                 return (h("button", { disabled: true, class: {
                         'date day-skeleton': true,
@@ -1173,7 +1197,9 @@ const NylasDatePicker = class {
         "configSettings": ["configSettingsChanged"],
         "selectedLanguage": ["selectedLanguageChanged"],
         "themeConfig": ["themeConfigChanged"],
-        "selectedDate": ["selectedDateChanged"]
+        "selectedDate": ["selectedDateChanged"],
+        "selectedTimezone": ["selectedTimezoneChanged"],
+        "selectableDates": ["selectableDatesChanged"]
     }; }
 };
 __decorate$4([
@@ -1739,12 +1765,14 @@ const NylasTimeslotPicker = class {
             }
         }
     }
-    getTimeslotId(date, index) {
-        return `${date.toLocaleDateString()}-${index}`;
+    getTimeslotId(timeslot, index) {
+        const date = new Date(timeslot.start_time);
+        const eventId = timeslot.event_id;
+        return `${date.toLocaleDateString()}-${index}${eventId ? `-${eventId}` : ''}`;
     }
     onClickSelectTime(timeslot, index) {
         debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);
-        this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);
+        this.selectedTimeslotIndex = this.getTimeslotId(timeslot, index);
         this.timeslotSelected.emit({
             start_time: timeslot.start_time,
             end_time: timeslot.end_time,
@@ -1788,10 +1816,11 @@ const NylasTimeslotPicker = class {
             return h(Host, null);
         return (h(Host, { part: "ntp" }, h("div", { class: 'time-picker-wrapper', part: "ntp__time-picker-wrapper" }, h("div", { class: 'timeslots', part: "ntp__timeslots" }, filteredTimes.map((timeslot, index) => {
             const showCapacity = typeof timeslot?.capacity === 'number' && timeslot?.capacity > 0;
+            const isSelected = this.selectedTimeslotIndex == this.getTimeslotId(timeslot, index);
             return (h("button", { part: `ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`, class: {
                     time: true,
-                    selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),
-                }, onClick: () => this.onClickSelectTime(timeslot, index), onMouseEnter: () => this.handleMouseEnter(index), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: "time-label", part: "ntp__time-label" }, this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)
+                    selected: typeof this.selectedTimeslot !== 'undefined' && isSelected,
+                }, onClick: () => this.onClickSelectTime(timeslot, index), onMouseEnter: () => this.handleMouseEnter(index), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: "time-label", part: "ntp__time-label" }, this.hoveredTimeslotIndex == index || isSelected
                 ? this.getTimeSlotLabel(timeslot)
                 : timeslot.start_time.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone, hour12: this.hour12 }), h("span", { class: "spots" }, showCapacity ? `${timeslot?.capacity} spots left` : null))));
         })), this.selectedTimeslot && (h("div", { class: 'footer' }, h("button-component", { variant: 'primary', onClick: (event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot), part: "ntp__button-primary" }, h("slot", { name: "timeslot-picker-cta-label" }, instance.t('nextButton'))))))));