npm - @nylas/web-elements - Versions diffs - 1.0.2-canary.2 → 1.1.0-canary.3 - Mend

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

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

Files changed (1005) hide show

package/dist/nylas-web-elements/nylas-editor-tabs.entry.js CHANGED Viewed

@@ -1,9 +1,46 @@
-import { r as registerInstance, i as createEvent, h, a as Host } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { h, r as registerInstance, i as createEvent, a as Host } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.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;
@@ -28,23 +65,27 @@ const NylasEditorTabs = class {
             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: {
@@ -58,6 +99,10 @@ const NylasEditorTabs = class {
                     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;
@@ -66,50 +111,63 @@ const NylasEditorTabs = class {
                     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() {
@@ -146,6 +204,12 @@ const NylasEditorTabs = class {
                 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 };
@@ -155,31 +219,12 @@ const NylasEditorTabs = class {
         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"]
@@ -191,13 +236,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,

package/dist/nylas-web-elements/nylas-editor-tabs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-editor-tabs.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.scss?tag=nylas-editor-tabs&encapsulation=shadow","src/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/buttons.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.scheduler-editor {\n display: flex;\n flex-direction: column;\n .form-contents {\n display: grid;\n grid-template-columns: minmax(224px, 25%) 1fr;\n @media #{$mobile} {\n display: table-column-group;\n }\n .tabs {\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--nylas-base-200);\n background-color: var(--nylas-base-25);\n .tab {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n color: var(--nylas-base-900);\n background: var(--nylas-base-0);\n border: none;\n height: 56px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n font-weight: 500;\n line-height: 24px;\n cursor: pointer;\n &:not(:first-of-type) {\n margin-top: 0.25rem;\n }\n &.active {\n font-weight: 600;\n background: var(--nylas-base-0);\n color: var(--nylas-primary);\n border-left: 4px solid var(--nylas-primary);\n box-shadow: 0px 1px 2px 0px #0000000f;\n box-shadow: 0px 1px 3px 0px #0000001a;\n }\n }\n }\n .tab-content {\n max-width: 692px;\n nylas-event-info {\n div[slot='inputs'] {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n }\n }\n }\n}\n\n.footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 1rem;\n height: 80px;\n padding: 0 1rem;\n border-top: 1px solid var(--nylas-base-200);\n .unsaved-changes {\n color: var(--nylas-base-600);\n }\n .saved-changes {\n color: var(--nylas-success);\n }\n button {\n @include primary-button;\n width: 148px;\n span {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { Component, Event, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { debug } from '@/utils/utils';\nimport { Calendar, Config as SchedulerConfig } from '@nylas/core';\nimport { EventEmitter } from '@stencil/core';\n\ntype SchedulerEventDetail = Partial<SchedulerConfig> & {\n resetLoadingState?: (e: CustomEvent) => void;\n};\n\n/*\n The `nylas-editor-tabs` component is a UI component that displays the editor tabs for the scheduler editor.\n /\n@Component({\n tag: 'nylas-editor-tabs',\n styleUrl: 'nylas-editor-tabs.scss',\n shadow: true,\n})\nexport class NylasEditorTabs {\n private formRef!: HTMLFormElement;\n @Prop() calendars?: Calendar[];\n @Prop() config?: SchedulerConfig;\n @State() activeTab: string = 'eventInfo';\n @State() isLoading: boolean = false;\n @State() hasUnsavedChanges: boolean = false;\n @State() changesSaved: boolean = false;\n @State() formState: {\n title: string;\n description: string;\n duration: string;\n availability?: any;\n calendarIds: string[];\n participants?: any[];\n bookingCalendar?: string;\n location?: string;\n bookingType?: string;\n buffer?: { before: number; after: number };\n } = this.getFormStateFromConfig();\n\n @Event() schedulerConfigChanged!: EventEmitter<SchedulerEventDetail>;\n\n @Watch('config')\n configChangedHandler(newConfig: SchedulerConfig) {\n debug('nylas-editor-tabs', 'configChangedHandler', newConfig);\n this.formState = this.getFormStateFromConfig();\n }\n\n connectedCallback() {\n debug('nylas-editor-tabs', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-editor-tabs', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-editor-tabs', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-editor-tabs', 'disconnectedCallback');\n }\n\n @Listen('valueChanged')\n handleValueChanged(event: CustomEvent) {\n debug('nylas-editor-tabs', 'handleValueChanged', event);\n this.formState = { ...this.formState, [event.detail.name]: event.detail.value };\n this.hasUnsavedChanges = true;\n }\n\n getFormStateFromConfig() {\n const organizerParticipant = this.config?.participants?.find(p => p.is_organizer);\n return {\n title: this.config?.event_booking?.title ?? '',\n description: this.config?.event_booking?.description ?? '',\n duration: this.config?.availability?.duration_minutes?.toString() ?? '10',\n availability: organizerParticipant?.availability?.open_hours ?? undefined,\n calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],\n participants: this.config?.participants ?? [],\n bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',\n location: this.config?.event_booking?.location ?? '',\n bookingType: this.config?.event_booking?.booking_type ?? 'booking',\n buffer: this.config?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },\n };\n }\n\n updateFormState() {\n const formData = new FormData(this.formRef);\n formData.forEach((value, key) => {\n switch (key) {\n case 'title':\n this.formState.title = value.toString();\n break;\n case 'description':\n this.formState.description = value.toString();\n break;\n case 'duration':\n this.formState.duration = value.toString();\n break;\n case 'availability':\n this.formState.availability = JSON.parse(value.toString());\n break;\n case 'participants':\n this.formState.participants = JSON.parse(value.toString());\n break;\n case 'calendars':\n this.formState.calendarIds = value.toString().split(',');\n break;\n case 'booking-calendar':\n this.formState.bookingCalendar = value.toString();\n break;\n case 'location':\n this.formState.location = value.toString();\n break;\n case 'booking-type':\n this.formState.bookingType = value.toString();\n break;\n case 'buffer-time':\n this.formState.buffer = JSON.parse(value.toString());\n break;\n }\n });\n this.formState = { ...this.formState };\n }\n\n setActiveTab(e: Event, tabName: string) {\n e.preventDefault();\n this.updateFormState();\n this.activeTab = tabName;\n }\n\n formSubmissionHandler = async (event: Event) => {\n event.preventDefault();\n this.isLoading = true;\n this.hasUnsavedChanges = false;\n this.updateFormState();\n const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer } = this.formState;\n\n const organizer = this.config?.participants?.find(p => p.is_organizer);\n const configObject = {\n availability: {\n duration_minutes: parseInt(duration),\n availability_rules: {\n availability_method: this.config?.availability?.availability_rules?.availability_method ?? 'collective',\n buffer,\n },\n },\n participants: [\n {\n name: organizer?.name ?? '',\n email: organizer?.email ?? '',\n is_organizer: true,\n availability: {\n calendar_ids: calendarIds.length ? calendarIds : ['primary'],\n open_hours: availability ?? [],\n },\n booking: {\n calendar_id: bookingCalendar ?? 'primary',\n },\n },\n ],\n event_booking: {\n title: title?.toString() ?? '',\n description: description?.toString() ?? '',\n location: location?.toString() ?? '',\n booking_type: bookingType?.toString() ?? 'booking',\n },\n };\n const resetLoadingState = (_e: CustomEvent) => {\n this.isLoading = false;\n this.changesSaved = true;\n setTimeout(() => {\n this.changesSaved = false;\n }, 5000);\n };\n this.schedulerConfigChanged.emit({ ...configObject, resetLoadingState });\n };\n\n renderTabContent(formState) {\n switch (this.activeTab) {\n case 'eventInfo':\n const eventTitle = formState.title;\n const eventDescription = formState.description;\n const eventDuration = parseInt(formState.duration);\n const location = formState.location;\n // const eventParticipants = formState.participants;\n\n return (\n <div>\n <nylas-event-info>\n <div slot=\"inputs\">\n <nylas-event-title name=\"title\" eventTitle={eventTitle} />\n <nylas-event-duration name=\"duration\" eventDurationMinutes={eventDuration} />\n <nylas-location-component name=\"location\" eventLocation={location} />\n <nylas-event-description name=\"description\" eventDescription={eventDescription} />\n </div>\n </nylas-event-info>\n {/ <nylas-additional-participants name=\"participants\" eventParticipants={eventParticipants} /> */}\n </div>\n );\n case 'availability':\n const openHours = formState.availability;\n const timezone = openHours?.[0]?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;\n const organizer = formState.participants?.find(p => p.is_organizer);\n const organizerEmail = organizer?.email ?? 'primary';\n const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];\n const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;\n return (\n <div>\n <nylas-booking-calendar-picker name=\"booking-calendar\" calendars={this.calendars ?? []} defaultBookingCalendar={bookingCalendar} />\n <nylas-calendar-picker name=\"calendars\" calendars={this.calendars ?? []} defaultSelectedCalendars={selectedCalendars} organizerEmail={organizerEmail} />\n <nylas-availability-picker name=\"availability\" openHours={openHours} defaultTimezone={timezone} />\n </div>\n );\n case 'bookingOptions':\n return (\n <div>\n <nylas-buffer-time name=\"buffer-time\" buffer={formState.buffer} />\n <nylas-custom-booking-flow name=\"booking-type\" bookingType={formState.bookingType} />\n </div>\n );\n }\n }\n\n @RegisterComponent<NylasEditorTabs, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-editor-tabs',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.config', 'config'],\n ]),\n eventToProps: {\n schedulerConfigChanged: async (event: CustomEvent<SchedulerEventDetail>, _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector) => {\n const { resetLoadingState } = event.detail;\n if (resetLoadingState) {\n resetLoadingState(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <form onSubmit={this.formSubmissionHandler} class=\"scheduler-editor\" ref={el => (this.formRef = el as HTMLFormElement)}>\n <div class=\"form-contents\">\n <div class=\"tabs\">\n <button class={{ tab: true, active: this.activeTab == 'eventInfo' }} onClick={e => this.setActiveTab(e, 'eventInfo')}>\n <calendar-info-icon width=\"16\" height=\"16\" />\n Event Info\n </button>\n <button class={{ tab: true, active: this.activeTab == 'availability' }} onClick={e => this.setActiveTab(e, 'availability')}>\n <calendar-patterns-icon width=\"16\" height=\"16\" />\n Availability\n </button>\n <button class={{ tab: true, active: this.activeTab == 'bookingOptions' }} onClick={e => this.setActiveTab(e, 'bookingOptions')}>\n <flow-icon width=\"16\" height=\"16\" />\n Booking Options\n </button>\n </div>\n <div class=\"tab-content\">{this.renderTabContent(this.formState)}</div>\n </div>\n <div class=\"footer\">\n <p\n class={{\n 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,\n 'saved-changes': this.changesSaved,\n }}\n >\n {this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''}\n </p>\n <button type=\"submit\" disabled={this.isLoading}>\n {this.isLoading ? (\n <span>\n Saving\n <loading-icon />{' '}\n </span>\n ) : (\n 'Save changes'\n )}\n </button>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-editor-tabs.entry.esm.js","mappings":";;;;;SASwB,WAAW,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAoB;IAC3F,QAAQ,SAAS;QACf,KAAK,WAAW;YACd,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC;YACnC,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC;YAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACnD,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;YAGpC,QACE,WAAK,GAAG,EAAE,EAAE;gBACV;oBACE,WAAK,IAAI,EAAC,QAAQ;wBAChB,yBAAmB,IAAI,EAAC,OAAO,EAAC,UAAU,EAAE,UAAU,EAAE,WAAW,EAAC,wCAAwC,GAAG;wBAC/G,4BACE,IAAI,EAAC,UAAU,EACf,oBAAoB,EAAE,aAAa,EACnC,WAAW,EAAC,6EAA6E,GACzF;wBACF,gCAA0B,IAAI,EAAC,UAAU,EAAC,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAC,gFAAgF,GAAG;wBAClK,+BAAyB,IAAI,EAAC,aAAa,EAAC,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAC,0BAA0B,GAAG,CACrH,CACW,CAMf,EACN;QACJ,KAAK,cAAc;YACjB,MAAM,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;YACzC,MAAM,QAAQ,GAAG,SAAS,GAAG,CAAC,CAAC,EAAE,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAC;YAC9F,MAAM,SAAS,GAAG,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;YACpE,MAAM,cAAc,GAAG,SAAS,EAAE,KAAK,IAAI,SAAS,CAAC;YACrD,MAAM,iBAAiB,GAAG,SAAS,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,CAAC,cAAc,CAAC,CAAC;YACtG,MAAM,eAAe,GAAG,SAAS,CAAC,eAAe,IAAI,SAAS,GAAG,cAAc,GAAG,SAAS,CAAC,eAAe,CAAC;YAC5G,QACE,WAAK,GAAG,EAAE,EAAE;gBACV,qCACE,IAAI,EAAC,kBAAkB,EACvB,SAAS,EAAE,SAAS,IAAI,EAAE,EAC1B,sBAAsB,EAAE,eAAe,EACvC,WAAW,EAAE,sGAAsG,GACnH;gBACF,6BACE,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,SAAS,IAAI,EAAE,EAC1B,wBAAwB,EAAE,iBAAiB,EAC3C,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,6EAA6E,GAC1F;gBACF,iCACE,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,QAAQ,EACzB,WAAW,EACT,wQAAwQ,GAE1Q,CACE,EACN;QACJ,KAAK,gBAAgB;YACnB,QACE,WAAK,GAAG,EAAE,EAAE;gBACT,EAAE,IAAI,KAAK,IAAI,sBAAa;gBAC7B,yBACE,IAAI,EAAC,aAAa,EAClB,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,WAAW,EACT,0MAA0M,GAE5M;gBACF,iCACE,IAAI,EAAC,cAAc,EACnB,WAAW,EAAE,SAAS,CAAC,WAAW,EAClC,WAAW,EAAE,mFAAmF,GAChG;gBACF;oBACE,WAAK,IAAI,EAAC,QAAQ;wBAChB,mCACE,IAAI,EAAC,uBAAuB,EAC5B,qBAAqB,EAAE,SAAS,CAAC,qBAAqB,EACtD,WAAW,EAAC,8KAA8K,GAC1L;wBACF,qCACE,IAAI,EAAC,yBAAyB,EAC9B,qBAAqB,EAAE,SAAS,CAAC,qBAAqB,EACtD,WAAW,EAAC,8KAA8K,GAC1L,CACE,CACa,CACjB,EACN;KACL;AACH;;ACxGA,MAAM,kBAAkB,GAAG,2oHAA2oH;;;;;;;;;;;;;;;;MCgGzpH,eAAe;;;;QAsI1B,0BAAqB,GAAG,OAAO,KAAY;YACzC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,GAC7J,IAAI,CAAC,SAAS,CAAC;YAEjB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;YAEvE,MAAM,YAAY,GAA2B;gBAC3C,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;gBAC9C,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,OAAO;gBACxC,YAAY,EAAE;oBACZ,gBAAgB,EAAE,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;oBACnD,kBAAkB,EAAE;wBAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,IAAI,YAAY;wBACvG,MAAM,EAAE,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;wBACzC,kBAAkB,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,IAAI,EAAE;wBAC3F,oBAAoB,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,IAAI,EAAE;qBAChG;iBACF;gBACD,YAAY,EAAE;oBACZ;wBACE,IAAI,EAAE,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;wBACpG,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;wBACxD,YAAY,EAAE,IAAI;wBAClB,YAAY,EAAE;4BACZ,YAAY,EAAE,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,CAAC,SAAS,CAAC;4BAC7D,UAAU,EAAE,YAAY,IAAI,EAAE;yBAC/B;wBACD,OAAO,EAAE;4BACP,WAAW,EAAE,eAAe,IAAI,SAAS;yBAC1C;qBACF;iBACF;gBACD,aAAa,EAAE;oBACb,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;oBAC9B,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE;oBAC1C,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACpC,YAAY,EAAG,WAAW,EAAE,QAAQ,EAAkB,IAAI,SAAS;iBACpE;gBACD,SAAS,EAAE;oBACT,wBAAwB,EAAE,qBAAqB,IAAI,EAAE;oBACrD,uBAAuB,EAAE,qBAAqB,IAAI,CAAC;iBACpD;aACF,CAAC;YACF,MAAM,iBAAiB,GAAG,CAAC,EAAe;gBACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,UAAU,CAAC;oBACT,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;iBAC3B,EAAE,IAAI,CAAC,CAAC;aACV,CAAC;YACF,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACpG,CAAC;;;;sBAxLqC,QAAQ;yBAClB,WAAW;yBACV,KAAK;iCACG,KAAK;4BACV,KAAK;yBAcjC,EAAE;;IAKP,oBAAoB,CAAC,SAAwB;QAC3C,KAAK,CAAC,qBAAqB,EAAE,sBAAsB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7E,IAAI,CAAC,SAAS,GAAG;YACf,GAAG,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC;SAC1C,CAAC;QAEF,IAAI,SAAS,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;SACxB;KACF;IAED,iBAAiB;QACf,KAAK,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,CAAC;KACnD;IAED,iBAAiB;QACf,KAAK,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,CAAC;QAClD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3D;IAED,gBAAgB;QACd,KAAK,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAC;KAClD;IAED,oBAAoB;QAClB,KAAK,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC;KACtD;IAGD,kBAAkB,CAAC,KAAkB;QACnC,KAAK,CAAC,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,CAAC,CAAC;QAC1D,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAChF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;KAC/B;IAED,sBAAsB,CAAC,MAAsB;QAC3C,MAAM,oBAAoB,GAAG,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;QAC7E,OAAO;YACL,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE;YACzC,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,IAAI,EAAE;YACrD,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,IAAI;YACpE,YAAY,EAAE,oBAAoB,EAAE,YAAY,EAAE,UAAU,IAAI,SAAS;YACzE,WAAW,EAAE,oBAAoB,EAAE,YAAY,EAAE,YAAY,IAAI,EAAE;YACnE,YAAY,EAAE,MAAM,EAAE,YAAY,IAAI,EAAE;YACxC,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,KAAK,IAAI,EAAE;YAChG,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,IAAI,EAAE;YACpD,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,YAAY,IAAI,SAAS;YAClE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;YACxF,qBAAqB,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,wBAAwB,IAAI,EAAE;YAC7E,qBAAqB,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,uBAAuB,IAAI,CAAC;SAC5E,CAAC;KACH;IAED,eAAe;QACb,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG;YAC1B,QAAQ,GAAG;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACxC,MAAM;gBACR,KAAK,aAAa;oBAChB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;oBAC9C,MAAM;gBACR,KAAK,UAAU;oBACb,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;oBAC3C,MAAM;gBACR,KAAK,cAAc;oBACjB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;oBAC3D,MAAM;gBACR,KAAK,cAAc;oBACjB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;oBAC3D,MAAM;gBACR,KAAK,WAAW;oBACd,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oBACzD,MAAM;gBACR,KAAK,kBAAkB;oBACrB,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;oBAClD,MAAM;gBACR,KAAK,UAAU;oBACb,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;oBAC3C,MAAM;gBACR,KAAK,cAAc;oBACjB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;oBAC9C,MAAM;gBACR,KAAK,aAAa;oBAChB,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;oBACrD,MAAM;gBACR,KAAK,uBAAuB;oBAC1B,IAAI,CAAC,SAAS,CAAC,qBAAqB,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;oBAClE,MAAM;gBACR,KAAK,yBAAyB;oBAC5B,IAAI,CAAC,SAAS,CAAC,qBAAqB,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;oBAClE,MAAM;aACT;SACF,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;KACxC;IAED,YAAY,CAAC,CAAQ,EAAE,OAAe;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;KAC1B;IAmFD,MAAM;QACJ,KAAK,CAAC,qBAAqB,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACvD,QACE,EAAC,IAAI,uDACH,6DAAM,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EAAE,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAqB,CAAC,IACpH,4DAAK,KAAK,EAAC,eAAe,IACxB,4DAAK,KAAK,EAAC,MAAM,IACf,+DAAQ,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,IAAI,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,WAAW,CAAC,IAClH,2EAAoB,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,eAEtC,EACT,+DAAQ,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,IAAI,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc,CAAC,IACxH,+EAAwB,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,iBAE1C,EACT,+DAAQ,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,IAAI,gBAAgB,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,gBAAgB,CAAC,IAC5H,kEAAW,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,oBAE7B,CACL,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,EAAC,WAAW,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,KAAK,GAAI,CAC1H,CACF,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,0DACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,YAAY;gBAC/D,eAAe,EAAE,IAAI,CAAC,YAAY;aACnC,IAEA,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,iBAAiB,GAAG,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE,CAC3G,EACJ,yEAAkB,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,IACrD,IAAI,CAAC,SAAS,IACb,0BAEE,uBAAgB,EAAC,GAAG,CACf,IACL,IAAI,CAAC,MAAM,IAAI,QAAQ,IACzB,QAAQ,KAER,cAAc,CACf,CACgB,CACf,CACD,CACF,EACP;KACH;;;;;AAjDD;IAxBC,iBAAiB,CAAqG;QACrH,IAAI,EAAE,mBAAmB;QACzB,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,2BAA2B,EAAE,WAAW,CAAC;YAC1C,CAAC,wBAAwB,EAAE,QAAQ,CAAC;YACpC,CAAC,6BAA6B,EAAE,aAAa,CAAC;SAC/C,CAAC;QACF,YAAY,EAAE;YACZ,sBAAsB,EAAE,OAAO,KAAwC,EAAE,6BAA4D;gBACnI,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC3D,IAAI,iBAAiB,EAAE;oBACrB,iBAAiB,CAAC,KAAK,CAAC,CAAC;iBAC1B;gBAGD,IAAI,MAAM,KAAK,QAAQ,EAAE;oBACvB,MAAM,6BAA6B,CAAC,eAAe,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;iBACjF;qBAAM;oBACL,MAAM,6BAA6B,CAAC,eAAe,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;iBACjF;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;6CAkDD;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-editor-tabs/tab-contents.tsx","src/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.scss?tag=nylas-editor-tabs&encapsulation=scoped","src/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport type TabContentsProps = {\n id: string;\n formState: any;\n activeTab: string;\n calendars?: any[];\n};\n\nexport default function TabContents({ id, formState, activeTab, calendars }: TabContentsProps) {\n switch (activeTab) {\n case 'eventInfo':\n const eventTitle = formState.title;\n const eventDescription = formState.description;\n const eventDuration = parseInt(formState.duration);\n const location = formState.location;\n // const eventParticipants = formState.participants;\n\n return (\n <div key={id}>\n <nylas-event-info>\n <div slot=\"inputs\">\n <nylas-event-title name=\"title\" eventTitle={eventTitle} exportparts=\"net, net__title, net__dropdown-content\" />\n <nylas-event-duration\n name=\"duration\"\n eventDurationMinutes={eventDuration}\n exportparts=\"ned, ned__input, ned__dropdown, ned__dropdown-button, ned__dropdown-content\"\n />\n <nylas-location-component name=\"location\" eventLocation={location} exportparts=\"nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content\" />\n <nylas-event-description name=\"description\" eventDescription={eventDescription} exportparts=\"nedesc, nedesc__textarea\" />\n </div>\n </nylas-event-info>\n {/* <nylas-additional-participants\n name=\"participants\"\n eventParticipants={eventParticipants}\n exportparts={'nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant, nap__add-participant'}\n /> /}\n </div>\n );\n case 'availability':\n const openHours = formState.availability;\n const timezone = openHours?.[0]?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;\n const organizer = formState.participants?.find(p => p.is_organizer);\n const organizerEmail = organizer?.email ?? 'primary';\n const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];\n const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;\n return (\n <div key={id}>\n <nylas-booking-calendar-picker\n name=\"booking-calendar\"\n calendars={calendars ?? []}\n defaultBookingCalendar={bookingCalendar}\n exportparts={'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content'}\n />\n <nylas-calendar-picker\n name=\"calendars\"\n calendars={calendars ?? []}\n defaultSelectedCalendars={selectedCalendars}\n organizerEmail={organizerEmail}\n exportparts={'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content'}\n />\n <nylas-availability-picker\n name=\"availability\"\n openHours={openHours}\n defaultTimezone={timezone}\n exportparts={\n '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'\n }\n />\n </div>\n );\n case 'bookingOptions':\n return (\n <div key={id}>\n {id == 'new' && <p>Config</p>}\n <nylas-buffer-time\n name=\"buffer-time\"\n buffer={formState.buffer}\n exportparts={\n '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'\n }\n />\n <nylas-custom-booking-flow\n name=\"booking-type\"\n bookingType={formState.bookingType}\n exportparts={'ncbf, ncbf__header, ncbf__dropdown, ncbf__dropdown-button, ncbf__dropdown-content'}\n />\n <nylas-event-limits>\n <div slot=\"inputs\">\n <nylas-limit-future-bookings\n name=\"limit-future-bookings\"\n availableDaysInFuture={formState.availableDaysInFuture}\n exportparts=\"nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content\"\n />\n <nylas-min-cancellation-notice\n name=\"min-cancellation-notice\"\n minCancellationNotice={formState.minCancellationNotice}\n exportparts=\"nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content\"\n />\n </div>\n </nylas-event-limits>\n </div>\n );\n }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/buttons.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.scheduler-editor {\n display: flex;\n flex-direction: column;\n .form-contents {\n display: grid;\n grid-template-columns: minmax(224px, 25%) 1fr;\n @media #{$mobile} {\n display: table-column-group;\n }\n .tabs {\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--nylas-base-200);\n background-color: var(--nylas-base-25);\n .tab {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n color: var(--nylas-base-900);\n background: var(--nylas-base-0);\n border: none;\n height: 56px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n font-weight: 500;\n line-height: 24px;\n cursor: pointer;\n &:not(:first-of-type) {\n margin-top: 0.25rem;\n }\n &.active {\n font-weight: 600;\n background: var(--nylas-base-0);\n color: var(--nylas-primary);\n border-left: 4px solid var(--nylas-primary);\n box-shadow: 0px 1px 2px 0px #0000000f;\n box-shadow: 0px 1px 3px 0px #0000001a;\n }\n }\n }\n .tab-content {\n max-width: 692px;\n nylas-event-info,\n nylas-event-limits {\n div[slot='inputs'] {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n }\n }\n }\n}\n\n.footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 1rem;\n height: 80px;\n padding: 0 1rem;\n border-top: 1px solid var(--nylas-base-200);\n .unsaved-changes {\n color: var(--nylas-base-600);\n }\n .saved-changes {\n color: var(--nylas-success);\n }\n button {\n @include primary-button;\n width: 148px;\n span {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { BookingType, Calendar, Configuration } from '@nylas/core';\nimport { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport TabContents from './tab-contents';\nimport { User } from '@/common/nylas-api-request';\n\ntype SchedulerEventDetail = {\n config: Partial<Configuration>;\n action: 'create' \| 'update';\n resetLoadingState?: (e: CustomEvent) => void;\n};\n\n/\n The `nylas-editor-tabs` component is a UI component that displays the editor tabs for the scheduler editor.\n * @part nap__title - [nylas-additional-participants] The title of the component.\n * @part nap__subtitle - [nylas-additional-participants] The subtitle of the component.\n * @part nap__content - [nylas-additional-participants] The content of the component.\n * @part nap__input - [nylas-additional-participants] The input of the component.\n * @part nap__remove-participant - [nylas-additional-participants] The remove participant button of the component.\n * @part nap__add-participant - [nylas-additional-participants] The add participant button of the component.\n * @part nap__header - [nylas-availability-picker] The header of the availability picker\n * @part nap__select-timezone - [nylas-availability-picker] The timezone selection container\n * @part nap__select-timezone-button -[nylas-availability-picker] The timezone selection button\n * @part nap__select-timezone-dropdown-content -[nylas-availability-picker] The timezone selection dropdown content\n * @part nap__availability - [nylas-availability-picker] The availability container\n * @part nap__day - [nylas-availability-picker] The day container\n * @part nap__time-ranges - [nylas-availability-picker] The time ranges container\n * @part nap__time-range - [nylas-availability-picker] The time range container\n * @part nap__add-time-range - [nylas-availability-picker] The add time range button\n * @part nap__time-picker-container -[nylas-availability-picker] The time picker container\n * @part nap__time-picker-input - [nylas-availability-picker] The time picker input\n * @part nap__time-picker-times - [nylas-availability-picker] The time picker times\n * @part nbcp - [nylas-booking-calendar-picker] The booking calendar picker container\n * @part nbcp__header - [nylas-booking-calendar-picker] The header of the booking calendar picker\n * @part nbcp__input-label - [nylas-booking-calendar-picker] The input label of the booking calendar picker\n * @part nbcp__dropdown - [nylas-booking-calendar-picker] The dropdown container\n * @part nbcp__dropdown-button - [nylas-booking-calendar-picker] The dropdown button\n * @part nbcp__dropdown-content - [nylas-booking-calendar-picker] The dropdown content\n * @part nbt - [nylas-buffer-time] The buffer time container\n * @part nbt__header - [nylas-buffer-time] The header of the buffer time\n * @part nbt__body - [nylas-buffer-time] The body of the buffer time\n * @part nbt__dropdown-before - [nylas-buffer-time] The before buffer dropdown container\n * @part nbt__dropdown-button-before - [nylas-buffer-time] The before buffer dropdown button\n * @part nbt__dropdown-content-before - [nylas-buffer-time] The before buffer dropdown content\n * @part nbt__dropdown-after - [nylas-buffer-time] The after buffer dropdown container\n * @part nbt__dropdown-button-after - [nylas-buffer-time] The after buffer dropdown button\n * @part nbt__dropdown-content-after - [nylas-buffer-time] The after buffer dropdown content\n * @part nbt__preview - [nylas-buffer-time] The buffer time preview\n * @part ncp - [nylas-calendar-picker] The calendar picker container\n * @part ncp__header - [nylas-calendar-picker] The header of the calendar picker\n * @part ncp__dropdown - [nylas-calendar-picker] The dropdown container\n * @part ncp__dropdown-button - [nylas-calendar-picker] The dropdown button\n * @part ncp__dropdown-content - [nylas-calendar-picker] The dropdown content\n * @part ncbf - [nylas-custom-booking-flow] The custom booking flow container\n * @part ncbf__header - [nylas-custom-booking-flow] The header of the custom booking flow\n * @part ncbf__dropdown - [nylas-custom-booking-flow] The dropdown container\n * @part ncbf__dropdown-button - [nylas-custom-booking-flow] The dropdown button\n * @part ncbf__dropdown-content - [nylas-custom-booking-flow] The dropdown content\n * @part nedesc - [nylas-event-description] The event description container\n * @part nedesc__textarea - [nylas-event-description] The event description textarea\n * @part ned - [nylas-event-duration] The event duration container\n * @part ned__input - [nylas-event-duration] The event duration input\n * @part ned__dropdown - [nylas-event-duration] The event duration dropdown\n * @part ned__dropdown-button - [nylas-event-duration] The event duration dropdown button\n * @part ned__dropdown-content - [nylas-event-duration] The event duration dropdown content\n * @part net - [nylas-event-title] The event title container\n * @part net__title - [nylas-event-title] The event title input\n * @part net__dropdown-content - [nylas-event-title] The token options container\n * @part nlfb - [nylas-limit-future-bookings] The limit future bookings container\n * @part nlfb__number-dropdown - [nylas-limit-future-bookings] The number dropdown container\n * @part nlfb__number-dropdown-button - [nylas-limit-future-bookings] The number dropdown button\n * @part nlfb__number-dropdown-content - [nylas-limit-future-bookings] The number dropdown content\n * @part nlfb__period-dropdown - [nylas-limit-future-bookings] The period dropdown container\n * @part nlfb__period-dropdown-button - [nylas-limit-future-bookings] The period dropdown button\n * @part nlfb__period-dropdown-content - [nylas-limit-future-bookings] The period dropdown content\n * @part nel - [nylas-location-component] The event location container\n * @part nel__location - [nylas-location-component] The event location input\n * @part nel__dropdown - [nylas-location-component] The dropdown container\n * @part nel__dropdown-button - [nylas-location-component] The dropdown button\n * @part nel__dropdown-content - [nylas-location-component] The dropdown content\n * @part nmcn - [nylas-min-cancellation-notice] The minimum cancellation notice container\n * @part nmcn__number-dropdown - [nylas-min-cancellation-notice] The number dropdown container\n * @part nmcn__number-dropdown-button - [nylas-min-cancellation-notice] The number dropdown button\n * @part nmcn__number-dropdown-content - [nylas-min-cancellation-notice] The number dropdown content\n * @part nmcn__period-dropdown - [nylas-min-cancellation-notice] The period dropdown container\n * @part nmcn__period-dropdown-button - [nylas-min-cancellation-notice] The period dropdown button\n * @part nmcn__period-dropdown-content - [nylas-min-cancellation-notice] The period dropdown content\n */\n@Component({\n tag: 'nylas-editor-tabs',\n styleUrl: 'nylas-editor-tabs.scss',\n scoped: true,\n})\nexport class NylasEditorTabs {\n private formRef!: HTMLFormElement;\n @Prop() calendars?: Calendar[];\n @Prop() config?: Configuration;\n @Prop() currentUser?: User;\n @State() action: 'create' \| 'update' = 'create';\n @State() activeTab: string = 'eventInfo';\n @State() isLoading: boolean = false;\n @State() hasUnsavedChanges: boolean = false;\n @State() changesSaved: boolean = false;\n @State() formState: Partial<{\n title: string;\n description: string;\n duration: string;\n availability?: any;\n calendarIds: string[];\n participants?: any[];\n bookingCalendar?: string;\n location?: string;\n bookingType?: string;\n buffer?: { before: number; after: number };\n availableDaysInFuture?: number;\n minCancellationNotice?: number;\n }> = {};\n\n @Event() schedulerConfigChanged!: EventEmitter<SchedulerEventDetail>;\n\n @Watch('config')\n configChangedHandler(newConfig: Configuration) {\n debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.config);\n this.formState = {\n ...this.getFormStateFromConfig(newConfig),\n };\n\n if (newConfig.id) {\n this.action = 'update';\n } else {\n this.action = 'create';\n }\n }\n\n connectedCallback() {\n debug('[nylas-editor-tabs]', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('[nylas-editor-tabs]', 'componentWillLoad');\n this.formState = this.getFormStateFromConfig(this.config);\n }\n\n componentDidLoad() {\n debug('[nylas-editor-tabs]', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('[nylas-editor-tabs]', 'disconnectedCallback');\n }\n\n @Listen('valueChanged')\n handleValueChanged(event: CustomEvent) {\n debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n this.formState = { ...this.formState, [event.detail.name]: event.detail.value };\n this.hasUnsavedChanges = true;\n }\n\n getFormStateFromConfig(config?: Configuration) {\n const organizerParticipant = config?.participants?.find(p => p.is_organizer);\n return {\n title: config?.event_booking?.title ?? '',\n description: config?.event_booking?.description ?? '',\n duration: config?.availability?.duration_minutes?.toString() ?? '10',\n availability: organizerParticipant?.availability?.open_hours ?? undefined,\n calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],\n participants: config?.participants ?? [],\n bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',\n location: this.config?.event_booking?.location ?? '',\n bookingType: this.config?.event_booking?.booking_type ?? 'booking',\n buffer: this.config?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },\n availableDaysInFuture: this.config?.scheduler?.available_days_in_future ?? 30,\n minCancellationNotice: this.config?.scheduler?.min_cancellation_notice ?? 0,\n };\n }\n\n updateFormState() {\n const formData = new FormData(this.formRef);\n formData.forEach((value, key) => {\n switch (key) {\n case 'title':\n this.formState.title = value.toString();\n break;\n case 'description':\n this.formState.description = value.toString();\n break;\n case 'duration':\n this.formState.duration = value.toString();\n break;\n case 'availability':\n this.formState.availability = JSON.parse(value.toString());\n break;\n case 'participants':\n this.formState.participants = JSON.parse(value.toString());\n break;\n case 'calendars':\n this.formState.calendarIds = value.toString().split(',');\n break;\n case 'booking-calendar':\n this.formState.bookingCalendar = value.toString();\n break;\n case 'location':\n this.formState.location = value.toString();\n break;\n case 'booking-type':\n this.formState.bookingType = value.toString();\n break;\n case 'buffer-time':\n this.formState.buffer = JSON.parse(value.toString());\n break;\n case 'limit-future-bookings':\n this.formState.availableDaysInFuture = parseInt(value.toString());\n break;\n case 'min-cancellation-notice':\n this.formState.minCancellationNotice = parseInt(value.toString());\n break;\n }\n });\n this.formState = { ...this.formState };\n }\n\n setActiveTab(e: Event, tabName: string) {\n e.preventDefault();\n this.updateFormState();\n this.activeTab = tabName;\n }\n\n formSubmissionHandler = async (event: Event) => {\n event.preventDefault();\n this.isLoading = true;\n this.hasUnsavedChanges = false;\n this.updateFormState();\n const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice } =\n this.formState;\n\n const organizer = this.config?.participants?.find(p => p.is_organizer);\n\n const configObject: Partial<Configuration> = {\n ...(this.config?.id && { id: this.config.id }),\n version: this.config?.version ?? '1.0.0',\n availability: {\n duration_minutes: duration ? parseInt(duration) : 0,\n availability_rules: {\n availability_method: this.config?.availability?.availability_rules?.availability_method ?? 'collective',\n buffer: buffer \|\| { before: 0, after: 0 },\n default_open_hours: this.config?.availability?.availability_rules?.default_open_hours ?? [],\n round_robin_group_id: this.config?.availability?.availability_rules?.round_robin_group_id ?? '',\n },\n },\n participants: [\n {\n name: organizer?.name ?? organizer?.email ?? this.currentUser?.name ?? this.currentUser?.email ?? '',\n email: organizer?.email ?? this.currentUser?.email ?? '',\n is_organizer: true,\n availability: {\n calendar_ids: calendarIds?.length ? calendarIds : ['primary'],\n open_hours: availability ?? [],\n },\n booking: {\n calendar_id: bookingCalendar ?? 'primary',\n },\n },\n ],\n event_booking: {\n title: title?.toString() ?? '',\n description: description?.toString() ?? '',\n location: location?.toString() ?? '',\n booking_type: (bookingType?.toString() as BookingType) ?? 'booking',\n },\n scheduler: {\n available_days_in_future: availableDaysInFuture ?? 30,\n min_cancellation_notice: minCancellationNotice ?? 0,\n },\n };\n const resetLoadingState = (_e: CustomEvent) => {\n this.isLoading = false;\n this.changesSaved = true;\n setTimeout(() => {\n this.changesSaved = false;\n }, 5000);\n };\n this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, action: this.action });\n };\n\n @RegisterComponent<NylasEditorTabs, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-editor-tabs',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.config', 'config'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n schedulerConfigChanged: async (event: CustomEvent<SchedulerEventDetail>, nylasSchedulerConfigConnector: NylasSchedulerConfigConnector) => {\n const { resetLoadingState, action, config } = event.detail;\n if (resetLoadingState) {\n resetLoadingState(event);\n }\n\n // If we have an ID, we are updating an existing configuration\n if (action === 'update') {\n await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);\n } else {\n await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n debug('[nylas-editor-tabs]', 'render', this.formState);\n return (\n <Host>\n <form onSubmit={this.formSubmissionHandler} class=\"scheduler-editor\" ref={el => (this.formRef = el as HTMLFormElement)}>\n <div class=\"form-contents\">\n <div class=\"tabs\">\n <button class={{ tab: true, active: this.activeTab == 'eventInfo' }} onClick={e => this.setActiveTab(e, 'eventInfo')}>\n <calendar-info-icon width=\"16\" height=\"16\" />\n Event Info\n </button>\n <button class={{ tab: true, active: this.activeTab == 'availability' }} onClick={e => this.setActiveTab(e, 'availability')}>\n <calendar-patterns-icon width=\"16\" height=\"16\" />\n Availability\n </button>\n <button class={{ tab: true, active: this.activeTab == 'bookingOptions' }} onClick={e => this.setActiveTab(e, 'bookingOptions')}>\n <flow-icon width=\"16\" height=\"16\" />\n Booking Options\n </button>\n </div>\n <div class=\"tab-content\">\n <TabContents formState={this.formState} activeTab={this.activeTab} calendars={this.calendars} id={this.config?.id ?? 'new'} />\n </div>\n </div>\n <div class=\"footer\">\n <p\n class={{\n 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,\n 'saved-changes': this.changesSaved,\n }}\n >\n {this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''}\n </p>\n <button-component type=\"submit\" disabled={this.isLoading}>\n {this.isLoading ? (\n <span>\n Saving\n <loading-icon />{' '}\n </span>\n ) : this.action == 'create' ? (\n 'Create'\n ) : (\n 'Save changes'\n )}\n </button-component>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/nylas-web-elements/nylas-event-description.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
@@ -57,7 +57,7 @@ const NylasEventDescription = class {
         this.valueChanged.emit({ value: event.target.value, name: this.name });
     }
     render() {
-        return (h(Host, { key: 'd9ddc56b47dc13868d46d5ecccaf573125d9d930' }, h("div", { key: 'e266bc83de28714a40934cd97d3d7faa9b579612', class: "nylas-event-description" }, h("label", { key: '15dea6c63596093c5dbc2f1abb8c414af6a7d059', htmlFor: "description" }, "Event description", h("span", { key: '615987a7b3b7595fed47462d9337f3731449586d', class: "label-icon" }, h("tooltip-component", { key: 'ea67b662376df9d50b6dd51892ae5ed241e0c911' }, h("info-icon", { key: '2e6dafef89f8d1575c583b7bcb7da7486687439b', slot: "tooltip-icon" }), h("span", { key: 'b435c40a6abfef7114f04f752e97a20eade17ae5', slot: "tooltip-content" }, "Provide any additional details for your event.")))), h("textarea", { key: '35d614a13f24213668c504ee427956e81d18185d', id: "description", name: "description", value: this.description, maxlength: "8192", onInput: e => this.handleChange(e) }))));
+        return (h(Host, { key: '5519bbdfdc7e253bf5b83c18decd714e54f58714' }, h("div", { key: '36541738e7d447cb6f9b3bf0f931c851efb0d8fe', class: "nylas-event-description", part: "nedesc" }, h("label", { key: 'c0eb70c7e36360844559e0fd0a451243fb6f5860', htmlFor: "description" }, "Event description", h("span", { key: '98c176eaa09ccdac28fbba62f67ceeb8a6fed751', class: "label-icon" }, h("tooltip-component", { key: '553ca988451d6053a8863a52cbcdcb12dd041362' }, h("info-icon", { key: '015507616ffc54352cbecc9766e59d0db4a25367', slot: "tooltip-icon" }), h("span", { key: '86efa5b15ae112f6f974ba32e8c138e2c906184f', slot: "tooltip-content" }, "Provide any additional details for your event.")))), h("textarea", { key: '619f982afa3f2af2794d93cc0df930db618a3e5e', id: "description", part: "nedesc__textarea", name: "description", value: this.description, maxlength: "8192", onInput: e => this.handleChange(e) }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/nylas-web-elements/nylas-event-description.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-event-description.entry.esm.js","mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,muCAAmuC;;;;;;;;;;;;;;;;~~MCevvC~~,qBAAqB;;;;;;;;;;;;2BAED,IAAI,CAAC,gBAAgB,IAAI,EAAE;oBAGnC,aAAa;;IAQpC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,yBAAyB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAOD,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;KACvD;IAED,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,yBAAyB,EAAE,kBAAkB,CAAC,CAAC;KACtD;IAED,oBAAoB;QAClB,KAAK,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC;KAC1D;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC/D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACxE;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,yBAAyB,~~IAClC~~,8DAAO,OAAO,EAAC,aAAa,yBAE1B,6DAAM,KAAK,EAAC,YAAY,IACtB,4EACE,kEAAW,IAAI,EAAC,cAAc,GAAG,EACjC,6DAAM,IAAI,EAAC,iBAAiB,qDAAsD,CAChE,CACf,CACD,EACR,iEAAU,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAa,~~CACnI~~,CACD,EACP;KACH;;;;;;;AAjBD;IALC,iBAAiB,CAA2G;QAC3H,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;mDAkBD;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-description/nylas-event-description.scss?tag=nylas-event-description&encapsulation=shadow","src/components/scheduler-editor/nylas-event-description/nylas-event-description.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-description {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n textarea {\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n border: 1px solid var(--nylas-base-200);\n &::-webkit-resizer {\n display: none;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/\n The `nylas-event-description` component is a form input for the description of an event.\n /\n@Component({\n tag: 'nylas-event-description',\n styleUrl: 'nylas-event-description.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventDescription {\n @Prop() eventDescription?: string;\n @State() description: string = this.eventDescription ?? '';\n @AttachInternals() internals!: ElementInternals;\n @Element() host!: HTMLElement;\n @Prop() name: string = 'description';\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-description', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-description', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-description', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-description', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-event-description', 'disconnectedCallback');\n }\n\n handleChange(event) {\n this.description = event.target.value;\n this.internals.setFormValue(event.target.value, 'description');\n this.valueChanged.emit({ value: event.target.value, name: this.name });\n }\n\n @RegisterComponent<NylasEventDescription, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-description',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-description\">\n <label htmlFor=\"description\">\n Event description\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Provide any additional details for your event.</span>\n </tooltip-component>\n </span>\n </label>\n <textarea id=\"description\" name=\"description\" value={this.description} maxlength=\"8192\" onInput={e => this.handleChange(e)}></textarea>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-event-description.entry.esm.js","mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,muCAAmuC;;;;;;;;;;;;;;;;MCiBvvC,qBAAqB;;;;;;;;;;;;2BAED,IAAI,CAAC,gBAAgB,IAAI,EAAE;oBAGnC,aAAa;;IAQpC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,yBAAyB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAOD,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;KACvD;IAED,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,yBAAyB,EAAE,kBAAkB,CAAC,CAAC;KACtD;IAED,oBAAoB;QAClB,KAAK,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC;KAC1D;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC/D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACxE;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,IAChD,8DAAO,OAAO,EAAC,aAAa,yBAE1B,6DAAM,KAAK,EAAC,YAAY,IACtB,4EACE,kEAAW,IAAI,EAAC,cAAc,GAAG,EACjC,6DAAM,IAAI,EAAC,iBAAiB,qDAAsD,CAChE,CACf,CACD,EACR,iEAAU,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAa,CAC3J,CACD,EACP;KACH;;;;;;;AAjBD;IALC,iBAAiB,CAA2G;QAC3H,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;mDAkBD;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-description/nylas-event-description.scss?tag=nylas-event-description&encapsulation=shadow","src/components/scheduler-editor/nylas-event-description/nylas-event-description.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-description {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n textarea {\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n border: 1px solid var(--nylas-base-200);\n &::-webkit-resizer {\n display: none;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/\n The `nylas-event-description` component is a form input for the description of an event.\n * @part nedesc - The event description container\n * @part nedesc__textarea - The event description textarea\n /\n@Component({\n tag: 'nylas-event-description',\n styleUrl: 'nylas-event-description.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventDescription {\n @Prop() eventDescription?: string;\n @State() description: string = this.eventDescription ?? '';\n @AttachInternals() internals!: ElementInternals;\n @Element() host!: HTMLElement;\n @Prop() name: string = 'description';\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-description', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-description', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-description', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-description', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-event-description', 'disconnectedCallback');\n }\n\n handleChange(event) {\n this.description = event.target.value;\n this.internals.setFormValue(event.target.value, 'description');\n this.valueChanged.emit({ value: event.target.value, name: this.name });\n }\n\n @RegisterComponent<NylasEventDescription, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-description',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-description\" part=\"nedesc\">\n <label htmlFor=\"description\">\n Event description\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Provide any additional details for your event.</span>\n </tooltip-component>\n </span>\n </label>\n <textarea id=\"description\" part=\"nedesc__textarea\" name=\"description\" value={this.description} maxlength=\"8192\" onInput={e => this.handleChange(e)}></textarea>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/nylas-web-elements/nylas-event-duration.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
@@ -64,7 +64,7 @@ const NylasEventDuration = class {
     handleChange(event) {
         this.duration = event.target.value;
         this.durationMinutes = this.duration * this.durationIncrement;
-        this.internals.setFormValue(this.durationMinutes.toString(), 'duration');
+        this.internals.setFormValue(this.durationMinutes.toString(), this.name);
     }
     handleBlur() {
         if ((this.duration === null || this.duration === undefined) && this.durationIncrement === 1) {
@@ -103,7 +103,7 @@ const NylasEventDuration = class {
             { value: 1, label: 'minutes' },
             { value: 60, label: 'hours' },
         ];
-        return (h(Host, { key: '75a6d393097f97adeee60d72fb29054876965598' }, h("div", { key: 'e9f8bb8666505fde3ed1979cca7288c3eef13e20', class: "nylas-event-duration" }, h("label", { key: '37701c923fff3654317cfcc36e2300f20d4c4925', htmlFor: "duration" }, "Event duration", h("span", { key: '7f39f7f4fb8ffdc0fd7900edee0ac3ec330a88b0', class: "required" }, "*"), h("span", { key: '410df0fe6b679346d2347e2df08aa17a29b21b98', class: "label-icon" }, h("tooltip-component", { key: '42883303ef733e39e110568d556c3d9f943a8292' }, h("info-icon", { key: 'feda0379b69dbe55563959d5f7bc10b8230c2ad9', slot: "tooltip-icon" }), h("span", { key: '44f88a269e336398bb5c48dca1e529aac07a5ddb', slot: "tooltip-content" }, "Set the duration of your event.")))), h("div", { key: '84b6c6aa9b431ef3e300e26b8ea81b49e975a003', class: "nylas-event-duration__wrapper" }, h("input", { key: '599e0d424d7366cce3723fe9d30c45d52ec75958', type: "number", id: "duration", name: "duration", value: this.duration, onBlur: () => this.handleBlur(), onInput: e => this.handleChange(e), min: 5 }), h("select-dropdown", { key: 'f699922c7ac3854c22356bfaefced2834fc0ca7b', name: 'event-duration', options: durationOptions, defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0], withSearch: false })))));
+        return (h(Host, { key: 'b4c54d309345b6333578f1f8f49fbe9be7e50af7' }, h("div", { key: '401311ed8b0deb33eeb1013264f192ba87b0d118', class: "nylas-event-duration", part: "ned" }, h("label", { key: '5de11caa4aff28ca3fb11811e21adecfed22d32d', htmlFor: "duration" }, "Event duration", h("span", { key: '592731edca9c0c4ca63250e1fc3d964e4c7b271d', class: "required" }, "*"), h("span", { key: 'b9f6a70dc84222e68d2251f485bbd3545d05fcde', class: "label-icon" }, h("tooltip-component", { key: '8fa85c6907a3625c1f50750b962014e7d413ea34' }, h("info-icon", { key: '677374d62adb9c9e27307b64bd69a979a28f32eb', slot: "tooltip-icon" }), h("span", { key: 'd2ebc474b7876c3e23e31a296c826557b329be61', slot: "tooltip-content" }, "Set the duration of your event.")))), h("div", { key: '1240a158b86d06ed9e3859487e8688fc2cfea9e5', class: "nylas-event-duration__wrapper" }, h("input", { key: 'fffb610158d4b056761f41e9b2ffd0e0aa5b1bfd', type: "number", part: "ned_input", id: "duration", name: "duration", value: this.duration, onBlur: () => this.handleBlur(), onInput: e => this.handleChange(e), min: 5 }), h("select-dropdown", { key: '8cf3f16c86c0220f992f69e4cfa012c170145b9e', name: 'event-duration', options: durationOptions, exportparts: "sd__dropdown: ned__dropdown, sd__dropdown-button: ned__dropdown-button, sd__dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0], withSearch: false })))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/nylas-web-elements/nylas-event-duration.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-event-duration.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.scss?tag=nylas-event-duration&encapsulation=shadow","src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-duration {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n.nylas-event-duration__wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n width: 48px;\n }\n select-dropdown::part(sd_dropdown-button) {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/\n The `nylas-event-duration` component is a form input for the duration of an event.\n /\n@Component({\n tag: 'nylas-event-duration',\n styleUrl: 'nylas-event-duration.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventDuration {\n @Element() host!: HTMLElement;\n\n @Prop() name: string = 'duration';\n @Prop() eventDurationMinutes?: number;\n\n @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 5;\n @State() durationMinutes: number = this.eventDurationMinutes ?? 5;\n @State() durationIncrement: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? 60 : 1) : 1;\n\n @AttachInternals() internals!: ElementInternals;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-duration', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('durationMinutes')\n durationMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-duration', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-duration', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-duration', 'componentDidLoad');\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n disconnectedCallback() {\n debug('nylas-event-duration', 'disconnectedCallback');\n }\n\n handleChange(event) {\n this.duration = event.target.value;\n this.durationMinutes = this.duration this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n handleBlur() {\n if ((this.duration === null \|\| this.duration === undefined) && this.durationIncrement === 1) {\n this.duration = 5;\n }\n if ((this.duration <= 0 \|\| this.duration === null \|\| this.duration === undefined) && this.durationIncrement === 60) {\n this.duration = 1;\n }\n if (this.duration < 5 && this.durationIncrement === 1) {\n this.duration = 5;\n }\n if (this.duration > 720 && this.durationIncrement === 1) {\n this.duration = 720;\n }\n if (this.duration > 12 && this.durationIncrement === 60) {\n this.duration = 12;\n }\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.durationIncrement = parseInt(value);\n if (this.durationIncrement === 1) {\n this.duration = 5;\n } else {\n this.duration = 1;\n }\n\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-duration',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const durationOptions = [\n { value: 1, label: 'minutes' },\n { value: 60, label: 'hours' },\n ];\n return (\n <Host>\n <div class=\"nylas-event-duration\">\n <label htmlFor=\"duration\">\n Event duration<span class=\"required\">*</span>\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Set the duration of your event.</span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"nylas-event-duration__wrapper\">\n <input type=\"number\" id=\"duration\" name=\"duration\" value={this.duration} onBlur={() => this.handleBlur()} onInput={e => this.handleChange(e)} min={5} />\n <select-dropdown\n name={'event-duration'}\n options={durationOptions}\n defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0]}\n withSearch={false}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-event-duration.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.scss?tag=nylas-event-duration&encapsulation=shadow","src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-duration {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n.nylas-event-duration__wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n width: 48px;\n }\n select-dropdown::part(sd_dropdown-button) {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/\n The `nylas-event-duration` component is a form input for the duration of an event.\n * @part ned - The event duration container\n * @part ned_input - The event duration input\n * @part ned__dropdown - The dropdown container\n * @part ned__dropdown-button - The dropdown button\n * @part ned__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-event-duration',\n styleUrl: 'nylas-event-duration.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventDuration {\n @Element() host!: HTMLElement;\n\n @Prop() name: string = 'duration';\n @Prop() eventDurationMinutes?: number;\n\n @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 5;\n @State() durationMinutes: number = this.eventDurationMinutes ?? 5;\n @State() durationIncrement: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? 60 : 1) : 1;\n\n @AttachInternals() internals!: ElementInternals;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-duration', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('durationMinutes')\n durationMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-duration', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-duration', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-duration', 'componentDidLoad');\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n disconnectedCallback() {\n debug('nylas-event-duration', 'disconnectedCallback');\n }\n\n handleChange(event) {\n this.duration = event.target.value;\n this.durationMinutes = this.duration this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n }\n handleBlur() {\n if ((this.duration === null \|\| this.duration === undefined) && this.durationIncrement === 1) {\n this.duration = 5;\n }\n if ((this.duration <= 0 \|\| this.duration === null \|\| this.duration === undefined) && this.durationIncrement === 60) {\n this.duration = 1;\n }\n if (this.duration < 5 && this.durationIncrement === 1) {\n this.duration = 5;\n }\n if (this.duration > 720 && this.durationIncrement === 1) {\n this.duration = 720;\n }\n if (this.duration > 12 && this.durationIncrement === 60) {\n this.duration = 12;\n }\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.durationIncrement = parseInt(value);\n if (this.durationIncrement === 1) {\n this.duration = 5;\n } else {\n this.duration = 1;\n }\n\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-duration',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const durationOptions = [\n { value: 1, label: 'minutes' },\n { value: 60, label: 'hours' },\n ];\n return (\n <Host>\n <div class=\"nylas-event-duration\" part=\"ned\">\n <label htmlFor=\"duration\">\n Event duration<span class=\"required\">*</span>\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Set the duration of your event.</span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"nylas-event-duration__wrapper\">\n <input\n type=\"number\"\n part=\"ned_input\"\n id=\"duration\"\n name=\"duration\"\n value={this.duration}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleChange(e)}\n min={5}\n />\n <select-dropdown\n name={'event-duration'}\n options={durationOptions}\n exportparts=\"sd__dropdown: ned__dropdown, sd__dropdown-button: ned__dropdown-button, sd__dropdown-content: ned__dropdown-content\"\n defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0]}\n withSearch={false}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/nylas-web-elements/nylas-event-info.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, a as Host } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, h, a as Host } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
-const nylasEventInfoCss = ":host{display:block;margin:1rem;--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}.nylas-event-info__title{color:var(--nylas-base-nylas-base-900-aaa, #101323);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-event-info__subtitle{color:var(--nylas-base-nylas-base-600-aaa, #3e4784);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-event-info__content{padding:1rem;display:flex;flex-direction:column;gap:1rem}.nylas-event-info__block{display:flex;justify-content:space-between;gap:0.5rem}";
+const nylasEventInfoCss = ":host{display:block;margin:1rem;--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}.nylas-event-info__title{color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-event-info__subtitle{color:var(--nylas-base-600);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-event-info__content{padding:1rem;display:flex;flex-direction:column;gap:1rem}.nylas-event-info__block{display:flex;justify-content:space-between;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;
@@ -43,7 +43,7 @@ const NylasEventInfo = class {
         debug('nylas-event-info', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '0bb711d5c047feb6eabe91f0067fa12080ff1e05' }, h("nylas-form-card", { key: 'c01cb8fc177acda4a20b0327f3567cd98ff4d1c1' }, h("h1", { key: 'b6bb50950769c270a06b6af0e3af527cac3202d4', slot: "header-title", class: "nylas-event-info__title" }, "Event information"), h("h3", { key: 'e02f8407c1737626118e4bf85c81ae9cfbf11167', slot: "header-subtitle", class: "nylas-event-info__subtitle" }, "Enter all event information."), h("div", { key: 'a2e3467a533b29de82a30ee540f1cd7249cefaf4', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: '90659526ed86eba38a7d1974bd14e16994fb61dd', name: "inputs" })))));
+        return (h(Host, { key: '61e095027d4b933ff2d2cc17a5a9d8a6d1add51e' }, h("nylas-form-card", { key: '0aa8cfa9d92db31b33e30879f1baeda834a0b2f0' }, h("h1", { key: '1f8cb65c3b5b821d7f59b06a4ee338e2fd6bcc5b', slot: "header-title", class: "nylas-event-info__title" }, "Event information"), h("h3", { key: '40698f86b92127532457ece61c931eabced1ec25', slot: "header-subtitle", class: "nylas-event-info__subtitle" }, "Enter all event information."), h("div", { key: '724866551790e31b39fa016f6b88629573639cd6', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: 'ef0cd2dd50b7f160d2806d4e4b04f9fd39d1bf83', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
 };