@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

package/dist/components/nylas-editor-tabs2.js

@@ -1,35 +1,77 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
 import { d as debug } from './utils.js';
-import { d as defineCustomElement$r } from './add-circle.js';
-import { d as defineCustomElement$q } from './calendar-info.js';
-import { d as defineCustomElement$p } from './calendar-patterns.js';
-import { d as defineCustomElement$o } from './chevron.js';
-import { d as defineCustomElement$n } from './close.js';
-import { d as defineCustomElement$m } from './flow.js';
-import { d as defineCustomElement$l } from './globe.js';
-import { d as defineCustomElement$k } from './info.js';
-import { d as defineCustomElement$j } from './loading.js';
-import { d as defineCustomElement$i } from './location.js';
-import { d as defineCustomElement$h } from './location-off.js';
-import { d as defineCustomElement$g } from './multi-select-dropdown2.js';
-import { d as defineCustomElement$f } from './nylas-availability-picker2.js';
-import { d as defineCustomElement$e } from './nylas-booking-calendar-picker2.js';
-import { d as defineCustomElement$d } from './nylas-buffer-time2.js';
-import { d as defineCustomElement$c } from './nylas-calendar-picker2.js';
-import { d as defineCustomElement$b } from './nylas-custom-booking-flow2.js';
-import { d as defineCustomElement$a } from './nylas-event-description2.js';
-import { d as defineCustomElement$9 } from './nylas-event-duration2.js';
-import { d as defineCustomElement$8 } from './nylas-event-info2.js';
-import { d as defineCustomElement$7 } from './nylas-event-title2.js';
-import { d as defineCustomElement$6 } from './nylas-form-card2.js';
-import { d as defineCustomElement$5 } from './nylas-location-component2.js';
-import { d as defineCustomElement$4 } from './nylas-time-window-picker2.js';
-import { d as defineCustomElement$3 } from './search.js';
-import { d as defineCustomElement$2 } from './select-dropdown2.js';
+import { d as defineCustomElement$w } from './add-circle.js';
+import { d as defineCustomElement$v } from './button-component2.js';
+import { d as defineCustomElement$u } from './calendar-info.js';
+import { d as defineCustomElement$t } from './calendar-patterns.js';
+import { d as defineCustomElement$s } from './chevron.js';
+import { d as defineCustomElement$r } from './close.js';
+import { d as defineCustomElement$q } from './flow.js';
+import { d as defineCustomElement$p } from './globe.js';
+import { d as defineCustomElement$o } from './info.js';
+import { d as defineCustomElement$n } from './loading.js';
+import { d as defineCustomElement$m } from './location.js';
+import { d as defineCustomElement$l } from './location-off.js';
+import { d as defineCustomElement$k } from './multi-select-dropdown2.js';
+import { d as defineCustomElement$j } from './nylas-availability-picker2.js';
+import { d as defineCustomElement$i } from './nylas-booking-calendar-picker2.js';
+import { d as defineCustomElement$h } from './nylas-buffer-time2.js';
+import { d as defineCustomElement$g } from './nylas-calendar-picker2.js';
+import { d as defineCustomElement$f } from './nylas-custom-booking-flow2.js';
+import { d as defineCustomElement$e } from './nylas-event-description2.js';
+import { d as defineCustomElement$d } from './nylas-event-duration2.js';
+import { d as defineCustomElement$c } from './nylas-event-info2.js';
+import { d as defineCustomElement$b } from './nylas-event-limits2.js';
+import { d as defineCustomElement$a } from './nylas-event-title2.js';
+import { d as defineCustomElement$9 } from './nylas-form-card2.js';
+import { d as defineCustomElement$8 } from './nylas-limit-future-bookings2.js';
+import { d as defineCustomElement$7 } from './nylas-location-component2.js';
+import { d as defineCustomElement$6 } from './nylas-min-cancellation-notice2.js';
+import { d as defineCustomElement$5 } from './nylas-time-window-picker2.js';
+import { d as defineCustomElement$4 } from './search.js';
+import { d as defineCustomElement$3 } from './select-dropdown2.js';
+import { d as defineCustomElement$2 } from './time-period-selector2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
-const nylasEditorTabsCss = ":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}.scheduler-editor{display:flex;flex-direction:column}.scheduler-editor .form-contents{display:grid;grid-template-columns:minmax(224px, 25%) 1fr}@media screen and (max-width: 768px){.scheduler-editor .form-contents{display:table-column-group}}.scheduler-editor .form-contents .tabs{display:flex;flex-direction:column;border-right:1px solid var(--nylas-base-200);background-color:var(--nylas-base-25)}.scheduler-editor .form-contents .tabs .tab{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 .form-contents .tabs .tab:not(:first-of-type){margin-top:0.25rem}.scheduler-editor .form-contents .tabs .tab.active{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 .form-contents .tab-content{max-width:692px}.scheduler-editor .form-contents .tab-content nylas-event-info div[slot=inputs]{display:flex;flex-direction:column;gap:1rem}.footer{display:flex;justify-content:flex-end;align-items:center;gap:1rem;height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}.footer .unsaved-changes{color:var(--nylas-base-600)}.footer .saved-changes{color:var(--nylas-success)}.footer button{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 button:hover{background:var(--nylas-base-600)}.footer button:active{background:var(--nylas-base-800)}.footer button:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer button span{display:flex;align-items:center;justify-content:center;gap:0.5rem}";
+function TabContents({ id, formState, activeTab, calendars }) {
+    switch (activeTab) {
+        case 'eventInfo':
+            const eventTitle = formState.title;
+            const eventDescription = formState.description;
+            const eventDuration = parseInt(formState.duration);
+            const location = formState.location;
+            return (h("div", { key: id },
+                h("nylas-event-info", null,
+                    h("div", { slot: "inputs" },
+                        h("nylas-event-title", { name: "title", eventTitle: eventTitle, exportparts: "net, net__title, net__dropdown-content" }),
+                        h("nylas-event-duration", { name: "duration", eventDurationMinutes: eventDuration, exportparts: "ned, ned__input, ned__dropdown, ned__dropdown-button, ned__dropdown-content" }),
+                        h("nylas-location-component", { name: "location", eventLocation: location, exportparts: "nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content" }),
+                        h("nylas-event-description", { name: "description", eventDescription: eventDescription, exportparts: "nedesc, nedesc__textarea" })))));
+        case 'availability':
+            const openHours = formState.availability;
+            const timezone = openHours?.[0]?.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 (h("div", { key: id },
+                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' }),
+                h("nylas-calendar-picker", { name: "calendars", calendars: calendars ?? [], defaultSelectedCalendars: selectedCalendars, organizerEmail: organizerEmail, exportparts: 'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content' }),
+                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 (h("div", { key: id },
+                id == 'new' && h("p", null, "Config"),
+                h("nylas-buffer-time", { name: "buffer-time", buffer: formState.buffer, exportparts: 'nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview' }),
+                h("nylas-custom-booking-flow", { name: "booking-type", bookingType: formState.bookingType, exportparts: 'ncbf, ncbf__header, ncbf__dropdown, ncbf__dropdown-button, ncbf__dropdown-content' }),
+                h("nylas-event-limits", null,
+                    h("div", { slot: "inputs" },
+                        h("nylas-limit-future-bookings", { name: "limit-future-bookings", availableDaysInFuture: formState.availableDaysInFuture, exportparts: "nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content" }),
+                        h("nylas-min-cancellation-notice", { name: "min-cancellation-notice", minCancellationNotice: formState.minCancellationNotice, exportparts: "nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content" })))));
+    }
+}
+
+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{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}}.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}.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:flex-end;align-items:center;gap:1rem;height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}.footer.sc-nylas-editor-tabs .unsaved-changes.sc-nylas-editor-tabs{color:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .saved-changes.sc-nylas-editor-tabs{color:var(--nylas-success)}.footer.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 button.sc-nylas-editor-tabs:hover{background:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:active{background:var(--nylas-base-800)}.footer.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer.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}";
 
 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;
@@ -49,30 +91,33 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.schedulerConfigChanged = createEvent(this, "schedulerConfigChanged", 7);
         this.formSubmissionHandler = async (event) => {
             event.preventDefault();
             this.isLoading = true;
             this.hasUnsavedChanges = false;
             this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer } = this.formState;
+            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice } = this.formState;
             const organizer = this.config?.participants?.find(p => p.is_organizer);
             const configObject = {
+                ...(this.config?.id && { id: this.config.id }),
+                version: this.config?.version ?? '1.0.0',
                 availability: {
-                    duration_minutes: parseInt(duration),
+                    duration_minutes: duration ? parseInt(duration) : 0,
                     availability_rules: {
                         availability_method: this.config?.availability?.availability_rules?.availability_method ?? 'collective',
-                        buffer,
+                        buffer: buffer || { before: 0, after: 0 },
+                        default_open_hours: this.config?.availability?.availability_rules?.default_open_hours ?? [],
+                        round_robin_group_id: this.config?.availability?.availability_rules?.round_robin_group_id ?? '',
                     },
                 },
                 participants: [
                     {
-                        name: organizer?.name ?? '',
-                        email: organizer?.email ?? '',
+                        name: organizer?.name ?? organizer?.email ?? this.currentUser?.name ?? this.currentUser?.email ?? '',
+                        email: organizer?.email ?? this.currentUser?.email ?? '',
                         is_organizer: true,
                         availability: {
-                            calendar_ids: calendarIds.length ? calendarIds : ['primary'],
+                            calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
                             open_hours: availability ?? [],
                         },
                         booking: {
@@ -86,6 +131,10 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
                     location: location?.toString() ?? '',
                     booking_type: bookingType?.toString() ?? 'booking',
                 },
+                scheduler: {
+                    available_days_in_future: availableDaysInFuture ?? 30,
+                    min_cancellation_notice: minCancellationNotice ?? 0,
+                },
             };
             const resetLoadingState = (_e) => {
                 this.isLoading = false;
@@ -94,50 +143,63 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
                     this.changesSaved = false;
                 }, 5000);
             };
-            this.schedulerConfigChanged.emit({ ...configObject, resetLoadingState });
+            this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, action: this.action });
         };
         this.calendars = undefined;
         this.config = undefined;
+        this.currentUser = undefined;
+        this.action = 'create';
         this.activeTab = 'eventInfo';
         this.isLoading = false;
         this.hasUnsavedChanges = false;
         this.changesSaved = false;
-        this.formState = this.getFormStateFromConfig();
+        this.formState = {};
     }
     configChangedHandler(newConfig) {
-        debug('nylas-editor-tabs', 'configChangedHandler', newConfig);
-        this.formState = this.getFormStateFromConfig();
+        debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.config);
+        this.formState = {
+            ...this.getFormStateFromConfig(newConfig),
+        };
+        if (newConfig.id) {
+            this.action = 'update';
+        }
+        else {
+            this.action = 'create';
+        }
     }
     connectedCallback() {
-        debug('nylas-editor-tabs', 'connectedCallback');
+        debug('[nylas-editor-tabs]', 'connectedCallback');
     }
     componentWillLoad() {
-        debug('nylas-editor-tabs', 'componentWillLoad');
+        debug('[nylas-editor-tabs]', 'componentWillLoad');
+        this.formState = this.getFormStateFromConfig(this.config);
     }
     componentDidLoad() {
-        debug('nylas-editor-tabs', 'componentDidLoad');
+        debug('[nylas-editor-tabs]', 'componentDidLoad');
     }
     disconnectedCallback() {
-        debug('nylas-editor-tabs', 'disconnectedCallback');
+        debug('[nylas-editor-tabs]', 'disconnectedCallback');
     }
     handleValueChanged(event) {
-        debug('nylas-editor-tabs', 'handleValueChanged', event);
+        debug('[nylas-editor-tabs]', 'handleValueChanged', event);
         this.formState = { ...this.formState, [event.detail.name]: event.detail.value };
         this.hasUnsavedChanges = true;
     }
-    getFormStateFromConfig() {
-        const organizerParticipant = this.config?.participants?.find(p => p.is_organizer);
+    getFormStateFromConfig(config) {
+        const organizerParticipant = config?.participants?.find(p => p.is_organizer);
         return {
-            title: this.config?.event_booking?.title ?? '',
-            description: this.config?.event_booking?.description ?? '',
-            duration: this.config?.availability?.duration_minutes?.toString() ?? '10',
+            title: config?.event_booking?.title ?? '',
+            description: config?.event_booking?.description ?? '',
+            duration: config?.availability?.duration_minutes?.toString() ?? '10',
             availability: organizerParticipant?.availability?.open_hours ?? undefined,
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
-            participants: this.config?.participants ?? [],
+            participants: config?.participants ?? [],
             bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',
             location: this.config?.event_booking?.location ?? '',
             bookingType: this.config?.event_booking?.booking_type ?? 'booking',
             buffer: this.config?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },
+            availableDaysInFuture: this.config?.scheduler?.available_days_in_future ?? 30,
+            minCancellationNotice: this.config?.scheduler?.min_cancellation_notice ?? 0,
         };
     }
     updateFormState() {
@@ -174,6 +236,12 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
                 case 'buffer-time':
                     this.formState.buffer = JSON.parse(value.toString());
                     break;
+                case 'limit-future-bookings':
+                    this.formState.availableDaysInFuture = parseInt(value.toString());
+                    break;
+                case 'min-cancellation-notice':
+                    this.formState.minCancellationNotice = parseInt(value.toString());
+                    break;
             }
         });
         this.formState = { ...this.formState };
@@ -183,39 +251,22 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
         this.updateFormState();
         this.activeTab = tabName;
     }
-    renderTabContent(formState) {
-        switch (this.activeTab) {
-            case 'eventInfo':
-                const eventTitle = formState.title;
-                const eventDescription = formState.description;
-                const eventDuration = parseInt(formState.duration);
-                const location = formState.location;
-                return (h("div", null, h("nylas-event-info", null, h("div", { slot: "inputs" }, h("nylas-event-title", { name: "title", eventTitle: eventTitle }), h("nylas-event-duration", { name: "duration", eventDurationMinutes: eventDuration }), h("nylas-location-component", { name: "location", eventLocation: location }), h("nylas-event-description", { name: "description", eventDescription: eventDescription })))));
-            case 'availability':
-                const openHours = formState.availability;
-                const timezone = openHours?.[0]?.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 (h("div", null, h("nylas-booking-calendar-picker", { name: "booking-calendar", calendars: this.calendars ?? [], defaultBookingCalendar: bookingCalendar }), h("nylas-calendar-picker", { name: "calendars", calendars: this.calendars ?? [], defaultSelectedCalendars: selectedCalendars, organizerEmail: organizerEmail }), h("nylas-availability-picker", { name: "availability", openHours: openHours, defaultTimezone: timezone })));
-            case 'bookingOptions':
-                return (h("div", null, h("nylas-buffer-time", { name: "buffer-time", buffer: formState.buffer }), h("nylas-custom-booking-flow", { name: "booking-type", bookingType: formState.bookingType })));
-        }
-    }
     render() {
-        return (h(Host, { key: '19e6c127b0c0f18c9be2418964677ff58328ed41' }, h("form", { key: 'bd613b593967617376d5da7999efe4afeacfa02c', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el) }, h("div", { key: '8fa38579a290e364608b9cdb98f7d56882d36554', class: "form-contents" }, h("div", { key: 'f1df27ef2066f4c5c2f3bdbb461d50b5d4907735', class: "tabs" }, h("button", { key: '08712b407a4d7010390b2c21b8be5ec574dbbb25', class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { key: '2b7bb89183aff870d09a6a6d7d4163e0d134da1d', width: "16", height: "16" }), "Event Info"), h("button", { key: '91039f8205c1dc42eb7bc9ecad4f712919a41456', class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { key: 'd6d54b4a2c281db5a2a0e5cf2d41788ca81411a0', width: "16", height: "16" }), "Availability"), h("button", { key: '5744f63795f0c791bb4eeacfb07355b9dc47bad1', class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { key: 'ed3f6bbbf5e2a867a1c8803bc1e19ab344c492c4', width: "16", height: "16" }), "Booking Options")), h("div", { key: '4e703aa0c814b7e4f322cc3df7546d52dc9da866', class: "tab-content" }, this.renderTabContent(this.formState))), h("div", { key: '17b58229c11d08bae176a06f1f46247b32e14115', class: "footer" }, h("p", { key: '0cdfe2e1990a2ff0ab8ba9a2b965fdcaef02994e', class: {
+        debug('[nylas-editor-tabs]', 'render', this.formState);
+        return (h(Host, { key: 'e26c05a424e53163d97bd14723151c73a870b8be' }, h("form", { key: 'e5c3af66eebb0d133e8a6931d84aa12b5e07d329', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el) }, h("div", { key: 'd24109dc87e9b18fb62bf684c25c08dfa58334ed', class: "form-contents" }, h("div", { key: 'b74f053cbd15654c1d3d43af8a765607fdcd28d3', class: "tabs" }, h("button", { key: 'ccf9034c5bf0194ad5db7ad29ddd46eb6846cfbb', class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { key: '6527d78a3d54f54baa6f7c4552937dbfe992ec96', width: "16", height: "16" }), "Event Info"), h("button", { key: 'e561f4f7ab01629860f13812a14d0bdf92ad7d6b', class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { key: 'dde4d0f70cdf0aad66e25e7b683372a0c9035398', width: "16", height: "16" }), "Availability"), h("button", { key: '8a8131ed4f2f07b6f9d228d9bc86667718f5766f', class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { key: '1cc07a769eca6090749bc0c04ca3aa283864d925', width: "16", height: "16" }), "Booking Options")), h("div", { key: '2802d58acf7965856f6802b17794dc34cec424e7', class: "tab-content" }, h(TabContents, { key: 'c965af9cecdd91977c8b036f504e33620443b7af', formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.config?.id ?? 'new' }))), h("div", { key: '2faed468348afb67f0fc867de91c901c5c1546f5', class: "footer" }, h("p", { key: 'd79a6e1562cd3ced4b84a01f8939d8d5c047979c', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
-            } }, this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''), h("button", { key: '8d22df55b55d23caced2939821fa027653a26c2b', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : ('Save changes'))))));
+            } }, this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '1e77a73ef49c9a17a3cdd7d9adcf49515765de7c', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes'))))));
     }
     static get watchers() { return {
         "config": ["configChangedHandler"]
     }; }
     static get style() { return nylasEditorTabsCss; }
-}, [1, "nylas-editor-tabs", {
+}, [2, "nylas-editor-tabs", {
         "calendars": [16],
         "config": [16],
+        "currentUser": [16],
+        "action": [32],
         "activeTab": [32],
         "isLoading": [32],
         "hasUnsavedChanges": [32],
@@ -230,13 +281,20 @@ __decorate([
         stateToProps: new Map([
             ['schedulerConfig.calendars', 'calendars'],
             ['schedulerConfig.config', 'config'],
+            ['schedulerConfig.currentUser', 'currentUser'],
         ]),
         eventToProps: {
-            schedulerConfigChanged: async (event, _nylasSchedulerConfigConnector) => {
-                const { resetLoadingState } = event.detail;
+            schedulerConfigChanged: async (event, nylasSchedulerConfigConnector) => {
+                const { resetLoadingState, action, config } = event.detail;
                 if (resetLoadingState) {
                     resetLoadingState(event);
                 }
+                if (action === 'update') {
+                    await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);
+                }
+                else {
+                    await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);
+                }
             },
         },
         fireRegisterEvent: true,
@@ -249,7 +307,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nylas-editor-tabs", "add-circle-icon", "calendar-info-icon", "calendar-patterns-icon", "chevron-icon", "close-icon", "flow-icon", "globe-icon", "info-icon", "loading-icon", "location-icon", "location-off-icon", "multi-select-dropdown", "nylas-availability-picker", "nylas-booking-calendar-picker", "nylas-buffer-time", "nylas-calendar-picker", "nylas-custom-booking-flow", "nylas-event-description", "nylas-event-duration", "nylas-event-info", "nylas-event-title", "nylas-form-card", "nylas-location-component", "nylas-time-window-picker", "search-icon", "select-dropdown", "tooltip-component"];
+    const components = ["nylas-editor-tabs", "add-circle-icon", "button-component", "calendar-info-icon", "calendar-patterns-icon", "chevron-icon", "close-icon", "flow-icon", "globe-icon", "info-icon", "loading-icon", "location-icon", "location-off-icon", "multi-select-dropdown", "nylas-availability-picker", "nylas-booking-calendar-picker", "nylas-buffer-time", "nylas-calendar-picker", "nylas-custom-booking-flow", "nylas-event-description", "nylas-event-duration", "nylas-event-info", "nylas-event-limits", "nylas-event-title", "nylas-form-card", "nylas-limit-future-bookings", "nylas-location-component", "nylas-min-cancellation-notice", "nylas-time-window-picker", "search-icon", "select-dropdown", "time-period-selector", "tooltip-component"];
     components.forEach(tagName => { switch (tagName) {
         case "nylas-editor-tabs":
             if (!customElements.get(tagName)) {
@@ -258,130 +316,155 @@ function defineCustomElement() {
             break;
         case "add-circle-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$w();
+            }
+            break;
+        case "button-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$v();
             }
             break;
         case "calendar-info-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$u();
             }
             break;
         case "calendar-patterns-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$t();
             }
             break;
         case "chevron-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$s();
             }
             break;
         case "close-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$r();
             }
             break;
         case "flow-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$q();
             }
             break;
         case "globe-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$p();
             }
             break;
         case "info-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$o();
             }
             break;
         case "loading-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$n();
             }
             break;
         case "location-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$m();
             }
             break;
         case "location-off-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$l();
             }
             break;
         case "multi-select-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$k();
             }
             break;
         case "nylas-availability-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$j();
             }
             break;
         case "nylas-booking-calendar-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$i();
             }
             break;
         case "nylas-buffer-time":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$h();
             }
             break;
         case "nylas-calendar-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$g();
             }
             break;
         case "nylas-custom-booking-flow":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$f();
             }
             break;
         case "nylas-event-description":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$e();
             }
             break;
         case "nylas-event-duration":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$d();
             }
             break;
         case "nylas-event-info":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$c();
+            }
+            break;
+        case "nylas-event-limits":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
             }
             break;
         case "nylas-event-title":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$a();
             }
             break;
         case "nylas-form-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$9();
+            }
+            break;
+        case "nylas-limit-future-bookings":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
             }
             break;
         case "nylas-location-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
+            }
+            break;
+        case "nylas-min-cancellation-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
             }
             break;
         case "nylas-time-window-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "search-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "select-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "time-period-selector":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }