@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.18

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

@@ -2,45 +2,47 @@ import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/
 import { R as RegisterComponent } from './register-component.js';
 import { q as mergeDeep, a as debug, s as parsePreviewLink } from './utils.js';
 import { D as DEFAULT_OPEN_HOURS } from './constants.js';
-import { d as defineCustomElement$E } from './add-circle.js';
-import { d as defineCustomElement$D } from './button-component2.js';
-import { d as defineCustomElement$C } from './calendar-info.js';
-import { d as defineCustomElement$B } from './calendar-patterns.js';
-import { d as defineCustomElement$A } from './checkbox-component2.js';
-import { d as defineCustomElement$z } from './chevron.js';
-import { d as defineCustomElement$y } from './close.js';
-import { d as defineCustomElement$x } from './flow.js';
-import { d as defineCustomElement$w } from './globe.js';
-import { d as defineCustomElement$v } from './info.js';
-import { d as defineCustomElement$u } from './input-dropdown2.js';
-import { d as defineCustomElement$t } from './loading.js';
-import { d as defineCustomElement$s } from './location.js';
-import { d as defineCustomElement$r } from './location-off.js';
-import { d as defineCustomElement$q } from './multi-select-dropdown2.js';
-import { d as defineCustomElement$p } from './nylas-additional-participants2.js';
-import { d as defineCustomElement$o } from './nylas-availability-picker2.js';
-import { d as defineCustomElement$n } from './nylas-booking-calendar-picker2.js';
-import { d as defineCustomElement$m } from './nylas-buffer-time2.js';
-import { d as defineCustomElement$l } from './nylas-calendar-picker2.js';
-import { d as defineCustomElement$k } from './nylas-cancellation-policy2.js';
-import { d as defineCustomElement$j } from './nylas-customize-booking-settings2.js';
-import { d as defineCustomElement$i } from './nylas-event-description2.js';
-import { d as defineCustomElement$h } from './nylas-event-duration2.js';
-import { d as defineCustomElement$g } from './nylas-event-info2.js';
-import { d as defineCustomElement$f } from './nylas-event-limits2.js';
-import { d as defineCustomElement$e } from './nylas-event-location2.js';
-import { d as defineCustomElement$d } from './nylas-event-title2.js';
-import { d as defineCustomElement$c } from './nylas-form-card2.js';
-import { d as defineCustomElement$b } from './nylas-limit-future-bookings2.js';
-import { d as defineCustomElement$a } from './nylas-min-booking-notice2.js';
-import { d as defineCustomElement$9 } from './nylas-min-cancellation-notice2.js';
-import { d as defineCustomElement$8 } from './nylas-time-window-picker2.js';
-import { d as defineCustomElement$7 } from './nylas-timeslot-interval2.js';
-import { d as defineCustomElement$6 } from './people.js';
-import { d as defineCustomElement$5 } from './radio-button-group2.js';
-import { d as defineCustomElement$4 } from './search.js';
-import { d as defineCustomElement$3 } from './select-dropdown2.js';
-import { d as defineCustomElement$2 } from './time-period-selector2.js';
+import { d as defineCustomElement$G } from './add-circle.js';
+import { d as defineCustomElement$F } from './button-component2.js';
+import { d as defineCustomElement$E } from './calendar-info.js';
+import { d as defineCustomElement$D } from './calendar-patterns.js';
+import { d as defineCustomElement$C } from './checkbox-component2.js';
+import { d as defineCustomElement$B } from './chevron.js';
+import { d as defineCustomElement$A } from './close.js';
+import { d as defineCustomElement$z } from './flow.js';
+import { d as defineCustomElement$y } from './globe.js';
+import { d as defineCustomElement$x } from './info.js';
+import { d as defineCustomElement$w } from './input-dropdown2.js';
+import { d as defineCustomElement$v } from './loading.js';
+import { d as defineCustomElement$u } from './location.js';
+import { d as defineCustomElement$t } from './location-off.js';
+import { d as defineCustomElement$s } from './multi-select-dropdown2.js';
+import { d as defineCustomElement$r } from './nylas-additional-participants2.js';
+import { d as defineCustomElement$q } from './nylas-availability-picker2.js';
+import { d as defineCustomElement$p } from './nylas-booking-calendar-picker2.js';
+import { d as defineCustomElement$o } from './nylas-buffer-time2.js';
+import { d as defineCustomElement$n } from './nylas-calendar-picker2.js';
+import { d as defineCustomElement$m } from './nylas-cancellation-policy2.js';
+import { d as defineCustomElement$l } from './nylas-customize-booking-settings2.js';
+import { d as defineCustomElement$k } from './nylas-event-description2.js';
+import { d as defineCustomElement$j } from './nylas-event-duration2.js';
+import { d as defineCustomElement$i } from './nylas-event-info2.js';
+import { d as defineCustomElement$h } from './nylas-event-limits2.js';
+import { d as defineCustomElement$g } from './nylas-event-location2.js';
+import { d as defineCustomElement$f } from './nylas-event-title2.js';
+import { d as defineCustomElement$e } from './nylas-form-card2.js';
+import { d as defineCustomElement$d } from './nylas-limit-future-bookings2.js';
+import { d as defineCustomElement$c } from './nylas-min-booking-notice2.js';
+import { d as defineCustomElement$b } from './nylas-min-cancellation-notice2.js';
+import { d as defineCustomElement$a } from './nylas-participants-custom-availability2.js';
+import { d as defineCustomElement$9 } from './nylas-time-window-picker2.js';
+import { d as defineCustomElement$8 } from './nylas-timeslot-interval2.js';
+import { d as defineCustomElement$7 } from './people.js';
+import { d as defineCustomElement$6 } from './radio-button-group2.js';
+import { d as defineCustomElement$5 } from './search.js';
+import { d as defineCustomElement$4 } from './select-dropdown2.js';
+import { d as defineCustomElement$3 } from './time-period-selector2.js';
+import { d as defineCustomElement$2 } from './toggle-switch2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
 function TabContents({ id, formState, activeTab, calendars }) {
@@ -81,7 +83,8 @@ function TabContents({ id, formState, activeTab, calendars }) {
                 h("nylas-customize-booking-settings", { name: "customize-booking-settings", exportparts: "ncbs, ncbs__header, ncbs__settings, ncbs__settings-div, ncbs__additional_guests, ncbs__cancellation_options, ncbs__rescheduling_options" })));
         case 'participants':
             return (h("div", { key: id },
-                h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" })));
+                h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" }),
+                h("nylas-participants-custom-availability", { name: "participant-custom-availability", participants: formState.participants, exportparts: "npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider" })));
     }
 }
 
@@ -122,9 +125,25 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
             this.isLoading = true;
             this.hasUnsavedChanges = false;
             const formState = this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, } = formState;
+            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, participantOpenHours, } = formState;
             const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);
             const durationMinutes = duration ? parseInt(duration) : 30;
+            const participantsList = participants && participants?.length > 0
+                ? participants
+                : [
+                    {
+                        name: organizer?.name ?? this.currentUser?.name ?? organizer?.email ?? this.currentUser?.email ?? '',
+                        email: organizer?.email ?? this.currentUser?.email ?? '',
+                        is_organizer: true,
+                        availability: {
+                            calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
+                            open_hours: [],
+                        },
+                        booking: {
+                            calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
+                        },
+                    },
+                ];
             const configObject = {
                 ...(this.selectedConfiguration?.id && { id: this.selectedConfiguration.id }),
                 version: this.selectedConfiguration?.version ?? '1.0.0',
@@ -135,24 +154,34 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
                     availability_rules: {
                         availability_method: this.selectedConfiguration?.availability?.availability_rules?.availability_method ?? 'collective',
                         buffer: buffer || { before: 0, after: 0 },
-                        default_open_hours: this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
+                        default_open_hours: availability?.openHours ?? this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
                         round_robin_group_id: this.selectedConfiguration?.availability?.availability_rules?.round_robin_group_id ?? '',
                     },
                 },
                 participants: [
-                    {
-                        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'],
-                            open_hours: availability?.openHours ?? [],
-                        },
-                        booking: {
-                            calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
-                        },
-                    },
-                    ...(participants ?? []),
+                    ...participantsList?.map(p => {
+                        if (p.is_organizer) {
+                            return {
+                                name: p.name ?? p.email,
+                                email: p.email,
+                                is_organizer: true,
+                                availability: {
+                                    calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
+                                    open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
+                                },
+                                booking: {
+                                    calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
+                                },
+                            };
+                        }
+                        return {
+                            ...p,
+                            availability: {
+                                calendar_ids: p.availability?.calendar_ids ?? ['primary'],
+                                open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
+                            },
+                        };
+                    }),
                 ],
                 event_booking: {
                     title: title?.toString() ?? '',
@@ -223,7 +252,8 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
         const { name, value } = event.detail;
-        this.formState = { ...this.formState, [name]: value };
+        this.setFormState(value, name);
+        this.formState = { ...this.formState };
         this.hasUnsavedChanges = true;
         this.error = '';
     }
@@ -235,7 +265,7 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
             duration: config?.availability?.duration_minutes?.toString() ?? '30',
             availability: {
                 timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
-                openHours: organizerParticipant?.availability?.open_hours,
+                openHours: config?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
             },
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
@@ -256,62 +286,69 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
             hideReschedulingOptions: config?.scheduler?.hide_rescheduling_options ?? false,
         };
     }
+    setFormState(value, key) {
+        switch (key) {
+            case 'title':
+                this.formState.title = value.toString();
+                break;
+            case 'description':
+                this.formState.description = value.toString();
+                break;
+            case 'duration':
+                this.formState.duration = value.toString();
+                break;
+            case 'availability':
+                this.formState.availability = JSON.parse(value.toString());
+                break;
+            case 'participants':
+                this.formState.participants = JSON.parse(value.toString());
+                break;
+            case 'calendars':
+                this.formState.calendarIds = value.toString().split(',');
+                break;
+            case 'booking-calendar':
+                this.formState.bookingCalendar = value.toString();
+                break;
+            case 'location':
+                this.formState.location = value.toString();
+                break;
+            case 'booking-type':
+                this.formState.bookingType = value.toString();
+                break;
+            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;
+            case 'min-booking-notice':
+                this.formState.minBookingNotice = parseInt(value.toString());
+                break;
+            case 'cancellation-policy':
+                this.formState.cancellationPolicy = value.toString();
+                break;
+            case 'timeslot-interval':
+                this.formState.timeslotInterval = JSON.parse(value.toString());
+                break;
+            case 'customize-booking-settings':
+                const settings = JSON.parse(value.toString());
+                this.formState.additionalGuestsHidden = settings.additionalGuestsHidden;
+                this.formState.hideCancellationOptions = settings.hideCancellationOptions;
+                this.formState.hideReschedulingOptions = settings.hideReschedulingOptions;
+                break;
+            case 'participant-custom-availability':
+                const participantOpenHours = JSON.parse(value.toString());
+                this.formState.participantOpenHours = participantOpenHours;
+                break;
+        }
+    }
     updateFormState() {
         const formData = new FormData(this.formRef);
         formData.forEach((value, key) => {
-            switch (key) {
-                case 'title':
-                    this.formState.title = value.toString();
-                    break;
-                case 'description':
-                    this.formState.description = value.toString();
-                    break;
-                case 'duration':
-                    this.formState.duration = value.toString();
-                    break;
-                case 'availability':
-                    this.formState.availability = JSON.parse(value.toString());
-                    break;
-                case 'participants':
-                    this.formState.participants = JSON.parse(value.toString());
-                    break;
-                case 'calendars':
-                    this.formState.calendarIds = value.toString().split(',');
-                    break;
-                case 'booking-calendar':
-                    this.formState.bookingCalendar = value.toString();
-                    break;
-                case 'location':
-                    this.formState.location = value.toString();
-                    break;
-                case 'booking-type':
-                    this.formState.bookingType = value.toString();
-                    break;
-                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;
-                case 'min-booking-notice':
-                    this.formState.minBookingNotice = parseInt(value.toString());
-                    break;
-                case 'cancellation-policy':
-                    this.formState.cancellationPolicy = value.toString();
-                    break;
-                case 'timeslot-interval':
-                    this.formState.timeslotInterval = JSON.parse(value.toString());
-                    break;
-                case 'customize-booking-settings':
-                    const settings = JSON.parse(value.toString());
-                    this.formState.additionalGuestsHidden = settings.additionalGuestsHidden;
-                    this.formState.hideCancellationOptions = settings.hideCancellationOptions;
-                    this.formState.hideReschedulingOptions = settings.hideReschedulingOptions;
-                    break;
-            }
+            this.setFormState(value, key);
         });
         this.formState = { ...this.formState };
         return this.formState;
@@ -324,22 +361,22 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
     render() {
         debug('[nylas-editor-tabs]', 'render', this.formState);
         const showParticipantsTab = localStorage.getItem('nylas') === 'Nylas Developer';
-        return (h(Host, { key: 'ed57de888af9f29e6be4562b8d65c9800a6b4ad9' }, h("form", { key: '5f3d154f95b47b78fe3cc83a76df4d7e39330f80', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, h("people-icon", { width: "16", height: "16" }), "Participants"))), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: 'c2a419fa59d6622e32627e476853ece732ff517c', class: "footer" }, h("div", { key: 'b4eab68c7ee5d35aa1f9a77e0ef1c47d5080252a', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        return (h(Host, { key: '13aad28cba8de3b30e60d7a26849d30ef2578bb5' }, h("form", { key: '31e835f74ca7728d597148a18c840e0791c34c89', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, h("people-icon", { width: "16", height: "16" }), "Participants"))), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: 'e83274ed2d92f179c90564a21f80ba869d1033a2', class: "footer" }, h("div", { key: 'c661b7a0c024f7b8f1c916b55bc5784a10ee9958', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
                     window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), h("div", { key: '0d1be883712a43e918d6a24415309e7fca51ac6b', class: "buttons" }, h("p", { key: 'e84e22ff1f71263e512ec95ee1513c53d4dadc10', class: {
+            }, variant: 'basic' }, "Preview"))), h("div", { key: '78cb89dbbb6e124aaddf9b486834e81ab10ea70a', class: "buttons" }, h("p", { key: 'e07f651a081607471d067aa05a3858446725a6db', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
                 'error': this.error !== '',
                 'error-full-width': this.error !== '' && this.action === 'create',
-            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: 'dd4e56935a6b20576b5316acb76947375084dfce', type: "button", disabled: this.isLoading, clickHandler: event => {
+            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '66500ec7f10c2a5ecb6d98647766e2f31f030fe4', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
                 this.error = '';
-            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '16324ef17540626894bde0f55c1198d45ef0d0ce', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+            }, variant: 'basic' }, "Cancel"), h("button-component", { key: 'a816e4c9d7d1f53e09edf635f06c9a177bdcb15a', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -412,7 +449,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nylas-editor-tabs", "add-circle-icon", "button-component", "calendar-info-icon", "calendar-patterns-icon", "checkbox-component", "chevron-icon", "close-icon", "flow-icon", "globe-icon", "info-icon", "input-dropdown", "loading-icon", "location-icon", "location-off-icon", "multi-select-dropdown", "nylas-additional-participants", "nylas-availability-picker", "nylas-booking-calendar-picker", "nylas-buffer-time", "nylas-calendar-picker", "nylas-cancellation-policy", "nylas-customize-booking-settings", "nylas-event-description", "nylas-event-duration", "nylas-event-info", "nylas-event-limits", "nylas-event-location", "nylas-event-title", "nylas-form-card", "nylas-limit-future-bookings", "nylas-min-booking-notice", "nylas-min-cancellation-notice", "nylas-time-window-picker", "nylas-timeslot-interval", "people-icon", "radio-button-group", "search-icon", "select-dropdown", "time-period-selector", "tooltip-component"];
+    const components = ["nylas-editor-tabs", "add-circle-icon", "button-component", "calendar-info-icon", "calendar-patterns-icon", "checkbox-component", "chevron-icon", "close-icon", "flow-icon", "globe-icon", "info-icon", "input-dropdown", "loading-icon", "location-icon", "location-off-icon", "multi-select-dropdown", "nylas-additional-participants", "nylas-availability-picker", "nylas-booking-calendar-picker", "nylas-buffer-time", "nylas-calendar-picker", "nylas-cancellation-policy", "nylas-customize-booking-settings", "nylas-event-description", "nylas-event-duration", "nylas-event-info", "nylas-event-limits", "nylas-event-location", "nylas-event-title", "nylas-form-card", "nylas-limit-future-bookings", "nylas-min-booking-notice", "nylas-min-cancellation-notice", "nylas-participants-custom-availability", "nylas-time-window-picker", "nylas-timeslot-interval", "people-icon", "radio-button-group", "search-icon", "select-dropdown", "time-period-selector", "toggle-switch", "tooltip-component"];
     components.forEach(tagName => { switch (tagName) {
         case "nylas-editor-tabs":
             if (!customElements.get(tagName)) {
@@ -421,195 +458,205 @@ function defineCustomElement() {
             break;
         case "add-circle-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$E();
+                defineCustomElement$G();
             }
             break;
         case "button-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$F();
             }
             break;
         case "calendar-info-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$E();
             }
             break;
         case "calendar-patterns-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$D();
             }
             break;
         case "checkbox-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$C();
             }
             break;
         case "chevron-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$B();
             }
             break;
         case "close-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$A();
             }
             break;
         case "flow-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$z();
             }
             break;
         case "globe-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$y();
             }
             break;
         case "info-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$x();
             }
             break;
         case "input-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$w();
             }
             break;
         case "loading-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$v();
             }
             break;
         case "location-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$u();
             }
             break;
         case "location-off-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$t();
             }
             break;
         case "multi-select-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$s();
             }
             break;
         case "nylas-additional-participants":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$r();
             }
             break;
         case "nylas-availability-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$q();
             }
             break;
         case "nylas-booking-calendar-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$p();
             }
             break;
         case "nylas-buffer-time":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$o();
             }
             break;
         case "nylas-calendar-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$n();
             }
             break;
         case "nylas-cancellation-policy":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$m();
             }
             break;
         case "nylas-customize-booking-settings":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$l();
             }
             break;
         case "nylas-event-description":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$k();
             }
             break;
         case "nylas-event-duration":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
             }
             break;
         case "nylas-event-info":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$i();
             }
             break;
         case "nylas-event-limits":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "nylas-event-location":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$g();
             }
             break;
         case "nylas-event-title":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$f();
             }
             break;
         case "nylas-form-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$e();
             }
             break;
         case "nylas-limit-future-bookings":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "nylas-min-booking-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "nylas-min-cancellation-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
+            }
+            break;
+        case "nylas-participants-custom-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
             }
             break;
         case "nylas-time-window-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "nylas-timeslot-interval":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "people-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "radio-button-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "search-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "select-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "time-period-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "toggle-switch":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }