npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.10 → 1.1.0-canary.11 - Mend

@nylas/web-elements 1.1.0-canary.10 → 1.1.0-canary.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/dist/esm/nylas-availability-picker.entry.js CHANGED Viewed

@@ -52,9 +52,9 @@ const NylasAvailabilityPicker = class {
         this.host.setAttribute('name', newValue);
     }
     configChangedHandler(newConfig) {
-        const organizerParticipant = newConfig?.participants?.find(p => p.is_organizer);
-        if (organizerParticipant && organizerParticipant?.availability?.open_hours) {
-            this.openHoursToSchedule(organizerParticipant?.availability?.open_hours);
+        const organizer = newConfig?.participants?.find(p => p.is_organizer);
+        if (organizer && organizer?.availability?.open_hours) {
+            this.openHoursToSchedule(organizer?.availability?.open_hours);
         }
     }
     scheduleChanged(newValue, oldValue) {
@@ -203,7 +203,13 @@ const NylasAvailabilityPicker = class {
         this.schedule[day].splice(index, 1);
         this.schedule = { ...this.schedule };
     }
-    setTime(key, _event, value) {
+    setTime(event) {
+        console.log('timeChanged', event);
+        const { key, value } = event.detail;
+        console.log({
+            key,
+            value,
+        });
         const [dayIndex, timeType] = key.split('_');
         const [day, index] = dayIndex.split(':');
         if (timeType === 'start') {
@@ -215,7 +221,8 @@ const NylasAvailabilityPicker = class {
         this.internals.setValidity({ customError: false });
         this.schedule = { ...this.schedule };
     }
-    setFormError(key, _event, _errorMessage) {
+    setFormError(event) {
+        const { key } = event.detail;
         const [_, timeType] = key.split('_');
         const element = this.host.shadowRoot?.getElementById(key);
         if (element) {
@@ -297,7 +304,7 @@ const NylasAvailabilityPicker = class {
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: 'ba1266dfd7debd6f7efa1f5ddc48052806e8f594' }, h("div", { key: '34a52a728438348052f5159d347ff43071742bd4', class: "nylas-availability-picker" }, h("div", { key: '3a5e39e6e3d3ceaef4ce85fba1d2b1e5e7a52cda', class: "header", part: "nap__header" }, h("h3", { key: '4aad60a39b816631b0c9cb89741ceca1da22e05b' }, "General availability"), h("p", { key: '71755be3b152af545828336c3601c24434f764b4' }, "Set your availability for scheduling meetings.")), h("div", { key: 'db86358f996a6b7f75572f65ad469c1c80dee5a2', class: "content" }, h("div", { key: '63a90d8094f600815e2b7e8a13c9cbd25a8a14c1', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '612b2808fe828cf8867c98ea0f80f5a3b3a5ab52', class: "sub-header" }, "Select timezone", h("span", { key: '467c6940b46b12101074211216c920d4c7db40af', class: "icon" }, h("tooltip-component", { key: '8f98c2efd0ebe318854857bcb5a0d56794f5d454' }, h("info-icon", { key: 'e35b77bdd317ff9f25e0c1157acfe734ea81541f', slot: "tooltip-icon" }), h("span", { key: '4fb700e4030ae345e872f2da8352ca00078b57a6', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '78270f32b150107baf43fbd7b2a882221ecf33f6', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: '8c76fd5d2396e75a07a2b922d9b44a27a6b4baf0', slot: "select-icon" }, h("globe-icon", { key: '885b683dd6496ed199d576d6a8139609b04ad661', width: "20", height: "20" })))), h("div", { key: 'e6541508d6d99ab9ba7b752c5eb14be33bd517d9', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: 'ebdf308b5d2e38cbbe9c01915a8704cdc137b56f' }, h("div", { key: '81557accec232465b3e86d5d0bdc1ae25aa8d6de', class: "nylas-availability-picker" }, h("div", { key: 'f5c2a5ef92fc59568672b536a9e604547561b8d6', class: "header", part: "nap__header" }, h("h3", { key: 'cbccae32847e68a5fe47f9f1f901e55546621c36' }, "General availability"), h("p", { key: '34600ddd459b5d681574458f4f4acdb5ed26f7ac' }, "Set your availability for scheduling meetings.")), h("div", { key: '65785316b94376cf4d79de9c875e39060226ca31', class: "content" }, h("div", { key: '5c30c0bd916460f668dc3f881b4b01a1792e59b0', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '0638898cae070a5d9eae8cd1dca83e39e5bb735f', class: "sub-header" }, "Select timezone", h("span", { key: 'd6746b3329ba92bf5c759895444d08924ba7769c', class: "icon" }, h("tooltip-component", { key: '76dbc460bd91fa0f33a65c65ce092ad966ce6535' }, h("info-icon", { key: '5778fb41c006172a125a4430186ad85d4cdbaf3c', slot: "tooltip-icon" }), h("span", { key: '76132f33db5dce9d7d7e5e111065ad9d1ec64d3f', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '9a0a3702b4868109ccc8f77e1143727de1e3f1fa', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'ed0756090602c8a52ffdae493f09cfa7d61dd1e9', slot: "select-icon" }, h("globe-icon", { key: '6e5e5234210ba8cc50ef57338a2f4e926521cb70', width: "20", height: "20" })))), h("div", { key: 'eac4322bf2aa8f5ea84e4d7ccee293803c70b2ac', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
@@ -312,7 +319,7 @@ const NylasAvailabilityPicker = class {
                 timeRanges.map((timeRange, timeRangeIndex) => {
                     const startKey = `${key}:${timeRangeIndex}_start`;
                     const endKey = `${key}:${timeRangeIndex}_end`;
-                    return (h("div", { class: "time-range", part: "nap__time-range" }, h("div", { class: "pickers" }, h("nylas-time-window-picker", { id: startKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.start, name: startKey, key: startKey, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times", setTime: (event, additionalData) => this.setTime(startKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(startKey, event, additionalData) }), h("span", null, " - "), h("nylas-time-window-picker", { id: endKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.end, name: endKey, key: endKey, minimumStartTime: timeRange.start, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times", setTime: (event, additionalData) => this.setTime(endKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(endKey, event, additionalData) })), h("button", { onClick: () => this.removeTimeRange(day, timeRangeIndex) }, h("close-icon", null))));
+                    return (h("div", { class: "time-range", part: "nap__time-range" }, h("div", { class: "pickers" }, h("nylas-time-window-picker", { id: startKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.start, name: startKey, key: startKey, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times" }), h("span", null, " - "), h("nylas-time-window-picker", { id: endKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.end, name: endKey, key: endKey, minimumStartTime: timeRange.start, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times" })), h("button", { onClick: () => this.removeTimeRange(day, timeRangeIndex) }, h("close-icon", null))));
                 }), h("p", { class: "error" }, this.overlapDays[day] ? 'Overlapping time ranges' : '')), h("div", null, timeRanges.length > 0 ? (h("button", { onClick: () => this.addTimeRange(day), part: "nap__add-time-range" }, h("add-circle-icon", null))) : null)));
         }))))));
     }

package/dist/esm/nylas-availability-picker.entry.js.map CHANGED Viewed

package/dist/esm/nylas-booked-event-card.entry.js CHANGED Viewed

@@ -79,7 +79,7 @@ const NylasBookedEventCard = class {
         debug(`[nylas-booked-event-card] Component did load`);
     }
     render() {
-        return (h(Host, { key: 'fd31424392865287d5a696d2ea4a0840974324c1', part: "nbec" }, h("sp-theme", { key: '5e4fab19061fd773200fc8856355d2efc6c7f767', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '5effb33fcc0492a2f968e5b29229a974fb1bf2a3', class: "booked-event-timezone" }, h("globe-icon", { key: '7be37ec8323f0c36112e4a8c5903c2078fe0ae0e' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '594e1cffea71361c2a52f5ed3f480b7fc7a6c0f4', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'e2bcea8c2cd100f6291846d29524ee08a2c6d6ad', class: "calendar-icon" }, h("calendar-check-icon", { key: '412d634ebd082474581d8ceba417bcefb45d10eb' })), h("div", { key: '97f9f06776a64a9ceed5f8b7c84ed9d03983e083', class: "booked-event-header" }, h("h2", { key: '7453ad8f16ca9e477a5c6f7791dbf2aa89514394', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '5877c31296ad8821c822b8447a9adb495eea9756', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '3845e25500160ac43e0c19af3c3c3c446caca39e' }), h("div", { key: '349d849d49be4e71264436c6add7039b889f8933', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'bccea293108ed90eece51494c79c8e5ae2db1411' }), h("h3", { key: 'ee98cd2b9c877a7e8342940892ff08be4ee647e0' }, "Booking date and time"), h("p", { key: '1efd072abb08a6606299911e594a07b2de396113' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: 'e014d22678d84c7541854985d945672efde047e9' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '0870d9969b572bf688c4c12de934066ed36f421a', class: "booking-participants" }), h("sp-divider", { key: '85674fadb92fc69826e738545a9f9bd1c478d522' }), h("div", { key: 'c60007a3d63af3cca707736386f7cbc1d2963626', class: "footer" }, h("sp-button", { key: 'f1295268e7f3341e37e7d66d460eabc28ad56482', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '276674ce1eb225cfb7ea95936e1cb05056b921cc', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
+        return (h(Host, { key: '5bd3216b60b7cdb86a44435706fb43b6a898e61c', part: "nbec" }, h("sp-theme", { key: 'f6059be8647e7340db11f12db85596b2493a3032', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '5f6cf3edb7b911c7c2c24d4ce82357298cc10108', class: "booked-event-timezone" }, h("globe-icon", { key: 'b23ca20aa43dc402a2071ed0019ff103f455e769' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '664f226bd33a6ee1ee938ac76eca60085e822915', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '0de5fccaf726cc6a6fb1917249ffcccbaf45190f', class: "calendar-icon" }, h("calendar-check-icon", { key: '94bbe15e7acddbc88916355337170a6753fa70b3' })), h("div", { key: 'f3876bccacb3a99e7c337aff930095884b3e6be3', class: "booked-event-header" }, h("h2", { key: 'da46d3cb4865421827cd7b3f499cae06ca09e365', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '57ed93864ee0cbdbf5755b0fe9a6b2803ca7a869', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '4fab8afdbdc7e9a2b55e35779ff087a5497b0c3e' }), h("div", { key: '54ffc748a0da3bd9ae866137b600d0dc1da5eb5e', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '674edd7058565b837a618089c653d20b8b8f08e7' }), h("h3", { key: '51f406b68b2e310e354e79703aea3efd14236d57' }, "Booking date and time"), h("p", { key: '404211c1b06bb80da3eb7274f4a41fba962ce0b9' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '221f96d994e440affff5a347fbb9da5a2566ab29' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: 'd333515e59086254d2484c5f55ad9b69a21bf0bb', class: "booking-participants" }), h("sp-divider", { key: 'f6ee5cd38d186d943a345f037357419f2af7e3c7' }), h("div", { key: 'c6eb21904c9db747ceb7a2daed88bf86057f4046', class: "footer" }, h("sp-button", { key: 'ee4a439cd71eb0c9c6a1a82be35698a3b027c6c5', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '36aa6cc83eb259f21098787e61d36c4a8ca5b3df', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
     }
 };
 __decorate([

package/dist/esm/nylas-booked-event-card_10.entry.js CHANGED Viewed

@@ -80,7 +80,7 @@ const NylasBookedEventCard = class {
         debug(`[nylas-booked-event-card] Component did load`);
     }
     render() {
-        return (h(Host, { key: 'fd31424392865287d5a696d2ea4a0840974324c1', part: "nbec" }, h("sp-theme", { key: '5e4fab19061fd773200fc8856355d2efc6c7f767', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '5effb33fcc0492a2f968e5b29229a974fb1bf2a3', class: "booked-event-timezone" }, h("globe-icon", { key: '7be37ec8323f0c36112e4a8c5903c2078fe0ae0e' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '594e1cffea71361c2a52f5ed3f480b7fc7a6c0f4', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'e2bcea8c2cd100f6291846d29524ee08a2c6d6ad', class: "calendar-icon" }, h("calendar-check-icon", { key: '412d634ebd082474581d8ceba417bcefb45d10eb' })), h("div", { key: '97f9f06776a64a9ceed5f8b7c84ed9d03983e083', class: "booked-event-header" }, h("h2", { key: '7453ad8f16ca9e477a5c6f7791dbf2aa89514394', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '5877c31296ad8821c822b8447a9adb495eea9756', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '3845e25500160ac43e0c19af3c3c3c446caca39e' }), h("div", { key: '349d849d49be4e71264436c6add7039b889f8933', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'bccea293108ed90eece51494c79c8e5ae2db1411' }), h("h3", { key: 'ee98cd2b9c877a7e8342940892ff08be4ee647e0' }, "Booking date and time"), h("p", { key: '1efd072abb08a6606299911e594a07b2de396113' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: 'e014d22678d84c7541854985d945672efde047e9' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '0870d9969b572bf688c4c12de934066ed36f421a', class: "booking-participants" }), h("sp-divider", { key: '85674fadb92fc69826e738545a9f9bd1c478d522' }), h("div", { key: 'c60007a3d63af3cca707736386f7cbc1d2963626', class: "footer" }, h("sp-button", { key: 'f1295268e7f3341e37e7d66d460eabc28ad56482', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '276674ce1eb225cfb7ea95936e1cb05056b921cc', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
+        return (h(Host, { key: '5bd3216b60b7cdb86a44435706fb43b6a898e61c', part: "nbec" }, h("sp-theme", { key: 'f6059be8647e7340db11f12db85596b2493a3032', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '5f6cf3edb7b911c7c2c24d4ce82357298cc10108', class: "booked-event-timezone" }, h("globe-icon", { key: 'b23ca20aa43dc402a2071ed0019ff103f455e769' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '664f226bd33a6ee1ee938ac76eca60085e822915', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '0de5fccaf726cc6a6fb1917249ffcccbaf45190f', class: "calendar-icon" }, h("calendar-check-icon", { key: '94bbe15e7acddbc88916355337170a6753fa70b3' })), h("div", { key: 'f3876bccacb3a99e7c337aff930095884b3e6be3', class: "booked-event-header" }, h("h2", { key: 'da46d3cb4865421827cd7b3f499cae06ca09e365', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '57ed93864ee0cbdbf5755b0fe9a6b2803ca7a869', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '4fab8afdbdc7e9a2b55e35779ff087a5497b0c3e' }), h("div", { key: '54ffc748a0da3bd9ae866137b600d0dc1da5eb5e', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '674edd7058565b837a618089c653d20b8b8f08e7' }), h("h3", { key: '51f406b68b2e310e354e79703aea3efd14236d57' }, "Booking date and time"), h("p", { key: '404211c1b06bb80da3eb7274f4a41fba962ce0b9' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '221f96d994e440affff5a347fbb9da5a2566ab29' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: 'd333515e59086254d2484c5f55ad9b69a21bf0bb', class: "booking-participants" }), h("sp-divider", { key: 'f6ee5cd38d186d943a345f037357419f2af7e3c7' }), h("div", { key: 'c6eb21904c9db747ceb7a2daed88bf86057f4046', class: "footer" }, h("sp-button", { key: 'ee4a439cd71eb0c9c6a1a82be35698a3b027c6c5', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '36aa6cc83eb259f21098787e61d36c4a8ca5b3df', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
     }
 };
 __decorate$7([
@@ -282,13 +282,13 @@ const NylasBookingForm = class {
         this.guestEmailErrors = { ...errors };
     }
     render() {
-        return (h(Host, { key: '5a255277a21fa84d100bb53d13bb9dce0ce58e24' }, h("form", { key: '19b7aecb9223557f0ff9d4c062968c3242026f0c', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '49276b2a59934eeaeb38c06db6968f957b7b9bee', class: "nylas-booking-form" }, h("slot", { key: 'ee0a8c29c1fb6b7273d6a2d3c8cb88180f0e9dbf', name: "custom-booking-form" }, h("div", { key: '662e46f3a7925282f824547a069f52584b94d564', class: "input-wrapper" }, h("label", { key: 'a01c1903ee983e1555006ad14e75cd1b2c3036ff', htmlFor: "name", class: { 'input-label': true, 'error': !this.isNameValid }, part: "nbf__input-label" }, "Name ", h("span", { key: '4729d580bbf9d851c2ac8b686dc826c4e3e4616f', class: "required" }, "*")), h("input", { key: '51754a63345f1d0332a38f646dde6a8a998c8dee', id: "name", type: "text", placeholder: "Enter your name", value: this.name, class: {
+        return (h(Host, { key: '018357db1ce7dbbeb11ebc236b869a3baf246c69' }, h("form", { key: '5f26a98903372d4c587df1d1045bcb240c4ee7cd', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '4ad84c89bb19933cb5d8403939104c38705ddfba', class: "nylas-booking-form" }, h("slot", { key: 'c594f51e9d8cbd40e1d42f9aa86baae536a9c7e7', name: "custom-booking-form" }, h("div", { key: 'fe026c1562cb85c773e31cec8a0a3574b3515e0c', class: "input-wrapper" }, h("label", { key: '27ecf20858dd3133ec4914970f7148720bc603ed', htmlFor: "name", class: { 'input-label': true, 'error': !this.isNameValid }, part: "nbf__input-label" }, "Name ", h("span", { key: '4a39ea8d7aa693f860c17aa28b2130ae49f31a1c', class: "required" }, "*")), h("input", { key: '69fb70d74fe3b3cd883ca7fc0a9f174b6f81936a', id: "name", type: "text", placeholder: "Enter your name", value: this.name, class: {
                 input: true,
                 error: !this.isNameValid,
-            }, part: "nbf__input-textfield", onInput: (e) => this.changeName(e.target?.value) }), h("p", { key: 'b8a6660e959a877421bdfffdb87279d8f09123b8', class: "help-text" }, this.validationError.name)), h("div", { key: 'e78a74e67abde7e61c1d3c555c234817770a4040', class: "input-wrapper" }, h("label", { key: 'd5507037f5c668f58e14031dba4276900ef5ed09', htmlFor: "email", class: { 'input-label': true, 'error': !this.isEmailValid }, part: "nbf__input-label" }, "Email ", h("span", { key: '514f00587069ac1cfc6d16bfd30750d6d501817d', class: "required" }, "*")), h("input", { key: '0b80ded98b2174f783fa9e7c951a47661aa894f6', id: "email", type: "email", placeholder: "Enter your email", value: this.email, class: {
+            }, part: "nbf__input-textfield", onInput: (e) => this.changeName(e.target?.value) }), h("p", { key: 'e4be03fd299cbc94713e5561fb9ed69a78af200c', class: "help-text" }, this.validationError.name)), h("div", { key: '017e724bfd408c5bde7714ae8b2a941d4a1194d9', class: "input-wrapper" }, h("label", { key: 'ed19f30d50d5d2ae95bcbf567b5c888b7906463d', htmlFor: "email", class: { 'input-label': true, 'error': !this.isEmailValid }, part: "nbf__input-label" }, "Email ", h("span", { key: '9b3ab493851edfcc407a38fad0994da171ac9976', class: "required" }, "*")), h("input", { key: '768690b3cc350537be1fa39cc7a295f688c1d91d', id: "email", type: "email", placeholder: "Enter your email", value: this.email, class: {
                 input: true,
                 error: !this.isEmailValid,
-            }, part: "nbf__input-textfield", onInput: (e) => this.changeEmail(e.target?.value) }), h("p", { key: 'ba185ccb2bec87049e94d8c5f8d211a838de0025', class: "help-text" }, this.validationError.email)))), h("div", { key: '56e2cce79371533ad66cccad95a79dd8935fe3eb', class: "cta" }, h("sp-button", { key: '2b6410b3cf2b7634737aa858396290ad065dfcfc', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, h("slot", { key: '4ba60a2fb3542434ede16ea382ec4ca80cb8d422', name: "booking-form-back-label" }, "Back")), h("sp-button", { key: '49dd32531d7b55529bb73bc82eb0b91820c6ea33', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: 'a57ae44c1c3a1b020a110f0156435f27897410c6', name: "booking-form-book-label" }, "Book now"))))));
+            }, part: "nbf__input-textfield", onInput: (e) => this.changeEmail(e.target?.value) }), h("p", { key: '24a39d859e700d000a363fe8df2f000365542fb0', class: "help-text" }, this.validationError.email)))), h("div", { key: '40b4b99dcf471afb8079d49fb9a0efe6bb7e406c', class: "cta" }, h("sp-button", { key: 'ae6bc3f620953f355184c7aef3ce692c2509c81d', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, h("slot", { key: 'e5a10ff0978756f7c3f8751a7aca6e3281f5046b', name: "booking-form-back-label" }, "Back")), h("sp-button", { key: '3aa5fe99000d52ef64db4191950109caeb526878', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: '83c5332efd5eb82617dc0a0f5275950431d95c26', name: "booking-form-book-label" }, "Book now"))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -642,7 +642,7 @@ const NylasDatePicker = class {
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: 'fd7de67053417b11844a66e5b978f7feb80efe18', part: "ndp" }, h("div", { key: 'a08943851e2239ad12121b90f35760d73a085441', class: "nylas-date-picker" }, h("div", { key: '832ad38012c55eb04ab2c5b0ceb50052ab3edd42', class: 'header flex-row' }, h("h2", { key: '2df451227e57dfee081c1d4435443e479cf8871c', part: 'ndp__month-header' }, h("strong", { key: '63421dca4b9bf36207ba05e9eff795c7c198287c' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ca982a82d87baf5658674624c1153f14e77470aa', class: 'pagination' }, h("button", { key: 'd2a41582014f92c23784c71fe1df9834d77fd355', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '4f319da7e440236edb9bfa711fb0b05cd046dc8e' })), h("button", { key: 'ff00426293e1857592ebae58557ea46e5db9858d', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '7075f5e8da61c9d91fb612771a3d7672f1521b6f' })))), h("div", { key: '3ad884077d163de5182731c03bf856c9e204f411', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+        return (h(Host, { key: 'd6122ec547ac33e6febfe41497a1bd3de1eeb6b3', part: "ndp" }, h("div", { key: 'cee58b509bf57156342c7506a020b64611f62209', class: "nylas-date-picker" }, h("div", { key: 'bb3a8356004b07fd86fb05961eb400215b824e3a', class: 'header flex-row' }, h("h2", { key: '681f87b531eaa6c26b99bb2616fd59cd388e6bd9', part: 'ndp__month-header' }, h("strong", { key: 'e93fb4feacb91042cbfa8bb65b0a196fafb343d2' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'fb4c4671c2cf24d4ae2ddf1077d0431a8a6261a8', class: 'pagination' }, h("button", { key: '6810b244baf594e6a9c69b2916704744a0d18f74', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '8a14ef5e447da88e3c1c19b77f7d42454243dd4e' })), h("button", { key: 'aa6efd17b59da3308fec14032c64017849750702', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '3a1704b4c41d92ac54a6936e487402a98bba5de1' })))), h("div", { key: '85910baac9b8b411ebfede44c0a11bff2e489efe', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
             return (h("div", { class: 'day', part: "ndp__day" }, day));
         }), this.dates.map((date, i) => {
             const isDisabled = this.isDisabled(date, this.selectableDates);
@@ -751,13 +751,13 @@ const NylasLocaleSwitch = class {
             label: LANGUAGE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: '688b90cbd1410a8025a8becfd3f979fc854c60a2' }, h("div", { key: 'a4f485ce6204d89e16336c93809dbcf5ebf862ef', class: "nylas-locale-switch" }, h("div", { key: '5525e493d2f8e3258a2fe8b4c739db49d7ef1a35', class: {
+        return (h(Host, { key: '9b59f6361d95bf132b22ff7d03edd20c58d81f9a' }, h("div", { key: 'f2ebeeaed33b6e750f71d23ca24aa2d1ad858a10', class: "nylas-locale-switch" }, h("div", { key: '3bb086e794c113b62d88b458f213beaeb28bf5c7', class: {
                 'select-wrapper': true,
                 'timezone': true,
-            } }, h("select-dropdown", { key: '68f7f48a2cada4cc0c7327431f15384d17ebc261', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone) }, h("span", { key: 'd1213a8cba28b2163997cdb4bce7e13d7485e869', slot: "select-icon" }, h("globe-icon", { key: 'f11285b20c93a42a0f195f89966bc7ff7b2d7322', width: "20", height: "20" })))), h("div", { key: '0287627954a80ef5092ded694e61ec2a19606667', class: {
+            } }, h("select-dropdown", { key: '169822d4f1c58f795f0a9189c074699814a2790e', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone) }, h("span", { key: '54fd84316990a375e60291bc68406a2fd1a43f57', slot: "select-icon" }, h("globe-icon", { key: '2cd6a94baef61202b97411e10cb212b48ddd527a', width: "20", height: "20" })))), h("div", { key: '39e1a7f52109e87ebfcd41f5eb35146a21ab7911', class: {
                 'select-wrapper': true,
                 'language': true,
-            } }, h("select-dropdown", { key: '1bd58884de605b22cb6a5631b8e9f960cfa058d4', name: "language", options: languageOptions, defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage) }, h("span", { key: '0681b6c8296d60c258c2df3bcb60d895c0e0c533', slot: "select-icon" }, h("translate-icon", { key: 'bd3f346f56da2a139c5050799c9e2774d311d72c', width: "20", height: "20" })))))));
+            } }, h("select-dropdown", { key: 'b803b2685efe46673d125b3d10714bafd48197c1', name: "language", options: languageOptions, defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage) }, h("span", { key: 'b8a7d37f9bd60a14f2652fd17d7572b2bd853ee7', slot: "select-icon" }, h("translate-icon", { key: 'b36f31c8ddec7a70fdce4154006fce11af4e3bb3', width: "20", height: "20" })))))));
     }
 };
 __decorate$2([
@@ -890,7 +890,7 @@ const NylasSelectedEventCard = class {
         this.endTime = new Date(selectedTimeslot?.end_time).toLocaleString(undefined, { timeStyle: 'short' });
     }
     render() {
-        return (h(Host, { key: '1104fd2969ab03bb794c17bbf08f1600a200448c', part: "nsec" }, h("sp-theme", { key: '674934ecb54519d9e8c227a9946b9725518b77e5', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '4d492e825e93b93ff96af4970812178656de4ab8', class: "event-card", part: "nsec__card" }, h("div", { key: '239131412dab45da5b1f7bfe3b4a2eda45a2978b', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: 'a2fa2f47b94a2c331d4cac88ef736faef3e30dae' })), h("div", { key: '81c873d5c2019b6ae1d8b746685dbe5efc2d7d0b', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })), h("div", { key: '67348e66fd879ead10594b216a2d66cf7da272aa', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '0fc6452dae7c5998a70d116c9bdfe25ab109661c', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '86c4a1e2728a30e34805a7c286378fe9adef110e' }), TIMEZONE_MAP[this.selectedTimezone]))));
+        return (h(Host, { key: 'c84565db48fc177fd6f8af71db7f9776516cf46f', part: "nsec" }, h("sp-theme", { key: '7de2e148c85b878e735ac6a69a62892110de9b65', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '0a9f43a55c68fdd7d93b42600b94e2f10d551dd4', class: "event-card", part: "nsec__card" }, h("div", { key: '18b16b39d4c3d7c1a0f9c16c084d99f1b9b9ff5b', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '92202409a7e922975ab31216d8f68c3fb8767cbe' })), h("div", { key: '79006fdf073ed56acec50e1e11ddf101fcfca81c', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })), h("div", { key: '1f605b2bc03f290b5a5b3ac858256f438ac33651', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '03f9f64e0229904519984305751c388886838b99', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '7bd33f03d96671423199113ee24fe913f78c1bca' }), TIMEZONE_MAP[this.selectedTimezone]))));
     }
     static get watchers() { return {
         "selectedTimeslot": ["handleSelectedTimeslotChange"]

package/dist/esm/nylas-booking-calendar-picker.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booking-calendar-picker.entry.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booking-calendar-picker.entry.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendar.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/nylas-booking-form.entry.js CHANGED Viewed

@@ -171,13 +171,13 @@ const NylasBookingForm = class {
         this.guestEmailErrors = { ...errors };
     }
     render() {
-        return (h(Host, { key: '5a255277a21fa84d100bb53d13bb9dce0ce58e24' }, h("form", { key: '19b7aecb9223557f0ff9d4c062968c3242026f0c', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '49276b2a59934eeaeb38c06db6968f957b7b9bee', class: "nylas-booking-form" }, h("slot", { key: 'ee0a8c29c1fb6b7273d6a2d3c8cb88180f0e9dbf', name: "custom-booking-form" }, h("div", { key: '662e46f3a7925282f824547a069f52584b94d564', class: "input-wrapper" }, h("label", { key: 'a01c1903ee983e1555006ad14e75cd1b2c3036ff', htmlFor: "name", class: { 'input-label': true, 'error': !this.isNameValid }, part: "nbf__input-label" }, "Name ", h("span", { key: '4729d580bbf9d851c2ac8b686dc826c4e3e4616f', class: "required" }, "*")), h("input", { key: '51754a63345f1d0332a38f646dde6a8a998c8dee', id: "name", type: "text", placeholder: "Enter your name", value: this.name, class: {
+        return (h(Host, { key: '018357db1ce7dbbeb11ebc236b869a3baf246c69' }, h("form", { key: '5f26a98903372d4c587df1d1045bcb240c4ee7cd', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '4ad84c89bb19933cb5d8403939104c38705ddfba', class: "nylas-booking-form" }, h("slot", { key: 'c594f51e9d8cbd40e1d42f9aa86baae536a9c7e7', name: "custom-booking-form" }, h("div", { key: 'fe026c1562cb85c773e31cec8a0a3574b3515e0c', class: "input-wrapper" }, h("label", { key: '27ecf20858dd3133ec4914970f7148720bc603ed', htmlFor: "name", class: { 'input-label': true, 'error': !this.isNameValid }, part: "nbf__input-label" }, "Name ", h("span", { key: '4a39ea8d7aa693f860c17aa28b2130ae49f31a1c', class: "required" }, "*")), h("input", { key: '69fb70d74fe3b3cd883ca7fc0a9f174b6f81936a', id: "name", type: "text", placeholder: "Enter your name", value: this.name, class: {
                 input: true,
                 error: !this.isNameValid,
-            }, part: "nbf__input-textfield", onInput: (e) => this.changeName(e.target?.value) }), h("p", { key: 'b8a6660e959a877421bdfffdb87279d8f09123b8', class: "help-text" }, this.validationError.name)), h("div", { key: 'e78a74e67abde7e61c1d3c555c234817770a4040', class: "input-wrapper" }, h("label", { key: 'd5507037f5c668f58e14031dba4276900ef5ed09', htmlFor: "email", class: { 'input-label': true, 'error': !this.isEmailValid }, part: "nbf__input-label" }, "Email ", h("span", { key: '514f00587069ac1cfc6d16bfd30750d6d501817d', class: "required" }, "*")), h("input", { key: '0b80ded98b2174f783fa9e7c951a47661aa894f6', id: "email", type: "email", placeholder: "Enter your email", value: this.email, class: {
+            }, part: "nbf__input-textfield", onInput: (e) => this.changeName(e.target?.value) }), h("p", { key: 'e4be03fd299cbc94713e5561fb9ed69a78af200c', class: "help-text" }, this.validationError.name)), h("div", { key: '017e724bfd408c5bde7714ae8b2a941d4a1194d9', class: "input-wrapper" }, h("label", { key: 'ed19f30d50d5d2ae95bcbf567b5c888b7906463d', htmlFor: "email", class: { 'input-label': true, 'error': !this.isEmailValid }, part: "nbf__input-label" }, "Email ", h("span", { key: '9b3ab493851edfcc407a38fad0994da171ac9976', class: "required" }, "*")), h("input", { key: '768690b3cc350537be1fa39cc7a295f688c1d91d', id: "email", type: "email", placeholder: "Enter your email", value: this.email, class: {
                 input: true,
                 error: !this.isEmailValid,
-            }, part: "nbf__input-textfield", onInput: (e) => this.changeEmail(e.target?.value) }), h("p", { key: 'ba185ccb2bec87049e94d8c5f8d211a838de0025', class: "help-text" }, this.validationError.email)))), h("div", { key: '56e2cce79371533ad66cccad95a79dd8935fe3eb', class: "cta" }, h("sp-button", { key: '2b6410b3cf2b7634737aa858396290ad065dfcfc', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, h("slot", { key: '4ba60a2fb3542434ede16ea382ec4ca80cb8d422', name: "booking-form-back-label" }, "Back")), h("sp-button", { key: '49dd32531d7b55529bb73bc82eb0b91820c6ea33', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: 'a57ae44c1c3a1b020a110f0156435f27897410c6', name: "booking-form-book-label" }, "Book now"))))));
+            }, part: "nbf__input-textfield", onInput: (e) => this.changeEmail(e.target?.value) }), h("p", { key: '24a39d859e700d000a363fe8df2f000365542fb0', class: "help-text" }, this.validationError.email)))), h("div", { key: '40b4b99dcf471afb8079d49fb9a0efe6bb7e406c', class: "cta" }, h("sp-button", { key: 'ae6bc3f620953f355184c7aef3ce692c2509c81d', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, h("slot", { key: 'e5a10ff0978756f7c3f8751a7aca6e3281f5046b', name: "booking-form-back-label" }, "Back")), h("sp-button", { key: '3aa5fe99000d52ef64db4191950109caeb526878', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: '83c5332efd5eb82617dc0a0f5275950431d95c26', name: "booking-form-book-label" }, "Book now"))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nylas-buffer-time.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { R as RegisterComponent } from './register-component-0462b27d.js';
 import { a as debug } from './utils-157014b4.js';
 import './_commonjsHelpers-7c16df4a.js';
-const nylasBufferTimeCss = ":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-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-buffer-time{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-buffer-time .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-buffer-time .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-buffer-time .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-buffer-time .nylas-buffer-time__body{display:grid;grid-template-columns:1fr auto}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body{grid-template-columns:1fr}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--nylas-base-200);color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{border:none}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row label{width:200px}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row .dropdown-container{display:flex;gap:1rem;align-items:center;justify-content:flex-end}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:208px;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:inherit;border-bottom-left-radius:var(--nylas-border-radius-2x)}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview h4{font-size:14px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container{padding:0 2rem 1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300);border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button){width:104px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-content){width:100%}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
+const nylasBufferTimeCss = ":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-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-buffer-time{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-buffer-time .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-buffer-time .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-buffer-time .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-buffer-time .nylas-buffer-time__body{display:grid;grid-template-columns:1fr auto}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body{grid-template-columns:1fr}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--nylas-base-200);color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{border:none}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row label{width:200px}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row .dropdown-container{display:flex;gap:1rem;align-items:center;justify-content:flex-end}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:208px;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:inherit;border-bottom-left-radius:var(--nylas-border-radius-2x)}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview h4{font-size:14px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center;margin:0.75rem 0}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container{padding:0 2rem 1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button){width:104px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-content){width:100%}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -93,7 +93,7 @@ const NylasBufferTime = class {
     }
     renderPreview() {
         const totalSlots = 4;
-        const slotHeight = 16;
+        const slotHeight = 10;
         const eventSlotHeight = slotHeight * 2;
         const slotFill = minutes => {
             const fullSlots = Math.floor(minutes / 30);
@@ -142,13 +142,14 @@ const NylasBufferTime = class {
         return (h("div", { class: "preview-container" }, createBeforeSlots(), h("div", { class: "event-slot", style: { height: `${eventSlotHeight}px` } }), createAfterSlots()));
     }
     render() {
-        const minuteOptions = Array.from({ length: 121 }, (_, i) => {
+        const minuteOptions = Array.from({ length: 24 }, (_, i) => {
+            const value = (i + 1) * 5;
             return {
-                label: i.toString(),
-                value: i,
+                label: value.toString(),
+                value: value,
             };
         });
-        return (h(Host, null, h("div", { class: "nylas-buffer-time", part: "nbt" }, h("div", { class: "header", part: "nbt__header" }, h("h3", null, "Buffer time"), h("p", null, "Add buffer time before and after the event.")), h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, "Before the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "before-buffer-time", name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0] }), h("span", null, "mins"))), h("div", { class: "nylas-buffer-time__row" }, h("label", null, "After the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "after-buffer-time", name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0] }), h("span", null, "mins")))), h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, h("h4", null, "PREVIEW"), this.renderPreview())))));
+        return (h(Host, null, h("div", { class: "nylas-buffer-time", part: "nbt" }, h("div", { class: "header", part: "nbt__header" }, h("h3", null, "Buffer time"), h("p", null, "Add buffer time before and after the event.")), h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, "Before the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "before-buffer-time", withSearch: false, name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0] }), h("span", null, "mins"))), h("div", { class: "nylas-buffer-time__row" }, h("label", null, "After the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "after-buffer-time", withSearch: false, name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0] }), h("span", null, "mins")))), h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, h("h4", null, "PREVIEW"), this.renderPreview())))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }