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

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

@@ -19,7 +19,7 @@ const GoogleLogoIcon = class {
         this.height = '24';
     }
     render() {
-        return (index.h("svg", { key: '48ccae649f280d48621dfb214a08b980155680a1', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '10196951caa0fa0b94b57c57a62d8bcb31d92d91', "clip-path": "url(#clip0_959_12452)" }, index.h("path", { key: '0d2358cd1dcbd7f9ef2dfa17a5075a341210a43c', d: "M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z", fill: "#4285F4" }), index.h("path", { key: '8540c5619b64996b6b158fe50609aa378dfd468f', d: "M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z", fill: "#34A853" }), index.h("path", { key: 'b683a33b6068de0793ef4426e6404d438dbdf73e', d: "M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z", fill: "#FBBC05" }), index.h("path", { key: '916d663bbb04c8267e595adf9125068232414ed7', d: "M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z", fill: "#EA4335" })), index.h("defs", { key: 'a941f8ccb1711f648dc3e2db750496a2491b4b55' }, index.h("clipPath", { key: 'caef3b6e814ed957bcee43a794130dce6760702d', id: "clip0_959_12452" }, index.h("rect", { key: 'df7c24b60402fd2e9d248f4e5ccfbaa640d549ae', width: 24, height: 24, fill: "white" })))));
+        return (index.h("svg", { key: '0e9d7d49a7c9b6cd2087805b88f0e5a2067dfaed', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'e97ac24bfe96bdba16a9709dde3ebc675e942d56', "clip-path": "url(#clip0_959_12452)" }, index.h("path", { key: '231167532157853cb95fddc85fa8cffcf1134ef4', d: "M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z", fill: "#4285F4" }), index.h("path", { key: '4f964a28a6b0894940c9d762a91db0c099f6c2c7', d: "M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z", fill: "#34A853" }), index.h("path", { key: '9ada4b2f2625f18538ff4455b1160efcfccbd646', d: "M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z", fill: "#FBBC05" }), index.h("path", { key: '6a260b3024a69fa930820a80a917152dc7ef52a7', d: "M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z", fill: "#EA4335" })), index.h("defs", { key: '56bc051b67a1bfa29ecaf64bac03ee1017836365' }, index.h("clipPath", { key: '8057800f9035048497e8198789e1e0b4dba1c64a', id: "clip0_959_12452" }, index.h("rect", { key: '6c0299822390d3433158d87c607fe9546e878eb0', width: 24, height: 24, fill: "white" })))));
     }
 };
 GoogleLogoIcon.style = GoogleLogoIconStyle0;
@@ -34,7 +34,7 @@ const MicrosoftLogoIcon = class {
         this.height = '22';
     }
     render() {
-        return (index.h("svg", { key: '4aa3482048f90ecbcb46d539716464bdf2c20e47', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '27924938927bdc57e665d91623f07684aea3a6ee', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: '91decf0bfe7ef26f93ea724fa9738d1ffa1ae4a6', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '0f455cec58fd99a755157ab9ca950242a634d541', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: '80c930047e54c708d5f7cde3d88f33f2a0d0dbd5', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
+        return (index.h("svg", { key: '3dd5e1a94ca5889c14f7695c9077f9be0cbc4d00', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '381068331f74d7f1a06c0ca0cd9dfc2b58f72a10', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: '62c7be7371433602169a19fe2657e0a1635f516e', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '72464e489d4cfd78f016282a743a1000fb732368', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: 'd766c4d950ee3122cf4916b53ce5f630b52a30bb', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
     }
 };
 MicrosoftLogoIcon.style = MicrosoftLogoIconStyle0;
@@ -77,7 +77,8 @@ function TabContents({ id, formState, activeTab, calendars }) {
                 index.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 (index.h("div", { key: id },
-                index.h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" })));
+                index.h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" }),
+                index.h("nylas-participants-custom-availability", { name: "participant-custom-availability", participants: formState.participants, exportparts: "npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider" })));
     }
 }
 
@@ -118,9 +119,25 @@ const NylasEditorTabs = class {
             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',
@@ -131,24 +148,34 @@ const NylasEditorTabs = class {
                     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 ?? constants.DEFAULT_OPEN_HOURS,
+                        default_open_hours: availability?.openHours ?? this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? constants.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() ?? '',
@@ -219,7 +246,8 @@ const NylasEditorTabs = class {
     handleValueChanged(event) {
         utils.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 = '';
     }
@@ -231,7 +259,7 @@ const NylasEditorTabs = class {
             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 ?? constants.DEFAULT_OPEN_HOURS,
             },
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
@@ -252,62 +280,69 @@ const NylasEditorTabs = class {
             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;
@@ -320,22 +355,22 @@ const NylasEditorTabs = class {
     render() {
         utils.debug('[nylas-editor-tabs]', 'render', this.formState);
         const showParticipantsTab = localStorage.getItem('nylas') === 'Nylas Developer';
-        return (index.h(index.Host, { key: 'ed57de888af9f29e6be4562b8d65c9800a6b4ad9' }, index.h("form", { key: '5f3d154f95b47b78fe3cc83a76df4d7e39330f80', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (index.h("div", { class: "form-contents" }, index.h("div", { class: "tabs" }, index.h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, index.h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), index.h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, index.h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), index.h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, index.h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (index.h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, index.h("people-icon", { width: "16", height: "16" }), "Participants"))), index.h("div", { class: "tab-content" }, index.h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (index.h("slot", null)), index.h("div", { key: 'c2a419fa59d6622e32627e476853ece732ff517c', class: "footer" }, index.h("div", { key: 'b4eab68c7ee5d35aa1f9a77e0ef1c47d5080252a', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (index.h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        return (index.h(index.Host, { key: '13aad28cba8de3b30e60d7a26849d30ef2578bb5' }, index.h("form", { key: '31e835f74ca7728d597148a18c840e0791c34c89', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (index.h("div", { class: "form-contents" }, index.h("div", { class: "tabs" }, index.h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, index.h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), index.h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, index.h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), index.h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, index.h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (index.h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, index.h("people-icon", { width: "16", height: "16" }), "Participants"))), index.h("div", { class: "tab-content" }, index.h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (index.h("slot", null)), index.h("div", { key: 'e83274ed2d92f179c90564a21f80ba869d1033a2', class: "footer" }, index.h("div", { key: 'c661b7a0c024f7b8f1c916b55bc5784a10ee9958', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (index.h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
                     window.open(utils.parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), index.h("div", { key: '0d1be883712a43e918d6a24415309e7fca51ac6b', class: "buttons" }, index.h("p", { key: 'e84e22ff1f71263e512ec95ee1513c53d4dadc10', class: {
+            }, variant: 'basic' }, "Preview"))), index.h("div", { key: '78cb89dbbb6e124aaddf9b486834e81ab10ea70a', class: "buttons" }, index.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!' : ''), index.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!' : ''), index.h("button-component", { key: '66500ec7f10c2a5ecb6d98647766e2f31f030fe4', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
                 this.error = '';
-            }, variant: 'basic' }, "Cancel"), index.h("button-component", { key: '16324ef17540626894bde0f55c1198d45ef0d0ce', type: "submit", disabled: this.isLoading }, this.isLoading ? (index.h("span", null, "Saving", index.h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+            }, variant: 'basic' }, "Cancel"), index.h("button-component", { key: 'a816e4c9d7d1f53e09edf635f06c9a177bdcb15a', type: "submit", disabled: this.isLoading }, this.isLoading ? (index.h("span", null, "Saving", index.h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {