@nylas/web-elements 1.1.0-canary.19.c → 1.1.0-canary.19.e

package/dist/cjs/google-logo-icon_4.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7af03e3f.js');
 const registerComponent = require('./register-component-7d193b8d.js');
 const utils = require('./utils-fe7102aa.js');
-const constants = require('./constants-3e962931.js');
+const constants = require('./constants-7cc75333.js');
 require('./buffer-es6-370c0d93.js');
 require('./_commonjsHelpers-0a7b82d9.js');
 
@@ -19,7 +19,7 @@ const GoogleLogoIcon = class {
         this.height = '24';
     }
     render() {
-        return (index.h("svg", { key: '0e9d7d49a7c9b6cd2087805b88f0e5a2067dfaed', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'e97ac24bfe96bdba16a9709dde3ebc675e942d56', "clip-path": "url(#clip0_959_12452)" }, index.h("path", { key: '231167532157853cb95fddc85fa8cffcf1134ef4', d: "M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z", fill: "#4285F4" }), index.h("path", { key: '4f964a28a6b0894940c9d762a91db0c099f6c2c7', d: "M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z", fill: "#34A853" }), index.h("path", { key: '9ada4b2f2625f18538ff4455b1160efcfccbd646', d: "M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z", fill: "#FBBC05" }), index.h("path", { key: '6a260b3024a69fa930820a80a917152dc7ef52a7', d: "M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z", fill: "#EA4335" })), index.h("defs", { key: '56bc051b67a1bfa29ecaf64bac03ee1017836365' }, index.h("clipPath", { key: '8057800f9035048497e8198789e1e0b4dba1c64a', id: "clip0_959_12452" }, index.h("rect", { key: '6c0299822390d3433158d87c607fe9546e878eb0', width: 24, height: 24, fill: "white" })))));
+        return (index.h("svg", { key: '555521f048f2f287de7572071b43a53efeae7a10', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '2613493e10c2c2bd60da54b6c5ec674ae56d4bb0', "clip-path": "url(#clip0_959_12452)" }, index.h("path", { key: '8467e8ba5977837e472bec1d8a2bec6ed08bbb8f', d: "M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z", fill: "#4285F4" }), index.h("path", { key: '0a575c6bc170567883e793eebca58942de623a13', d: "M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z", fill: "#34A853" }), index.h("path", { key: '4c4e6d0e4d8555fd3f7dedc24ccc27a5ac3209ea', d: "M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z", fill: "#FBBC05" }), index.h("path", { key: 'd6dca8d2887f09a6d7a95b84238ec7615e3530c3', d: "M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z", fill: "#EA4335" })), index.h("defs", { key: '5ea0838d988413517f09c07e413d97db3b942375' }, index.h("clipPath", { key: 'dd0a31b400e699406e194711fcbc949d5f3c8304', id: "clip0_959_12452" }, index.h("rect", { key: '86cb4fe6ed9cada88e94516cf76ddaa3a2d62311', width: 24, height: 24, fill: "white" })))));
     }
 };
 GoogleLogoIcon.style = GoogleLogoIconStyle0;
@@ -34,35 +34,32 @@ const MicrosoftLogoIcon = class {
         this.height = '22';
     }
     render() {
-        return (index.h("svg", { key: '3dd5e1a94ca5889c14f7695c9077f9be0cbc4d00', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '381068331f74d7f1a06c0ca0cd9dfc2b58f72a10', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: '62c7be7371433602169a19fe2657e0a1635f516e', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '72464e489d4cfd78f016282a743a1000fb732368', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: 'd766c4d950ee3122cf4916b53ce5f630b52a30bb', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
+        return (index.h("svg", { key: 'da59f9b8e18c52e2ca12e97ce694b7abc30aea0d', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ef4d02c0f11fd9df3a3e1a781d2379526404c469', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: '9799ab150bbdee2cf4ec6275b2388fe2c00dd85e', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '65f7ee7dedd27844e342d2f1e7065814c6012c46', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: 'a21de9dcc8252feec5b07059371eba058b2d071c', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
     }
 };
 MicrosoftLogoIcon.style = MicrosoftLogoIconStyle0;
 
-function TabContents({ id, formState, activeTab, calendars }) {
+function TabContents({ id, formState, activeTab, calendars, currentUser }) {
     switch (activeTab) {
         case 'eventInfo':
             const eventTitle = formState.title;
             const eventDescription = formState.description;
             const eventDuration = parseInt(formState.duration);
             const location = formState.location;
+            const conferencing = formState.conferencing;
             return (index.h("div", { key: id },
                 index.h("nylas-event-info", null,
                     index.h("div", { slot: "inputs" },
                         index.h("nylas-event-title", { name: "title", eventTitle: eventTitle, exportparts: "net, net__title, net__dropdown-content" }),
                         index.h("nylas-event-duration", { name: "duration", eventDurationMinutes: eventDuration, exportparts: "ned, ned__dropdown, ned__dropdown-button, ned__dropdown-content, ned__input_dropdown, ned__input_dropdown-input, ned__input_dropdown-content" }),
-                        index.h("nylas-event-location", { name: "location", eventLocation: location, exportparts: "nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content" }),
+                        index.h("nylas-event-location", { name: "location", eventLocation: location, eventConferencing: conferencing, userProvider: currentUser.provider, exportparts: "nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content" }),
                         index.h("nylas-event-description", { name: "description", eventDescription: eventDescription, exportparts: "nedesc, nedesc__textarea" })))));
         case 'availability':
             const openHours = formState.availability.openHours;
             const timezone = formState.availability.timezone ? formState.availability.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
-            const organizer = formState.participants?.find(p => p.is_organizer);
-            const organizerEmail = organizer?.email ?? 'primary';
-            const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];
-            const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;
             return (index.h("div", { key: id },
-                index.h("nylas-booking-calendar-picker", { name: "booking-calendar", calendars: calendars ?? [], defaultBookingCalendar: bookingCalendar, exportparts: 'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content' }),
-                index.h("nylas-calendar-picker", { name: "calendars", calendars: calendars ?? [], defaultSelectedCalendars: selectedCalendars, exportparts: 'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content' }),
+                index.h("nylas-participant-booking-calendars", { name: "participant-booking-calendars", participants: formState.participants, calendars: calendars }),
+                index.h("nylas-connected-calendars", { name: "connected-calendars", participants: formState.participants }),
                 index.h("nylas-availability-picker", { name: "availability", openHours: openHours, defaultTimezone: timezone, exportparts: 'nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times' })));
         case 'bookingOptions':
             return (index.h("div", { key: id },
@@ -79,10 +76,14 @@ function TabContents({ id, formState, activeTab, calendars }) {
             return (index.h("div", { key: id },
                 index.h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" }),
                 index.h("nylas-participants-custom-availability", { name: "participant-custom-availability", participants: formState.participants, exportparts: "npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider" })));
+        case 'bookingForm':
+            const additionalFields = Object.entries(formState.additionalFields).map(([id, field]) => ({ key: id, ...field }));
+            return (index.h("div", { key: id },
+                index.h("nylas-booking-form-config", { name: "additional-fields", additonalFields: additionalFields })));
     }
 }
 
-const nylasEditorTabsCss = ".sc-nylas-editor-tabs-h{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}.scheduler-editor.sc-nylas-editor-tabs{display:flex;flex-direction:column}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{height:554px;display:grid;grid-template-columns:minmax(224px, 25%) 1fr}@media screen and (max-width: 768px){.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:table-column-group;height:auto}}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs{display:flex;flex-direction:column;border-right:1px solid var(--nylas-base-200);background-color:var(--nylas-base-25)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--nylas-base-900);background:var(--nylas-base-0);border:none;height:56px;font-family:var(--nylas-font-family);font-size:16px;font-weight:500;line-height:24px;cursor:pointer}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs:not(:first-of-type){margin-top:0.25rem}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.active.sc-nylas-editor-tabs{font-weight:600;background:var(--nylas-base-0);color:var(--nylas-primary);border-left:4px solid var(--nylas-primary);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.0588235294);box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs{max-width:692px;overflow-y:auto}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs{width:inherit}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs{display:flex;flex-direction:column;gap:1rem}.footer.sc-nylas-editor-tabs{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs{flex-direction:column;height:auto}}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .preview.sc-nylas-editor-tabs{margin-top:1rem;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{display:flex;justify-content:flex-end;align-items:center;justify-self:flex-end;gap:1rem}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{flex-direction:column-reverse;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.sc-nylas-editor-tabs{max-width:524px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.unsaved-changes.sc-nylas-editor-tabs{color:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.saved-changes.sc-nylas-editor-tabs{color:var(--nylas-success)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error.sc-nylas-editor-tabs{color:var(--nylas-error)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error-full-width.sc-nylas-editor-tabs{max-width:660px}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button-component.sc-nylas-editor-tabs{width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;width:148px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:hover{background:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:active{background:var(--nylas-base-800)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs span.sc-nylas-editor-tabs{display:flex;align-items:center;justify-content:center;gap:0.5rem}";
+const nylasEditorTabsCss = ".sc-nylas-editor-tabs-h{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}.scheduler-editor.sc-nylas-editor-tabs{display:flex;flex-direction:column}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{height:554px;display:grid;grid-template-columns:minmax(224px, 25%) 1fr}@media screen and (max-width: 768px){.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:table-column-group;height:auto}}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs{display:flex;flex-direction:column;border-right:1px solid var(--nylas-base-200);background-color:var(--nylas-base-25)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--nylas-base-900);background:var(--nylas-base-0);border:none;height:56px;font-family:var(--nylas-font-family);font-size:16px;font-weight:500;line-height:24px;cursor:pointer}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs:not(:first-of-type){margin-top:0.25rem}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.active.sc-nylas-editor-tabs{font-weight:600;background:var(--nylas-base-0);color:var(--nylas-primary);border-left:4px solid var(--nylas-primary);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.0588235294);box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.hide.sc-nylas-editor-tabs{display:none}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs{max-width:692px;overflow-y:auto}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs{width:inherit}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs{display:flex;flex-direction:column;gap:1rem}.footer.sc-nylas-editor-tabs{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs{flex-direction:column;height:auto}}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .preview.sc-nylas-editor-tabs{margin-top:1rem;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{display:flex;justify-content:flex-end;align-items:center;justify-self:flex-end;gap:1rem}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{flex-direction:column-reverse;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.sc-nylas-editor-tabs{max-width:524px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.unsaved-changes.sc-nylas-editor-tabs{color:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.saved-changes.sc-nylas-editor-tabs{color:var(--nylas-success)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error.sc-nylas-editor-tabs{color:var(--nylas-error)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error-full-width.sc-nylas-editor-tabs{max-width:660px}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button-component.sc-nylas-editor-tabs{width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;width:148px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:hover{background:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:active{background:var(--nylas-base-800)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs span.sc-nylas-editor-tabs{display:flex;align-items:center;justify-content:center;gap:0.5rem}";
 const NylasEditorTabsStyle0 = nylasEditorTabsCss;
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -114,23 +115,27 @@ const NylasEditorTabs = class {
             this.formSubmitted.emit();
             const valid = this.formRef.checkValidity();
             if (!valid) {
+                this.error = this.formRef.validationMessage || 'Please fix the form errors.';
                 return;
             }
             this.isLoading = true;
             this.hasUnsavedChanges = false;
             const formState = this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, participantOpenHours, } = formState;
+            const { title, description, duration, availability, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, participantOpenHours, additionalFields, participantCalendars, conferencing, participantBookingCalendars, } = formState;
             const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);
+            const organizerCalendars = participantCalendars && organizer?.email ? participantCalendars[organizer?.email] : [];
+            const organizerBookingCalendar = organizer?.booking?.calendar_id || bookingCalendar;
             const durationMinutes = duration ? parseInt(duration) : 30;
             const participantsList = participants && participants?.length > 0
                 ? participants
                 : [
                     {
-                        name: organizer?.name ?? this.currentUser?.name ?? organizer?.email ?? this.currentUser?.email ?? '',
+                        name: organizer?.name ?? this.currentUser?.name ?? '',
                         email: organizer?.email ?? this.currentUser?.email ?? '',
                         is_organizer: true,
+                        timezone: availability?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
                         availability: {
-                            calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
+                            calendar_ids: organizerCalendars.length ? organizerCalendars : ['primary'],
                             open_hours: [],
                         },
                         booking: {
@@ -156,24 +161,29 @@ const NylasEditorTabs = class {
                     ...participantsList?.map(p => {
                         if (p.is_organizer) {
                             return {
-                                name: p.name ?? p.email,
+                                name: p.name ?? '',
                                 email: p.email,
                                 is_organizer: true,
+                                timezone: participantOpenHours?.[p.email]?.[0]?.timezone ?? p.availability?.open_hours?.[0]?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
                                 availability: {
-                                    calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
+                                    calendar_ids: organizerCalendars.length ? organizerCalendars : ['primary'],
                                     open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
                                 },
                                 booking: {
-                                    calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
+                                    calendar_id: organizerBookingCalendar ? organizerBookingCalendar : 'primary',
                                 },
                             };
                         }
                         return {
                             ...p,
-                            availability: {
-                                calendar_ids: p.availability?.calendar_ids ?? ['primary'],
-                                open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
-                            },
+                            timezone: participantOpenHours?.[p.email]?.[0]?.timezone ?? p.availability?.open_hours?.[0]?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+                            availability: p.availability
+                                ? {
+                                    calendar_ids: participantCalendars?.[p.email] ?? p.availability?.calendar_ids ?? ['primary'],
+                                    open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
+                                }
+                                : undefined,
+                            booking: participantBookingCalendars?.[p.email] ? { calendar_id: participantBookingCalendars?.[p.email] } : undefined,
                         };
                     }),
                 ],
@@ -183,6 +193,7 @@ const NylasEditorTabs = class {
                     location: location?.toString() ?? '',
                     booking_type: bookingType?.toString() ?? 'booking',
                     timezone: availability?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+                    conferencing: conferencing,
                 },
                 scheduler: {
                     cancellation_policy: cancellationPolicy ?? '',
@@ -192,6 +203,7 @@ const NylasEditorTabs = class {
                     hide_additional_guests: additionalGuestsHidden ?? false,
                     hide_cancellation_options: hideCancellationOptions ?? false,
                     hide_rescheduling_options: hideReschedulingOptions ?? false,
+                    additional_fields: additionalFields,
                 },
             };
             const configObjectWithDeveloperSettings = utils.mergeDeep(configObject, this.selectedConfiguration);
@@ -203,13 +215,48 @@ const NylasEditorTabs = class {
                     this.changesSaved = false;
                 }, 5000);
             };
+            const hasError = this.checkForClientSideErrors(finalConfig);
+            if (hasError) {
+                return;
+            }
             this.schedulerConfigChanged.emit({ config: finalConfig, resetLoadingState, setError: this.setError, action: this.action });
         };
+        this.checkForClientSideErrors = config => {
+            let hasError = false;
+            let errorMessage = '';
+            const additionalFields = config.scheduler?.additional_fields;
+            if (additionalFields) {
+                errorMessage = 'Booking form error: ';
+                Object.entries(additionalFields).forEach(entry => {
+                    const field = entry[1];
+                    if (field.label === '') {
+                        errorMessage += `Label is required for field of type ${field.type}.`;
+                        hasError = true;
+                        return;
+                    }
+                    if (field.options) {
+                        for (const option of field.options) {
+                            if (option === '') {
+                                errorMessage += `Empty option detected inside ${field.label} of type ${field.type}.`;
+                                hasError = true;
+                                break;
+                            }
+                        }
+                    }
+                });
+            }
+            if (hasError) {
+                this.isLoading = false;
+                this.setError(new Error(errorMessage));
+            }
+            return hasError;
+        };
         this.calendars = undefined;
         this.selectedConfiguration = undefined;
         this.currentUser = undefined;
         this.schedulerPreviewLink = '';
         this.mode = 'app';
+        this.hideEditorTabs = [];
         this.action = 'create';
         this.activeTab = 'eventInfo';
         this.isLoading = false;
@@ -261,6 +308,8 @@ const NylasEditorTabs = class {
                 timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
                 openHours: config?.availability?.availability_rules?.default_open_hours ?? constants.DEFAULT_OPEN_HOURS,
             },
+            additionalFields: config?.scheduler?.additional_fields ?? {},
+            conferencing: config?.event_booking?.conferencing ?? {},
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
             bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',
@@ -272,12 +321,22 @@ const NylasEditorTabs = class {
             minCancellationNotice: config?.scheduler?.min_cancellation_notice ?? 0,
             minBookingNotice: config?.scheduler?.min_booking_notice ?? 60,
             timeslotInterval: {
-                interval: config?.availability?.interval_minutes ?? config?.availability?.duration_minutes ?? 10,
+                interval: config?.availability?.interval_minutes ?? config?.availability?.duration_minutes,
                 roundTo: config?.availability?.round_to,
             },
             additionalGuestsHidden: config?.scheduler?.hide_additional_guests ?? false,
             hideCancellationOptions: config?.scheduler?.hide_cancellation_options ?? false,
             hideReschedulingOptions: config?.scheduler?.hide_rescheduling_options ?? false,
+            participantBookingCalendars: config?.participants?.reduce((acc, p) => {
+                if (p.booking?.calendar_id) {
+                    acc[p.email] = p.booking?.calendar_id;
+                }
+                return acc;
+            }) ?? {},
+            participantCalendars: config?.participants?.reduce((acc, p) => {
+                acc[p.email] = p.availability?.calendar_ids;
+                return acc;
+            }, {}) ?? {},
         };
     }
     setFormState(value, key) {
@@ -297,15 +356,18 @@ const NylasEditorTabs = class {
             case 'participants':
                 this.formState.participants = JSON.parse(value.toString());
                 break;
-            case 'calendars':
-                this.formState.calendarIds = value.toString().split(',');
-                break;
             case 'booking-calendar':
                 this.formState.bookingCalendar = value.toString();
                 break;
+            case 'participant-booking-calendars':
+                this.formState.participantBookingCalendars = JSON.parse(value.toString());
+                break;
             case 'location':
                 this.formState.location = value.toString();
                 break;
+            case 'conference':
+                this.formState.conferencing = JSON.parse(value.toString());
+                break;
             case 'booking-type':
                 this.formState.bookingType = value.toString();
                 break;
@@ -337,6 +399,12 @@ const NylasEditorTabs = class {
                 const participantOpenHours = JSON.parse(value.toString());
                 this.formState.participantOpenHours = participantOpenHours;
                 break;
+            case 'additional-fields':
+                this.formState.additionalFields = value;
+                break;
+            case 'connected-calendars':
+                this.formState.participantCalendars = JSON.parse(value.toString());
+                break;
         }
     }
     updateFormState() {
@@ -352,25 +420,27 @@ const NylasEditorTabs = class {
         this.updateFormState();
         this.activeTab = tabName;
     }
+    hideTab(tab) {
+        return this.hideEditorTabs?.includes(tab) || false;
+    }
     render() {
         utils.debug('[nylas-editor-tabs]', 'render', this.formState);
-        const showParticipantsTab = localStorage.getItem('nylas') === 'Nylas Developer';
-        return (index.h(index.Host, { key: '13aad28cba8de3b30e60d7a26849d30ef2578bb5' }, index.h("form", { key: '31e835f74ca7728d597148a18c840e0791c34c89', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (index.h("div", { class: "form-contents" }, index.h("div", { class: "tabs" }, index.h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, index.h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), index.h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, index.h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), index.h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, index.h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (index.h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, index.h("people-icon", { width: "16", height: "16" }), "Participants"))), index.h("div", { class: "tab-content" }, index.h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (index.h("slot", null)), index.h("div", { key: 'e83274ed2d92f179c90564a21f80ba869d1033a2', class: "footer" }, index.h("div", { key: 'c661b7a0c024f7b8f1c916b55bc5784a10ee9958', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (index.h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        return (index.h(index.Host, { key: '6636487c6ce64dddbcb5b393c9240fae3dacab62' }, index.h("form", { key: '10a616e5d8c6b19d650bbbaa26bdcb178b050161', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (index.h("div", { class: "form-contents" }, index.h("div", { class: "tabs" }, index.h("button", { class: { tab: true, active: this.activeTab == 'eventInfo', hide: this.hideTab('eventInfo') }, part: "editortab__event-info", onClick: e => this.setActiveTab(e, 'eventInfo') }, index.h("calendar-info-icon", { width: "16", height: "16" }), "Event info"), index.h("button", { class: { tab: true, active: this.activeTab == 'availability', hide: this.hideTab('availability') }, part: "editortab__availability", onClick: e => this.setActiveTab(e, 'availability') }, index.h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), index.h("button", { class: { tab: true, active: this.activeTab == 'participants', hide: this.hideTab('participants') }, part: "editortab__participants", onClick: e => this.setActiveTab(e, 'participants') }, index.h("people-icon", { width: "16", height: "16" }), "Participants"), index.h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions', hide: this.hideTab('bookingOptions') }, part: "editortab__booking-options", onClick: e => this.setActiveTab(e, 'bookingOptions') }, index.h("flow-icon", { width: "16", height: "16" }), "Booking options"), index.h("button", { class: { tab: true, active: this.activeTab == 'bookingForm', hide: this.hideTab('bookingForm') }, part: "editortab__booking-form", onClick: e => this.setActiveTab(e, 'bookingForm') }, this.activeTab == 'bookingForm' ? index.h("calendar-agenda-fill-icon", { width: "16", height: "16" }) : index.h("calendar-agenda-icon", { width: "16", height: "16" }), "Booking form")), index.h("div", { class: "tab-content" }, index.h(TabContents, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (index.h("slot", null)), index.h("div", { key: '280c0c7aeb9199c53586cc211ae473bbe23efc88', class: "footer" }, index.h("div", { key: '8ae601f7812e3a0ad346dea9d79bde817c477fcd', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (index.h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
                     window.open(utils.parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), index.h("div", { key: '78cb89dbbb6e124aaddf9b486834e81ab10ea70a', class: "buttons" }, index.h("p", { key: 'e07f651a081607471d067aa05a3858446725a6db', class: {
+            }, variant: 'basic' }, "Preview"))), index.h("div", { key: '9442375eebbac6e0edf76ccd81be5607c3427120', class: "buttons" }, index.h("p", { key: '3bac06ac6145e732ee05ed8b953a4bac8dc123d3', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
                 'error': this.error !== '',
                 'error-full-width': this.error !== '' && this.action === 'create',
-            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), index.h("button-component", { key: '66500ec7f10c2a5ecb6d98647766e2f31f030fe4', type: "button", disabled: this.isLoading, clickHandler: event => {
+            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), index.h("button-component", { key: 'b6347b69d1a624d9dd65e2831a0a7ae92bfd95b6', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
                 this.error = '';
-            }, variant: 'basic' }, "Cancel"), index.h("button-component", { key: 'a816e4c9d7d1f53e09edf635f06c9a177bdcb15a', type: "submit", disabled: this.isLoading }, this.isLoading ? (index.h("span", null, "Saving", index.h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+            }, variant: 'basic' }, "Back"), index.h("button-component", { key: '28222fdd8258c009690d25ccbf05ad86abcc1cd3', type: "submit", disabled: this.isLoading }, this.isLoading ? (index.h("span", null, "Saving", index.h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -384,6 +454,7 @@ __decorate$1([
             ['schedulerConfig.calendars', 'calendars'],
             ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
             ['schedulerConfig.currentUser', 'currentUser'],
+            ['schedulerConfig.hideEditorTabs', 'hideEditorTabs'],
         ]),
         eventToProps: {
             schedulerConfigChanged: async (event, nylasSchedulerConfigConnector) => {
@@ -425,7 +496,7 @@ __decorate$1([
 ], NylasEditorTabs.prototype, "render", null);
 NylasEditorTabs.style = NylasEditorTabsStyle0;
 
-const nylasListConfigurationsCss = ":host{display:grid;grid-auto-flow:row;width:100%;font-family:inherit;font-optical-sizing:auto;--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}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem}@media screen and (max-width: 768px){.header{flex-direction:column;gap:0.5rem;align-items:unset}}.header h2{margin:0;font-size:1.25rem;color:var(--nylas-base-900);font-weight:600}.header p{margin:0;font-size:1rem;color:var(--nylas-base-700)}.header .actions{justify-self:end}@media screen and (max-width: 768px){.header .actions{width:100%}}.configurations{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-0);height:100%;display:flex;overflow-y:auto}.configurations table{width:100%;border-spacing:0;border-collapse:collapse;font-family:inherit;height:max-content}.configurations table.no-configurations{height:100%}.configurations table tr{color:var(--nylas-base-800);border-bottom:1px solid var(--nylas-base-200);font-family:inherit}.configurations table tr:last-of-type{border-bottom:0}.configurations table tr.hide{display:none}.configurations table th{font-weight:600;text-transform:uppercase;font-size:14px;line-height:20px}.configurations table th.actions-header{text-align:right}.configurations table tr.no-configurations td>div{display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column;padding:var(--nylas-border-radius-3x)}.configurations table tr.no-configurations td>div h3{margin:0 0 1rem 0;color:var(--nylas-base-700)}.configurations table tr.no-configurations td>div p{margin:0 0 1rem 0;color:var(--nylas-base-600)}.configurations table tr.no-configurations td>div calendar-icon{margin-bottom:1rem;color:var(--nylas-base-200)}.configurations table th,.configurations table td{text-align:left;padding:1rem;font-family:inherit}.configurations table .actions{text-align:right}.configurations table .actions{display:flex;justify-content:flex-end;gap:1rem}@media screen and (max-width: 768px){.configurations table .actions{flex-direction:column;gap:0.5rem}}.configurations table .title{display:flex;flex-direction:column}.configurations table .title .config-event-title{font-weight:600}.configurations table .title .config-event-description{font-size:0.75rem}.error-container{margin-top:1.5rem}.error-container .error{color:var(--nylas-error);padding:0.5rem 0;margin:1rem 0 0}button-component#copy button{width:108px}";
+const nylasListConfigurationsCss = ":host{display:grid;grid-auto-flow:row;width:100%;font-family:inherit;font-optical-sizing:auto;--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}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem}@media screen and (max-width: 768px){.header{flex-direction:column;gap:0.5rem;align-items:unset}}.header h2{margin:0;font-size:1.25rem;color:var(--nylas-base-900);font-weight:600}.header p{margin:0;font-size:1rem;color:var(--nylas-base-700)}.header .actions{justify-self:end}@media screen and (max-width: 768px){.header .actions{width:100%}}.configurations{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-0);height:100%;display:flex;flex-direction:column;position:relative;overflow-y:auto}.configurations table{width:100%;border-spacing:0;border-collapse:collapse;font-family:inherit;height:max-content}.configurations table.no-configurations{height:100%}.configurations table tr{color:var(--nylas-base-800);border-bottom:1px solid var(--nylas-base-200);font-family:inherit}.configurations table tr.hide{display:none}.configurations table th{font-weight:600;text-transform:uppercase;font-size:14px;line-height:20px}.configurations table th.actions-header{text-align:right}.configurations table tr.no-configurations td>div{display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column;padding:var(--nylas-border-radius-3x)}.configurations table tr.no-configurations td>div h3{margin:0 0 1rem 0;color:var(--nylas-base-700)}.configurations table tr.no-configurations td>div p{margin:0 0 1rem 0;color:var(--nylas-base-600)}.configurations table tr.no-configurations td>div calendar-icon{margin-bottom:1rem;color:var(--nylas-base-200)}.configurations table th,.configurations table td{text-align:left;padding:1rem;font-family:inherit}.configurations table .actions{text-align:right}.configurations table .actions{display:flex;justify-content:flex-end;gap:1rem}@media screen and (max-width: 768px){.configurations table .actions{flex-direction:column;gap:0.5rem}}.configurations table .title{display:flex;flex-direction:column}.configurations table .title .config-event-title{font-weight:600}.configurations table .title .config-event-description{font-size:0.75rem}.configurations .pagination{padding:1rem;position:sticky;top:100%;display:flex;justify-content:flex-end;gap:0.5rem;background:white;width:calc(100% - 2rem);z-index:2}.configurations .pagination td.arrows{display:flex;justify-content:flex-end;gap:0.5rem}.configurations .pagination button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background-color:transparent;color:var(--nylas-base-800);cursor:pointer}.configurations .pagination button:hover:not(:disabled){border:1px solid var(--nylas-primary)}.configurations .pagination button:active{border:1px solid var(--nylas-base-800)}.configurations .pagination button:disabled{border:1px solid var(--nylas-base-100);background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.configurations .pagination button.right{transform:rotate(180deg)}.error-container{margin-top:1.5rem}.error-container .error{color:var(--nylas-error);padding:0.5rem 0;margin:1rem 0 0}button-component#copy button{width:108px}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){display:block;height:48px;padding:0px 16px 8px}@media screen and (max-width: 768px){select-dropdown::part(sd_dropdown-button){width:92px}}select-dropdown::part(sd_dropdown-content){width:120px;right:0}select-dropdown::part(sd_dropdown-labelhtml){display:flex;gap:0.5rem;align-items:center;color:var(--nylas-base-900)}select-dropdown::part(sd_dropdown-labelhtml):hover{color:var(--nylas-primary)}";
 const NylasListConfigurationsStyle0 = nylasListConfigurationsCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -451,9 +522,22 @@ const NylasListConfigurations = class {
         this.deleteButtonClick = index.createEvent(this, "deleteButtonClick", 7);
         this.configurations = [];
         this.schedulerPreviewLink = '';
+        this.listConfigurationsNextCursor = undefined;
         this.state = 'loading';
         this.error = '';
-        this.copiedButtonIndex = -1;
+        this.currentCursor = null;
+        this.previousCursors = [];
+        this.disableNextPageButton = false;
+    }
+    listConfigurationsNextCursorChangedHandler(newVal, oldVal) {
+        if (!newVal || newVal === oldVal) {
+            if (newVal === null) {
+                this.disableNextPageButton = true;
+            }
+            return;
+        }
+        this.disableNextPageButton = false;
+        this.currentCursor = newVal;
     }
     connectedCallback() {
         utils.debug('[nylas-list-configurations]', 'connectedCallback');
@@ -466,11 +550,30 @@ const NylasListConfigurations = class {
     }
     componentDidLoad() {
         utils.debug('[nylas-list-configurations]', 'componentDidLoad');
-        this.initListConfigurations.emit(this.host);
+        this.initListConfigurations.emit({
+            host: this.host,
+        });
     }
     disconnectedCallback() {
         utils.debug('[nylas-list-configurations]', 'disconnectedCallback');
     }
+    async handleNylasFormDropdownChanged(event) {
+        utils.debug('[nylas-list-configurations]', 'handleNylasFormDropdownChanged', event.detail);
+        const { value } = event.detail;
+        const [action, index] = value.split('-');
+        event.preventDefault();
+        switch (action) {
+            case 'delete':
+                this.deleteButtonClick.emit({ host: this.host, configuration: this.configurations[index] });
+                break;
+            case 'preview':
+                window.open(utils.parsePreviewLink(this.schedulerPreviewLink, this.configurations[index]), '_blank');
+                break;
+            case 'copy':
+                await navigator.clipboard.writeText(utils.parsePreviewLink(this.schedulerPreviewLink, this.configurations[index]));
+                break;
+        }
+    }
     async getState() {
         return this.state;
     }
@@ -485,6 +588,45 @@ const NylasListConfigurations = class {
         const minutes = duration % 60;
         return `${hours ? hours : ''} ${hours ? `${hours > 1 ? 'hours' : 'hour'}` : ''} ${minutes ? minutes : ''} ${minutes ? `${minutes > 1 ? 'mins' : 'min'}` : ''}`;
     }
+    getActionLabelHTML(action) {
+        const actionStyle = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+        };
+        const dangerStyle = {
+            color: 'var(--nylas-error)',
+        };
+        switch (action) {
+            case 'preview':
+                return (index.h("span", { style: actionStyle }, index.h("eye-icon", { width: "16", height: "16" }), "Preview"));
+            case 'copy':
+                return (index.h("span", { style: actionStyle }, index.h("copy-icon", { width: "16", height: "16" }), "Copy"));
+            case 'delete':
+                return (index.h("span", { style: { ...actionStyle, ...dangerStyle } }, index.h("delete-icon", { width: "15", height: "17" }), "Delete"));
+            default:
+                return '';
+        }
+    }
+    previousPageClickedHandler() {
+        if (this.previousCursors.length === 0)
+            return;
+        this.currentCursor = this.previousCursors.pop() || null;
+        const prevCursor = this.previousCursors[this.previousCursors.length - 1] || undefined;
+        this.initListConfigurations.emit({
+            host: this.host,
+            cursor: prevCursor,
+        });
+    }
+    nextPageClickedHandler() {
+        if (!this.currentCursor)
+            return;
+        this.previousCursors = [...this.previousCursors, this.currentCursor];
+        this.initListConfigurations.emit({
+            host: this.host,
+            cursor: this.currentCursor,
+        });
+    }
     render() {
         return (index.h(index.Host, null, index.h("div", { class: "header" }, index.h("div", { class: "description" }, index.h("h2", null, "All scheduling pages"), index.h("p", null, "Create, edit and manage all your scheduling pages.")), this.configurations && this.configurations.length > 0 && (index.h("div", { class: "actions" }, index.h("button-component", { clickHandler: () => {
                 this.createButtonClick.emit(this.host);
@@ -496,35 +638,34 @@ const NylasListConfigurations = class {
                 this.createButtonClick.emit(this.host);
             } }, "Create new"))))), this.state !== 'loading' &&
             this.configurations.map((config, i) => {
-                return (index.h("tr", { key: config.id }, index.h("td", null, index.h("div", { class: "title" }, index.h("span", { class: 'config-event-title' }, config.event_booking.title), index.h("span", { class: 'config-event-description' }, config.event_booking.description))), index.h("td", null, index.h("div", null, this.getDurationString(config.availability.duration_minutes))), index.h("td", null, index.h("div", { class: "actions" }, index.h("button-component", { variant: 'basic', id: "copy", key: `copy-${i}`, clickHandler: async (event) => {
-                        event.preventDefault();
-                        const link = utils.parsePreviewLink(this.schedulerPreviewLink, config);
-                        await navigator.clipboard.writeText(link);
-                        this.copiedButtonIndex = i;
-                        setTimeout(() => {
-                            this.copiedButtonIndex = -1;
-                        }, 3000);
-                    } }, this.copiedButtonIndex === i ? 'Copied!' : 'Copy link'), index.h("button-component", { variant: 'basic', key: `edit-${i}`, clickHandler: event => {
+                return (index.h("tr", { key: config.id }, index.h("td", null, index.h("div", { class: "title" }, index.h("span", { class: 'config-event-title' }, config.event_booking.title), index.h("span", { class: 'config-event-description' }, config.event_booking.description))), index.h("td", null, index.h("div", null, this.getDurationString(config.availability.duration_minutes))), index.h("td", null, index.h("div", { class: "actions" }, index.h("button-component", { variant: 'basic', key: `edit-${i}`, clickHandler: event => {
                         event.preventDefault();
                         this.editButtonClick.emit({ host: this.host, configuration: config });
-                    } }, "Edit"), index.h("button-component", { variant: 'basic', key: `delete-${i}`, clickHandler: event => {
-                        event.preventDefault();
-                        this.deleteButtonClick.emit({ host: this.host, configuration: config });
-                    } }, "Delete")))));
-            }))), this.state === 'error' && (index.h("div", { class: "error-container" }, index.h("p", { class: 'error' }, this.error)))));
+                    } }, index.h("edit-icon", { width: "16", height: "16" }), "Edit"), index.h("select-dropdown", { name: "actions", options: [
+                        { value: `preview-${i}`, label: 'Preview', labelHTML: this.getActionLabelHTML('preview') },
+                        { value: `copy-${i}`, label: 'Copy link', labelHTML: this.getActionLabelHTML('copy') },
+                        { value: `delete-${i}`, label: 'Delete', labelHTML: this.getActionLabelHTML('delete') },
+                    ], defaultSelectedOption: { value: '', label: '' }, dropdownButtonText: "...", withSearch: false, withChevron: false, exportparts: "sd_dropdown: actions__dropdown, sd_dropdown-button: actions__dropdown-button, sd_dropdown-content: actions__dropdown-content" })))));
+            })), index.h("div", { class: "pagination" }, index.h("button", { class: "arrow left", onClick: () => this.previousPageClickedHandler(), disabled: this.previousCursors.length <= 0 }, index.h("chevron-icon", null)), index.h("button", { class: "arrow right", onClick: () => this.nextPageClickedHandler(), disabled: this.disableNextPageButton }, index.h("chevron-icon", null)))), this.state === 'error' && (index.h("div", { class: "error-container" }, index.h("p", { class: 'error' }, this.error)))));
     }
     get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "listConfigurationsNextCursor": ["listConfigurationsNextCursorChangedHandler"]
+    }; }
 };
 __decorate([
     registerComponent.RegisterComponent({
         name: 'nylas-list-configurations',
-        stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),
+        stateToProps: new Map([
+            ['schedulerConfig.configurations', 'configurations'],
+            ['schedulerConfig.listConfigurationsNextCursor', 'listConfigurationsNextCursor'],
+        ]),
         localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),
         eventToProps: {
             initListConfigurations: async (event, connector) => {
-                const host = event.detail;
+                const { host, cursor } = event.detail;
                 await host.setState('loading');
-                const [data, error] = await connector.schedulerConfig.getConfigurations();
+                const [data, error] = await connector.schedulerConfig.getConfigurations(cursor);
                 if (!data && error && error.message) {
                     await host.setState('error');
                     await host.setError(error.message);