@nylas/web-elements 1.3.2 → 1.3.3

package/dist/esm/calendar-agenda-fill-icon_53.entry.js

@@ -410,10 +410,10 @@ const NylasAdditionalParticipants = class {
     componentWillLoad() {
         debug('nylas-additional-participants', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        this.updateState(this.selectedConfiguration, this.currentUser);
     }
     componentDidLoad() {
         debug('nylas-additional-participants', 'componentDidLoad');
+        this.updateState(this.selectedConfiguration, this.currentUser);
     }
     disconnectedCallback() {
         debug('nylas-additional-participants', 'disconnectedCallback');
@@ -3998,6 +3998,28 @@ var __metadata$q = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
+const staticFields = [
+    {
+        type: 'text',
+        label: 'Your name',
+        key: 'your_name',
+        typeLabel: 'Short text',
+        readonly: true,
+        required: true,
+        isOpen: false,
+        order: 0,
+    },
+    {
+        type: 'email',
+        label: 'Your Email',
+        key: 'your_email',
+        typeLabel: 'Email',
+        readonly: true,
+        isOpen: false,
+        required: true,
+        order: 1,
+    },
+];
 const NylasBookingFormConfig = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -4018,6 +4040,9 @@ const NylasBookingFormConfig = class {
         debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newValue) {
+        this.updateFormFields(newValue);
+    }
     connectedCallback() {
         debug('nylas-booking-form-config', 'connectedCallback');
     }
@@ -4027,37 +4052,18 @@ const NylasBookingFormConfig = class {
     componentWillLoad() {
         debug('nylas-booking-form-config', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        const staticFields = [
-            {
-                type: 'text',
-                label: 'Your name',
-                key: 'your_name',
-                typeLabel: 'Short text',
-                readonly: true,
-                required: true,
-                isOpen: false,
-                order: 0,
-            },
-            {
-                type: 'email',
-                label: 'Your Email',
-                key: 'your_email',
-                typeLabel: 'Email',
-                readonly: true,
-                isOpen: false,
-                required: true,
-                order: 1,
-            },
-        ];
         this.formFields = [...staticFields];
     }
     componentDidLoad() {
         debug('nylas-booking-form-config', 'componentDidLoad');
-        const additionalFields = Object.entries(this.selectedConfiguration?.scheduler?.additional_fields || {}).map(([id, field]) => ({ ...field, key: id })) ||
-            this.additionalFields ||
-            [];
+        if (this.selectedConfiguration) {
+            this.updateFormFields(this.selectedConfiguration);
+        }
+    }
+    updateFormFields(config) {
+        const additionalFields = Object.entries(config?.scheduler?.additional_fields || {}).map(([id, field]) => ({ ...field, key: id })) || this.additionalFields || [];
         this.formFields = [
-            ...this.formFields,
+            ...staticFields,
             ...additionalFields
                 .sort((a, b) => a.order - b.order)
                 .map((f, i) => {
@@ -4265,7 +4271,7 @@ const NylasBookingFormConfig = class {
         });
     }
     render() {
-        return (h(Host, { key: '632d9bd6cc0162efdb7e83b78b23935f04569fcb' }, h("div", { key: 'dae8d7f52a658b121a992f9cd73cd766e2c16cec', class: "nylas-booking-form-config", part: "nbfc" }, h("div", { key: '4f02c7163dfecd29df48da9b163e12e9a6c9c357', class: "header", part: "nbfc__header" }, h("div", { key: '169cfa3f8d4dd519dd0621d032d3e7a13384b8c7', class: "header_text" }, h("h3", { key: '66e50347bae8fca4c3344030d4d3caf4158244e2' }, "Booking form"), h("p", { key: '883886b2c841acdbd44e6cb1c18a860a51c52412' }, "Add custom fields to the booking form.")), h("div", { key: 'e307526fa6d75c4aaaa71c5658006d9e7417c0f0', class: "header_action" }, h("select-dropdown", { key: '4b16dd221f5740b21cde95488e2609730e08ea54', name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, h("span", { key: '5ccd949bb563f32f1682b9432759828f086b46e3', slot: "select-icon" }, h("plus-icon", { key: 'b77ac5dd297071ec6e16c3728db1a7b096e83e74', width: "15", height: "15" }))))), h("div", { key: 'a7499ce8959d027f0540b086c3393353c3993452', class: "content" }, h("div", { key: 'ff24161e13beba123ca46c814515704bf06d4259', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
+        return (h(Host, { key: 'bd832f2b9a02ce53187e4f633e4c0388e6e65a03' }, h("div", { key: 'fcf79fe131d8e0a99312286b15f228b997d8c0be', class: "nylas-booking-form-config", part: "nbfc" }, h("div", { key: '07cd086a8af8145f5a8c6676e360fa5f919040f3', class: "header", part: "nbfc__header" }, h("div", { key: 'f703982061b36b7f4b792f4deff59cc4256b7c25', class: "header_text" }, h("h3", { key: 'a7cba135c527592a000c296ceaf68bb91c9ddcf4' }, "Booking form"), h("p", { key: '62acf8b4a583145e2bc300b1b351799dec1ff438' }, "Add custom fields to the booking form.")), h("div", { key: '574ef9a02aa06ad29ac0b08c22aa749a844d32d8', class: "header_action" }, h("select-dropdown", { key: 'c2a83f721237dc1032af5e55e17438e1060b2e58', name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, h("span", { key: 'e0aaa33a3bd04b79499310c3904984269eaecbf3', slot: "select-icon" }, h("plus-icon", { key: '06bf29f2b3d0dca74d660db8791a47bc2474652b', width: "15", height: "15" }))))), h("div", { key: 'b33cfae9a876be328d795366802a1791e22ca164', class: "content" }, h("div", { key: '0df453e1fc129a13b90b33c6e267ecd9dd149c56', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
             return (h("div", { class: `form-field draggable ${field.readonly && 'fixed'}`, part: "nbfc__form_field", key: i }, h("div", { class: "form-field_header", part: "nbfc__form_field-header" }, h("span", { class: "dragable" }, h("dragable-icon", { width: "24", height: "25" })), h("div", { class: "form-field_header_text" }, h("h4", null, field.label), h("p", null, field.typeLabel)), h("div", { class: "form-field_header_actions" }, h("span", { class: `is-required` }, field.required ? 'Required' : 'Optional'), !field.readonly && (h("button", { onClick: () => {
                     this.fieldRemove(i);
                 } }, h("close-icon", null))), h("span", { class: `chevron ${field.isOpen ? 'open' : 'closed'}`, onClick: () => {
@@ -4285,6 +4291,7 @@ const NylasBookingFormConfig = class {
     get host() { return getElement(this); }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "formFields": ["watchHandler"]
     }; }
 };
@@ -4354,14 +4361,8 @@ const NylasBufferTime = class {
             this.selectedBeforeBufferTime = this.buffer.before;
             this.selectedAfterBufferTime = this.buffer.after;
         }
+        this.updateFormValue();
         this.componentLoaded = true;
-        if (typeof this.internals.setFormValue === 'function') {
-            const bufferTime = {
-                before: this.selectedBeforeBufferTime,
-                after: this.selectedAfterBufferTime,
-            };
-            this.internals.setFormValue(JSON.stringify(bufferTime), this.name);
-        }
     }
     componentWillUpdate() {
         debug('nylas-buffer-time', 'componentWillUpdate');
@@ -4384,6 +4385,7 @@ const NylasBufferTime = class {
         const buffer = newValue?.availability?.availability_rules?.buffer;
         this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;
         this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;
+        this.updateFormValue();
     }
     nylasFormDropdownChangedHandler(event) {
         debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);
@@ -4395,14 +4397,20 @@ const NylasBufferTime = class {
             else if (name === 'after-buffer-time') {
                 this.selectedAfterBufferTime = parseInt(value);
             }
-            const bufferTime = {
-                before: this.selectedBeforeBufferTime,
-                after: this.selectedAfterBufferTime,
-            };
-            this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');
+            this.updateFormValue();
         };
         this.valueChanged.emit({ ...event.detail, valueChanged });
     }
+    get isInternalsAvailable() {
+        return this.internals !== undefined && typeof this.internals.setFormValue === 'function';
+    }
+    updateFormValue() {
+        const bufferTime = {
+            before: this.selectedBeforeBufferTime,
+            after: this.selectedAfterBufferTime,
+        };
+        this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(bufferTime), this.name);
+    }
     renderPreview() {
         const totalSlots = 4;
         const slotHeight = 10;
@@ -5016,14 +5024,14 @@ const NylasConnectedCalendars = class {
                 selectedParticipants[participant.email] = {
                     isOpen: isOpen,
                     name: participant.name || participant.email,
-                    availability: participant.availability,
+                    calendars: participant.availability?.calendar_ids,
                 };
             }
         });
         return selectedParticipants;
     }
     render() {
-        return (h(Host, { key: '32710fe762bdf90e238c62695957a9fca31db258' }, h("div", { key: 'a5ebf4adb7eb8e1b8a065bc05733738da06fbac3', class: "nylas-connected-calendars", part: "nccals" }, h("div", { key: 'f3c820bcde922a7b852630d86145b1e6e1bf0e25', class: "header", part: "nccals__header" }, h("h3", { key: 'e2b68d05d416c322b22f969d8d8c890a09812154' }, "Connected Calendars"), h("p", { key: '4dd41d10a6043fec1c0f4943371c312a29e1d489' }, "Select the calendars to use for checking your availability.", h("tooltip-component", { key: '6a8ec009fd879e1ed6b6fb65be75a88255adba17' }, h("info-icon", { key: '0d4a99eaee064ecee1c82ee5b13f3ab87a1d5d93', slot: "tooltip-icon" }), h("span", { key: 'de3779efce64d7a14dbc3f7759c827005f92ed50', slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), h("div", { key: '720267110636c1dc06ac67b7e715515f56737b73', class: "content", part: "nccals__content" }, h("form", { key: 'f295ba327aa302ea186dbf2daef3a9c30f96ee5f', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
+        return (h(Host, { key: '4b8cfcfa751c2790968049f6f10a06193f9adc70' }, h("div", { key: 'ffbcde80612886bc09b4419bc1cc47d585834fac', class: "nylas-connected-calendars", part: "nccals" }, h("div", { key: 'd00c14cd0ab8107a2ba609ba58b596a7d3e1e69f', class: "header", part: "nccals__header" }, h("h3", { key: 'cb0ad20533c33a3778d0b89fe5d51aa4c15864a8' }, "Connected Calendars"), h("p", { key: 'b3488e835534f477d2585be0a60b5800d42cbaac' }, "Select the calendars to use for checking your availability.", h("tooltip-component", { key: '6acbd37df60566fa8a3fb8676fe3b3f4287d5c06' }, h("info-icon", { key: 'f1eb4a75f869b09bee95c074c8d180449654a49f', slot: "tooltip-icon" }), h("span", { key: 'e8aca8b29c7a89fe7b6eea0635761bdde19349e2', slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), h("div", { key: '844803e9ea3270bfcedbc212990c0038a74dd663', class: "content", part: "nccals__content" }, h("form", { key: '2970ec7cec45d2582b987cbfab8949c1ece02499', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
             const participant = this.selectedCalendars[key];
             const participantCalendars = this.participantCalendars[key];
             if (!participant || !participant.name)
@@ -5843,6 +5851,18 @@ const NylasEventLocation = class {
             this.location = '';
         }
     }
+    currentUserChangedHandler(newValue) {
+        debug('nylas-custom-booking-flow', 'currentUserChangedHandler', newValue);
+        if (newValue?.provider) {
+            this.userProviderState = newValue?.provider;
+            this.setLocationOptionsForProvider(this.userProviderState);
+        }
+    }
+    conferenceProvidersChanged(newValue) {
+        if (newValue?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {
+            this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });
+        }
+    }
     connectedCallback() {
         debug('nylas-event-location', 'connectedCallback');
     }
@@ -5859,15 +5879,8 @@ const NylasEventLocation = class {
             this.selectedLocationOption = this.setDefaultLocationOption(this.eventConferencing || null, this.eventLocation ?? '');
         }
         this.userProviderState = this.userProvider ?? this.currentUser?.provider ?? '';
-        switch (this.userProviderState) {
-            case 'google':
-                this.locationOptions.push({ value: 'google', label: labels['google'], labelHTML: this.getLabelHTML('google') });
-                break;
-            case 'microsoft':
-                this.locationOptions.push({ value: 'microsoft', label: labels['microsoft'], labelHTML: this.getLabelHTML('microsoft') });
-                break;
-        }
-        if (this.conferenceProviders?.['zoom']) {
+        this.setLocationOptionsForProvider(this.userProviderState);
+        if (this.conferenceProviders?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {
             this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });
         }
     }
@@ -5934,6 +5947,20 @@ const NylasEventLocation = class {
                 break;
         }
     }
+    setLocationOptionsForProvider(provider) {
+        switch (provider) {
+            case 'google':
+                if (!this.locationOptions.some(option => option.value === 'google')) {
+                    this.locationOptions.push({ value: 'google', label: labels['google'], labelHTML: this.getLabelHTML('google') });
+                }
+                break;
+            case 'microsoft':
+                if (!this.locationOptions.some(option => option.value === 'microsoft')) {
+                    this.locationOptions.push({ value: 'microsoft', label: labels['microsoft'], labelHTML: this.getLabelHTML('microsoft') });
+                }
+                break;
+        }
+    }
     setDefaultLocationOption(eventConferencing, eventLocation) {
         if (eventConferencing != null && eventConferencing?.provider != null && eventConferencing?.autocreate != null) {
             return CONFERENCE_PROVIDER_MAP[eventConferencing?.provider];
@@ -5984,13 +6011,15 @@ const NylasEventLocation = class {
     }
     render() {
         const defaultOption = typeof this.selectedLocationOption !== 'undefined' ? this.locationOptions.find(i => i.value == this.selectedLocationOption) : null;
-        return (h(Host, { key: '6869d3c2f6316dc482becc022bc973783332658f' }, h("div", { key: 'e17b95b15e181f73efd5c666ff0074bcd5467b65', class: "nylas-event-location", part: "nel" }, h("label", { key: '9370ab01f5f730099dd5061ccf39ca3b53132244', htmlFor: "location" }, "Event meeting or location", h("span", { key: 'acd558f22ad18afc63b93456450a5aa946916fd4', class: "label-icon" }, h("tooltip-component", { key: 'bd2ea171a9eef9e9a377a0be2dc4a16b91bb1359' }, h("info-icon", { key: '745289e658441e9aadb245c94da890cdb3119179', slot: "tooltip-icon" }), h("span", { key: 'ffa4a9597a7d63e33b639dafd736a654a97589c9', slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), h("div", { key: '59f930e30b758b740128b42a855608a02ee1a739', class: "location-input" }, defaultOption && defaultOption?.label && (h("select-dropdown", { withSearch: false, name: "location", options: this.locationOptions, defaultSelectedOption: defaultOption, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption)))), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: 'c91ef22df2a83a3c2ac66ca9011ad8633a085b9e' }, h("div", { key: '9e6823ce704cf4870f99936a39371b255b165afb', class: "nylas-event-location", part: "nel" }, h("label", { key: '2d1a71a258d0576460acd68a93cbace4a5c9254c', htmlFor: "location" }, "Event meeting or location", h("span", { key: '9dd7df66eec4e35a8659c88d4f26be99093e815a', class: "label-icon" }, h("tooltip-component", { key: '9299313bad5724106fa7108d0874e760945bcb30' }, h("info-icon", { key: '2490fbc28caa2547d8a3cecc747dc94254c59df3', slot: "tooltip-icon" }), h("span", { key: 'd6c73fef100e4f962507d58b4ed24a1bd19599c2', slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), h("div", { key: '726f78440a3e65e379368b0a849bee94b2839dfd', class: "location-input" }, defaultOption && defaultOption?.label && (h("select-dropdown", { withSearch: false, name: "location", options: this.locationOptions, defaultSelectedOption: defaultOption, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption)))), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
-        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
+        "currentUser": ["currentUserChangedHandler"],
+        "conferenceProviders": ["conferenceProvidersChanged"]
     }; }
 };
 __decorate$d([
@@ -7250,12 +7279,13 @@ const NylasPageStyling = class {
         this.isOpen = !this.isOpen;
     }
     render() {
-        return (h(Host, { key: '1601b88e8e7e2c500cb105f237949faa4e9d8dbd' }, h("div", { key: '2a3072bc409f07961da51439a0f45f930d0725de', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: '404727336fdf8d0de2d8e769df1dcc21ae69f34b', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: '2e7da0539b197347719a1202e04c1f7b238cdc9d', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: '55ba3e932216f073238b8385071defa9139ca0f9', class: "nylas-page-styling__row" }, h("div", { key: '333576450039ea7f76bfb548c5947609bc813837', class: { subsection: true, hide: !this.isOpen } })))))));
+        return (h(Host, { key: 'c2ffa8ae940e9594f254903d45abc3f7c01d7d41' }, h("div", { key: '1813654e2aaa9c66d5a535186f227968b434654c', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: 'cff4891eeb1a958feb2a6b20623b97f908721c60', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: '16b2398f10b6d7703d02bbbf5c43e3e229499b2d', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: 'fd09434076ea4626ee9d7b2710ec8418325aa117', class: "nylas-page-styling__row" }, h("div", { key: '16a29cabadc4f1a4ba9f389fe232ea22125cfe36', class: { subsection: true, hide: !this.isOpen } })))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "name": ["elementNameChangedHandler"]
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }; }
 };
 __decorate$6([
@@ -7599,8 +7629,9 @@ const NylasParticipantsCustomAvailability = class {
         return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';
     }
     render() {
-        return (h(Host, { key: '5034211537411e732ffee5f7420884e5908cc4e5' }, h("div", { key: '6d016a9b8a3dd204521d9f63de90cd848e9c49e7', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: 'fff77ce67f19e5b0bdc7a8b491ff38b1b7d9af55', class: "header", part: "npca__header" }, h("h3", { key: '656016ac8ee26636fad2e725237b1bb538563864' }, "Participant open hours"), h("p", { key: '87ab243b9f3402150c6dae36fc702d7f675350c3' }, "If not set, the default open hours will be used to calculate availability for this participant.")), h("div", { key: 'ba6c30fbb85fc26d6471494716b18f7f815900ec', class: "content", part: "npca__content" }, h("form", { key: '7cc553b6730ead929fc45efa67b29b56e41f022e', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+        return (h(Host, { key: '64198b8231e1739484f81d02167d7b5f456eda69' }, h("div", { key: '68eb8279c510ef937e19dec06960867c98a5b02a', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: '9622d8a7fbc124723cb7135a3a3846fad0e4e458', class: "header", part: "npca__header" }, h("h3", { key: '6424eeeb937ce2225a63d76482ec633efacd9e7a' }, "Participant open hours"), h("p", { key: 'ac021fef4d4b0de03d5e2ca335563ec4f328156c' }, "If not set, the default open hours will be used to calculate availability for this participant.")), h("div", { key: 'e9412e214011b575954196e39ea265dcf86801ec', class: "content", part: "npca__content" }, h("form", { key: 'ab5b4239f2d2b31fcd69d0f2e2d61a8a13003739', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
             const participant = this.selectedParticipants[key];
+            const participantOpenHours = participant.availability?.open_hours || [];
             if (!participant || !participant.name || !participant.availability)
                 return;
             return (h("div", { class: "participant-container", part: "npca__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npca__participant-title" }, h("p", null, participant.name, "'s open hours"), h("div", { class: "participant-toggle", part: "npca__participant-toggle--container" }, h("toggle-switch", { exportparts: "ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider", name: key, checked: !!participant?.openHours && participant?.openHours.length > 0 }), h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`, onClick: () => {
@@ -7608,7 +7639,7 @@ const NylasParticipantsCustomAvailability = class {
                         return;
                     this.selectedParticipants[key].isOpen = !participant.isOpen;
                     this.selectedParticipants = { ...this.selectedParticipants };
-                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participant.openHours, defaultTimezone: participant.timezone, hideHeader: true }))));
+                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participantOpenHours, defaultTimezone: participant.timezone, hideHeader: true }))));
         }))))));
     }
     static get formAssociated() { return true; }