npm - @nylas/web-elements - Versions diffs - 0.0.0-canary-20241008193213 → 0.0.0-canary-20241015194719 - Mend

@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241015194719

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 (813) hide show

package/dist/components/nylas-booked-event-card2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booked-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n}\n\n.nylas-booked-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n margin-bottom: 2rem;\n width: 424px;\n\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 0;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 1rem;\n font-weight: 400;\n border-bottom: 1px solid var(--nylas-base-200);\n width: inherit;\n padding: 0 0 1.5rem;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n\n .card-description {\n text-align: center;\n }\n}\n\n.booking-date-time,\n.booking-participants {\n padding: 0 1rem;\n margin-top: 1.5rem;\n margin-left: 3rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-self: flex-start;\n position: relative;\n\n svg {\n color: var(--nylas-base-700);\n position: absolute;\n left: -10px;\n }\n\n .block {\n display: block;\n }\n\n h3 {\n color: var(--nylas-base-600);\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.25rem;\n text-align: justify;\n margin-bottom: 4px;\n }\n\n p {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n text-align: justify;\n color: var(--nylas-base-800);\n }\n}\n\n.booking-participants {\n margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n display: flex;\n color: var(--nylas-base-600);\n margin-bottom: 1.5rem;\n gap: 4px;\n margin: 2rem;\n align-items: center;\n align-self: flex-end;\n}\n\n.button-container {\n width: inherit;\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n border-top: 1px solid var(--nylas-base-200);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatTimezone } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n The selected language.\n /\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n @State() startTime: string = '';\n @State() endTime: string = '';\n\n /\n Cancel booking button clicked event.\n /\n @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n /\n @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n error: {\n title: string;\n message: string;\n };\n }>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-booked-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-booked-event-card] Component did load`);\n if (!this.eventInfo) {\n console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n }\n if (!this.bookingInfo) {\n console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n }\n\n this.startTime = formatTimezone(this.selectedTimeslot?.start_time as Date, this.selectedTimezone);\n this.endTime = formatTimezone(this.selectedTimeslot?.end_time as Date, this.selectedTimezone);\n }\n\n private handleCancelBookingButtonClicked = () => {\n const startTime = new Date(this.selectedTimeslot.start_time);\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventValidationError.emit({\n error: {\n title: 'Cancellation Error',\n message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n },\n });\n } else {\n this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n }\n };\n\n private handleRescheduleButtonClicked = () => {\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.rescheduleBookedEventError.emit(error);\n };\n this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n };\n\n getPaticipantType = (type: string) => {\n switch (type) {\n case 'host':\n return 'Host';\n case 'you':\n return 'You';\n default:\n return '';\n }\n };\n\n @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booked-event-card',\n stateToProps: new Map([\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.configSettings', 'configSettings'],\n ]),\n eventToProps: {\n cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n },\n rescheduleButtonClicked: async (\n event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n },\n cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingType = this.configSettings?.booking_type;\n const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n return (\n <Host part=\"nbec\">\n <div class=\"nylas-booked-event-card\">\n <div class=\"booked-event-timezone\">\n <globe-icon></globe-icon>\n {TIMEZONE_MAP[this.selectedTimezone]}\n </div>\n <div class=\"event-card-wrapper\" part=\"nbec__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nbec__title\">\n {!!this.rescheduleBookingId && !this.isLoading\n ? `${i18next.t('bookingRescheduled')}`\n : isManualConfirmation && !this.isLoading\n ? `${i18next.t('bookingSent')}`\n : `${i18next.t('bookingConfirmed')}`}\n !\n </h2>\n <div class=\"card-description\" part=\"nbec__description\">\n {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n </div>\n </div>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n <p>\n {this.selectedTimeslot?.start_time\n ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))\n : '-'}{' '}\n <br />\n {this.startTime} - {this.endTime}\n </p>\n </div>\n <div class=\"booking-participants\">\n {/* <people-icon></people-icon>\n <h3>All participants</h3>\n {this.eventInfo?.participants && (\n <p>\n {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n return (\n <span class=\"block\">\n {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n </span>\n );\n })}\n </p>\n )} */}\n </div>\n\n {!isManualConfirmation && (\n <div class=\"button-container\">\n <div\n class={{\n 'footer': true,\n 'no-footer':\n (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) \|\|\n this.configSettings?.booking_type === 'organizer-confirmation',\n 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options \|\| this.configSettings?.scheduler?.hide_rescheduling_options,\n }}\n >\n {!this.configSettings?.scheduler?.hide_cancellation_options && (\n <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n {`${i18next.t('cancelBookingButton')}`}\n </button-component>\n )}\n {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n {`${i18next.t('rescheduleBookingButton')}`}\n </button-component>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booked-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-booked-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n margin-bottom: 2rem;\n width: 424px;\n\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 0;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 1rem;\n font-weight: 400;\n border-bottom: 1px solid var(--nylas-base-200);\n width: inherit;\n padding: 0 0 1.5rem;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n\n .card-description {\n text-align: center;\n }\n}\n\n.booking-date-time,\n.booking-participants {\n padding: 0 1rem;\n margin-top: 1.5rem;\n margin-left: 3rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-self: flex-start;\n position: relative;\n\n svg {\n color: var(--nylas-base-700);\n position: absolute;\n left: -10px;\n }\n\n .block {\n display: block;\n }\n\n h3 {\n color: var(--nylas-base-600);\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.25rem;\n text-align: justify;\n margin-bottom: 4px;\n }\n\n p {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n text-align: justify;\n color: var(--nylas-base-800);\n }\n}\n\n.booking-participants {\n margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n display: flex;\n color: var(--nylas-base-600);\n margin-bottom: 1.5rem;\n gap: 4px;\n margin: 2rem;\n align-items: center;\n align-self: flex-end;\n}\n\n.button-container {\n width: inherit;\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n border-top: 1px solid var(--nylas-base-200);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatTimezone } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n @standalone\n * The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n @standalone\n * Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n @standalone\n * The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The selected language.\n /\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n @State() startTime: string = '';\n @State() endTime: string = '';\n\n /\n Cancel booking button clicked event.\n /\n @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n /\n @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n error: {\n title: string;\n message: string;\n };\n }>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-booked-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-booked-event-card] Component did load`);\n if (!this.eventInfo) {\n console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n }\n if (!this.bookingInfo) {\n console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n }\n\n this.startTime = formatTimezone(this.selectedTimeslot?.start_time as Date, this.selectedTimezone);\n this.endTime = formatTimezone(this.selectedTimeslot?.end_time as Date, this.selectedTimezone);\n }\n\n private handleCancelBookingButtonClicked = () => {\n const startTime = new Date(this.selectedTimeslot.start_time);\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventValidationError.emit({\n error: {\n title: 'Cancellation Error',\n message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n },\n });\n } else {\n this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n }\n };\n\n private handleRescheduleButtonClicked = () => {\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.rescheduleBookedEventError.emit(error);\n };\n this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n };\n\n getPaticipantType = (type: string) => {\n switch (type) {\n case 'host':\n return 'Host';\n case 'you':\n return 'You';\n default:\n return '';\n }\n };\n\n @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booked-event-card',\n stateToProps: new Map([\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.configSettings', 'configSettings'],\n ]),\n eventToProps: {\n cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n },\n rescheduleButtonClicked: async (\n event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n },\n cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingType = this.configSettings?.booking_type;\n const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n return (\n <Host part=\"nbec\">\n <div class=\"nylas-booked-event-card\">\n <div class=\"booked-event-timezone\">\n <globe-icon></globe-icon>\n {TIMEZONE_MAP[this.selectedTimezone]}\n </div>\n <div class=\"event-card-wrapper\" part=\"nbec__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nbec__title\">\n {!!this.rescheduleBookingId && !this.isLoading\n ? `${i18next.t('bookingRescheduled')}`\n : isManualConfirmation && !this.isLoading\n ? `${i18next.t('bookingSent')}`\n : `${i18next.t('bookingConfirmed')}`}\n !\n </h2>\n <div class=\"card-description\" part=\"nbec__description\">\n {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n </div>\n </div>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n <p>\n {this.selectedTimeslot?.start_time\n ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))\n : '-'}{' '}\n <br />\n {this.startTime} - {this.endTime}\n </p>\n </div>\n <div class=\"booking-participants\">\n {/* <people-icon></people-icon>\n <h3>All participants</h3>\n {this.eventInfo?.participants && (\n <p>\n {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n return (\n <span class=\"block\">\n {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n </span>\n );\n })}\n </p>\n )} */}\n </div>\n\n {!isManualConfirmation && (\n <div class=\"button-container\">\n <div\n class={{\n 'footer': true,\n 'no-footer':\n (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) \|\|\n this.configSettings?.booking_type === 'organizer-confirmation',\n 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options \|\| this.configSettings?.scheduler?.hide_rescheduling_options,\n }}\n >\n {!this.configSettings?.scheduler?.hide_cancellation_options && (\n <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n {`${i18next.t('cancelBookingButton')}`}\n </button-component>\n )}\n {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n {`${i18next.t('rescheduleBookingButton')}`}\n </button-component>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-booking-calendar-picker2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booking-calendar-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n }\n\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n span {\n padding: 0 1rem;\n }\n }\n }\n\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The list of user's calendars.\n /\n @Prop() currentUserCalendars?: Calendar[];\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendar.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The prop to hide the header.\n /\n @Prop() hideHeader: boolean = false;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected booking calendar changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), this.name);\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n this.valueChanged.emit({ value: this.selectedCalendar, name: this.name });\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('currentUserCalendars')\n currentUserCalendarsChangedHandler(newValue: Calendar[]) {\n debug('nylas-booking-calendar-picker', 'currentUserCalendarsChangedHandler', newValue);\n this.currentUserCalendars = newValue;\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'currentUserCalendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const currentUserCalendarOptions =\n this.currentUserCalendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n const optionsFromCalendars =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n const calendarOptions = optionsFromCalendars?.length > 0 ? optionsFromCalendars : currentUserCalendarOptions \|\| [];\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n {!this.hideHeader && (\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>\n Select the calendar where you want to add event bookings.\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">The calendar will be used to create events.</span>\n </tooltip-component>\n </p>\n </div>\n )}\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booking-calendar-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n }\n\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n span {\n padding: 0 1rem;\n }\n }\n }\n\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n @standalone\n * The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n @standalone\n * The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n @standalone\n * The list of user's calendars.\n /\n @Prop() currentUserCalendars?: Calendar[];\n /\n @standalone\n * The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n @standalone\n * The default selected calendar.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The prop to hide the header.\n /\n @Prop() hideHeader: boolean = false;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected booking calendar changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), this.name);\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n this.valueChanged.emit({ value: this.selectedCalendar, name: this.name });\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('currentUserCalendars')\n currentUserCalendarsChangedHandler(newValue: Calendar[]) {\n debug('nylas-booking-calendar-picker', 'currentUserCalendarsChangedHandler', newValue);\n this.currentUserCalendars = newValue;\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'currentUserCalendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const currentUserCalendarOptions =\n this.currentUserCalendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n const optionsFromCalendars =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n const calendarOptions = optionsFromCalendars?.length > 0 ? optionsFromCalendars : currentUserCalendarOptions \|\| [];\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n {!this.hideHeader && (\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>\n Select the calendar where you want to add event bookings.\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">The calendar will be used to create events.</span>\n </tooltip-component>\n </p>\n </div>\n )}\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-booking-confirmation-redirect2.js CHANGED Viewed

@@ -139,7 +139,7 @@ const NylasBookingConfirmationRedirect = proxyCustomElement(class NylasBookingCo
                 value: 'custom',
             },
         ];
-        return (h(Host, { key: '664122ed45ac89e22d1638e1f89d152c6f3b2e64' }, h("div", { key: '86bad1489a91fc71ca708cf0832d7bf1ce5e4938', class: "nylas-booking-confirmation-redirect", part: "nbcr" }, redirectOptions.length > 0 && (h("div", { class: "nylas-booking-confirmation-redirect__dropdown" }, h("span", { class: "label" }, "When a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "You can either display the default confirmation page or redirect users to your own confirmation page."))), this.componentLoaded && (h("select-dropdown", { name: "confirmation-redirect-dropdown", options: redirectOptions, withSearch: false, defaultSelectedOption: redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default')), exportparts: "sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content" })), this.acceptUrl && (h("div", null, h("input-component", { name: "confirmation-redirect", id: "confirmation-redirect", type: "text", placeholder: "Enter custom redirect URL", required: false, part: "ic__input_wrapper: nbcr__input-textfield", defaultValue: this.currentRedirectUrl }), this.redirectUrlErrorMessage && h("span", { class: "error-message" }, this.redirectUrlErrorMessage))))))));
+        return (h(Host, { key: '436a754406a25fe12caf7a1772d5fbd29d52cb5d' }, h("div", { key: 'ba1096207f67cd847eb78d7ae3847395d091bac0', class: "nylas-booking-confirmation-redirect", part: "nbcr" }, redirectOptions.length > 0 && (h("div", { class: "nylas-booking-confirmation-redirect__dropdown" }, h("span", { class: "label" }, "When a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "You can either display the default confirmation page or redirect users to your own confirmation page."))), this.componentLoaded && (h("select-dropdown", { name: "confirmation-redirect-dropdown", options: redirectOptions, withSearch: false, defaultSelectedOption: redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default')), exportparts: "sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content" })), this.acceptUrl && (h("div", null, h("input-component", { name: "confirmation-redirect", id: "confirmation-redirect", type: "text", placeholder: "Enter custom redirect URL", required: false, part: "ic__input_wrapper: nbcr__input-textfield", defaultValue: this.currentRedirectUrl }), this.redirectUrlErrorMessage && h("span", { class: "error-message" }, this.redirectUrlErrorMessage))))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/nylas-booking-confirmation-redirect2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booking-confirmation-redirect2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.scss?tag=nylas-booking-confirmation-redirect&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-confirmation-redirect {\n width: inherit;\n display: flex;\n flex-direction: column;\n\n .nylas-booking-confirmation-redirect__dropdown {\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n\n input-component::part(ic__input_wrapper) {\n margin-top: 1rem;\n }\n\n span.error-message {\n color: var(--nylas-error);\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { isValidUrl } from '@/utils/utils';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbcr - The booking redirect container\n * @part nbcr__header - The header of the booking redirect\n * @part nbcr__dropdown - The dropdown container\n * @part nbcr__dropdown-button - The dropdown button\n * @part nbcr__dropdown-content - The dropdown content\n * @part nbcr__input-textfield - The input field content\n /\n@Component({\n tag: 'nylas-booking-confirmation-redirect',\n styleUrl: 'nylas-booking-confirmation-redirect.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingConfirmationRedirect {\n @Element() host!: HTMLNylasBookingConfirmationRedirectElement;\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n The name of the confirmation redirect link.\n /\n @Prop() name: string = 'confirmation-redirect';\n /\n The custom redirect URL.\n /\n @Prop() redirectUrl: string = '';\n /\n The custom redirect URL error message\n /\n @Prop() redirectUrlErrorMessage: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The current redirect URL.\n /\n @State() currentRedirectUrl: string = '';\n /\n The state for whether a custom URL can be added.\n /\n @State() acceptUrl!: boolean;\n\n @State() componentLoaded: boolean = false;\n\n /\n This event is fired when the current redirect URL changes and is valid.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\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-booking-confirmation-redirect', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-booking-confirmation-redirect', 'selectedConfigurationChangedHandler', newValue);\n if (newValue?.scheduler?.confirmation_redirect_url) {\n this.currentRedirectUrl = newValue?.scheduler?.confirmation_redirect_url;\n this.acceptUrl = newValue?.scheduler?.confirmation_redirect_url !== '';\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-confirmation-redirect', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-confirmation-redirect', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-confirmation-redirect', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-confirmation-redirect', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.currentRedirectUrl = this.redirectUrl;\n this.acceptUrl = this.redirectUrl !== '';\n }\n this.componentLoaded = true;\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.currentRedirectUrl.toString(), this.name);\n }\n }\n\n componentWillUpdate() {\n debug('nylas-booking-confirmation-redirect', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-confirmation-redirect', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-confirmation-redirect', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-confirmation-redirect', 'componentDidRender');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-confirmation-redirect', 'nylasFormDropdownChangedHandler', event.detail);\n\n const { name, value } = event.detail;\n\n if (name === 'confirmation-redirect-dropdown') {\n if (value === 'custom') {\n this.acceptUrl = true;\n } else {\n this.acceptUrl = false;\n\n // Submit empty string to clear redirect URL\n this.internals.setFormValue('', this.name);\n this.valueChanged.emit({ name: this.name, value: '' });\n }\n }\n }\n\n @Listen('nylasFormInputBlurred')\n nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n const { name, value } = event.detail;\n this.currentRedirectUrl = value;\n\n if (this.acceptUrl && name === 'confirmation-redirect') {\n this.redirectUrlErrorMessage = '';\n\n if (!isValidUrl(this.currentRedirectUrl)) {\n this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');\n this.redirectUrlErrorMessage = 'Please enter a valid URL.';\n return;\n }\n this.internals.setValidity({});\n\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n formSubmittedHandler(_event: CustomEvent) {\n if (this.acceptUrl && !isValidUrl(this.currentRedirectUrl)) {\n this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');\n this.redirectUrlErrorMessage = 'Please enter a valid URL.';\n } else {\n this.internals.setValidity({});\n }\n }\n\n @RegisterComponent<NylasBookingConfirmationRedirect, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-confirmation-redirect',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const redirectOptions = [\n {\n label: 'Display default confirmation page',\n value: 'default',\n },\n {\n label: 'Redirect to custom URL',\n value: 'custom',\n },\n ];\n\n return (\n <Host>\n <div class=\"nylas-booking-confirmation-redirect\" part=\"nbcr\">\n {redirectOptions.length > 0 && (\n <div class=\"nylas-booking-confirmation-redirect__dropdown\">\n <span class=\"label\">\n When a booking is confirmed\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">You can either display the default confirmation page or redirect users to your own confirmation page.</span>\n </tooltip-component>\n </span>\n {this.componentLoaded && (\n <select-dropdown\n name=\"confirmation-redirect-dropdown\"\n options={redirectOptions}\n withSearch={false}\n defaultSelectedOption={redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default'))}\n exportparts=\"sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content\"\n />\n )}\n {this.acceptUrl && (\n <div>\n <input-component\n name=\"confirmation-redirect\"\n id=\"confirmation-redirect\"\n type=\"text\"\n placeholder=\"Enter custom redirect URL\"\n required={false}\n part=\"ic__input_wrapper: nbcr__input-textfield\"\n defaultValue={this.currentRedirectUrl}\n />\n {this.redirectUrlErrorMessage && <span class=\"error-message\">{this.redirectUrlErrorMessage}</span>}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booking-confirmation-redirect2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.scss?tag=nylas-booking-confirmation-redirect&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-confirmation-redirect {\n width: inherit;\n display: flex;\n flex-direction: column;\n\n .nylas-booking-confirmation-redirect__dropdown {\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n\n input-component::part(ic__input_wrapper) {\n margin-top: 1rem;\n }\n\n span.error-message {\n color: var(--nylas-error);\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { isValidUrl } from '@/utils/utils';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbcr - The booking redirect container\n * @part nbcr__header - The header of the booking redirect\n * @part nbcr__dropdown - The dropdown container\n * @part nbcr__dropdown-button - The dropdown button\n * @part nbcr__dropdown-content - The dropdown content\n * @part nbcr__input-textfield - The input field content\n /\n@Component({\n tag: 'nylas-booking-confirmation-redirect',\n styleUrl: 'nylas-booking-confirmation-redirect.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingConfirmationRedirect {\n @Element() host!: HTMLNylasBookingConfirmationRedirectElement;\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n @standalone\n * The name of the confirmation redirect link.\n /\n @Prop() name: string = 'confirmation-redirect';\n /\n @standalone\n * The custom redirect URL.\n /\n @Prop() redirectUrl: string = '';\n /\n @standalone\n * The custom redirect URL error message\n /\n @Prop() redirectUrlErrorMessage: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The current redirect URL.\n /\n @State() currentRedirectUrl: string = '';\n /\n The state for whether a custom URL can be added.\n /\n @State() acceptUrl!: boolean;\n\n @State() componentLoaded: boolean = false;\n\n /\n This event is fired when the current redirect URL changes and is valid.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\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-booking-confirmation-redirect', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-booking-confirmation-redirect', 'selectedConfigurationChangedHandler', newValue);\n if (newValue?.scheduler?.confirmation_redirect_url) {\n this.currentRedirectUrl = newValue?.scheduler?.confirmation_redirect_url;\n this.acceptUrl = newValue?.scheduler?.confirmation_redirect_url !== '';\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-confirmation-redirect', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-confirmation-redirect', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-confirmation-redirect', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-confirmation-redirect', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.currentRedirectUrl = this.redirectUrl;\n this.acceptUrl = this.redirectUrl !== '';\n }\n this.componentLoaded = true;\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.currentRedirectUrl.toString(), this.name);\n }\n }\n\n componentWillUpdate() {\n debug('nylas-booking-confirmation-redirect', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-confirmation-redirect', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-confirmation-redirect', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-confirmation-redirect', 'componentDidRender');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-confirmation-redirect', 'nylasFormDropdownChangedHandler', event.detail);\n\n const { name, value } = event.detail;\n\n if (name === 'confirmation-redirect-dropdown') {\n if (value === 'custom') {\n this.acceptUrl = true;\n } else {\n this.acceptUrl = false;\n\n // Submit empty string to clear redirect URL\n this.internals.setFormValue('', this.name);\n this.valueChanged.emit({ name: this.name, value: '' });\n }\n }\n }\n\n @Listen('nylasFormInputBlurred')\n nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n const { name, value } = event.detail;\n this.currentRedirectUrl = value;\n\n if (this.acceptUrl && name === 'confirmation-redirect') {\n this.redirectUrlErrorMessage = '';\n\n if (!isValidUrl(this.currentRedirectUrl)) {\n this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');\n this.redirectUrlErrorMessage = 'Please enter a valid URL.';\n return;\n }\n this.internals.setValidity({});\n\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n formSubmittedHandler(_event: CustomEvent) {\n if (this.acceptUrl && !isValidUrl(this.currentRedirectUrl)) {\n this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');\n this.redirectUrlErrorMessage = 'Please enter a valid URL.';\n } else {\n this.internals.setValidity({});\n }\n }\n\n @RegisterComponent<NylasBookingConfirmationRedirect, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-confirmation-redirect',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const redirectOptions = [\n {\n label: 'Display default confirmation page',\n value: 'default',\n },\n {\n label: 'Redirect to custom URL',\n value: 'custom',\n },\n ];\n\n return (\n <Host>\n <div class=\"nylas-booking-confirmation-redirect\" part=\"nbcr\">\n {redirectOptions.length > 0 && (\n <div class=\"nylas-booking-confirmation-redirect__dropdown\">\n <span class=\"label\">\n When a booking is confirmed\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">You can either display the default confirmation page or redirect users to your own confirmation page.</span>\n </tooltip-component>\n </span>\n {this.componentLoaded && (\n <select-dropdown\n name=\"confirmation-redirect-dropdown\"\n options={redirectOptions}\n withSearch={false}\n defaultSelectedOption={redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default'))}\n exportparts=\"sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content\"\n />\n )}\n {this.acceptUrl && (\n <div>\n <input-component\n name=\"confirmation-redirect\"\n id=\"confirmation-redirect\"\n type=\"text\"\n placeholder=\"Enter custom redirect URL\"\n required={false}\n part=\"ic__input_wrapper: nbcr__input-textfield\"\n defaultValue={this.currentRedirectUrl}\n />\n {this.redirectUrlErrorMessage && <span class=\"error-message\">{this.redirectUrlErrorMessage}</span>}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-booking-confirmation-type2.js CHANGED Viewed

@@ -66,9 +66,9 @@ const NylasBookingConfirmationType = proxyCustomElement(class NylasBookingConfir
         }
         else {
             this.selectedBookingType = this.bookingType || 'booking';
+            this.showDropdown = this.showComponent;
         }
         this.internals.setFormValue(this.selectedBookingType.toString(), this.name);
-        this.showDropdown = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation' && !!this.selectedConfiguration?.scheduler?.organizer_confirmation_url;
     }
     componentWillUpdate() {
         debug('nylas-booking-confirmation-type', 'componentWillUpdate');
@@ -102,7 +102,7 @@ const NylasBookingConfirmationType = proxyCustomElement(class NylasBookingConfir
                 value: 'organizer-confirmation',
             },
         ];
-        return (h(Host, { key: 'bb3093d5abf52581a6b29eabf2c520ae1da1a425' }, this.showDropdown && (h("div", { class: "nylas-booking-confirmation-type", part: "nbct" }, bookingOptions.length > 0 && (h("div", { class: "nylas-booking-confirmation-type__dropdown" }, h("span", { class: "label" }, "When a booking is requested", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Manually accept bookings allows you to review and either accept or decline each booking request."))), this.selectedBookingType && (h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: nbct__dropdown, sd_dropdown-button: nbct__dropdown-button, sd_dropdown-content: nbct__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.selectedBookingType) }))))))));
+        return (h(Host, { key: 'e5267e4adf820e23ca021965cc6f021946eefbea' }, this.showDropdown && (h("div", { class: "nylas-booking-confirmation-type", part: "nbct" }, bookingOptions.length > 0 && (h("div", { class: "nylas-booking-confirmation-type__dropdown" }, h("span", { class: "label" }, "When a booking is requested", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Manually accept bookings allows you to review and either accept or decline each booking request."))), this.selectedBookingType && (h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: nbct__dropdown, sd_dropdown-button: nbct__dropdown-button, sd_dropdown-content: nbct__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.selectedBookingType) }))))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/nylas-booking-confirmation-type2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booking-confirmation-type2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.scss?tag=nylas-booking-confirmation-type&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-confirmation-type {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin-bottom: 1rem;\n\n .nylas-booking-confirmation-type__dropdown {\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbct - The custom booking flow container\n * @part nbct__header - The header of the custom booking flow\n * @part nbct__dropdown - The dropdown container\n * @part nbct__dropdown-button - The dropdown button\n * @part nbct__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-confirmation-type',\n styleUrl: 'nylas-booking-confirmation-type.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingConfirmationType {\n @Element() host!: HTMLNylasBookingConfirmationTypeElement;\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n The name of the confirmation redirect link.\n /\n @Prop() name: string = 'confirmation-type';\n /\n The booking type.\n /\n @Prop() bookingType: string = 'booking';\n /\n @deprecated Show or hide the confirmation type.\n * This prop is automatically determined based on the value of selectedConfiguration in the config,\n * making it unnecessary to set this prop manually. The selectedConfiguration alone handles the functionality.\n * This prop is deprecated and will be removed in the next version. Setting this prop will have no effect.\n /\n @Prop() showComponent: boolean = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected bookingType.\n /\n @State() selectedBookingType!: string;\n\n /\n The open/close state of the booking confirmation type dropdown.\n /\n @State() showDropdown!: boolean;\n /\n This event is fired when the selected bookingType changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\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-booking-confirmation-type', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-booking-confirmation-type', 'selectedConfigurationChangedHandler', newValue);\n if (newValue?.event_booking?.booking_type) {\n this.selectedBookingType = newValue?.event_booking?.booking_type;\n this.showDropdown = newValue?.event_booking?.booking_type !== 'custom-confirmation' && !!newValue?.scheduler?.organizer_confirmation_url;\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-confirmation-type', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-confirmation-type', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-confirmation-type', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-confirmation-type', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedBookingType = this.bookingType \|\| 'booking';\n }\n this.internals.setFormValue(this.selectedBookingType.toString(), this.name);\n this.showDropdown = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation' && !!this.selectedConfiguration?.scheduler?.organizer_confirmation_url;\n }\n\n componentWillUpdate() {\n debug('nylas-booking-confirmation-type', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-confirmation-type', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-confirmation-type', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-confirmation-type', 'componentDidRender');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-confirmation-type', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedBookingType = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasBookingConfirmationType, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-confirmation-type',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingOptions = [\n {\n label: 'Automatically accept bookings',\n value: 'booking',\n },\n {\n label: 'Manually accept bookings',\n value: 'organizer-confirmation',\n },\n ];\n\n return (\n <Host>\n {this.showDropdown && (\n <div class=\"nylas-booking-confirmation-type\" part=\"nbct\">\n {bookingOptions.length > 0 && (\n <div class=\"nylas-booking-confirmation-type__dropdown\">\n <span class=\"label\">\n When a booking is requested\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Manually accept bookings allows you to review and either accept or decline each booking request.</span>\n </tooltip-component>\n </span>\n {this.selectedBookingType && (\n <select-dropdown\n name=\"booking-type\"\n options={bookingOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbct__dropdown, sd_dropdown-button: nbct__dropdown-button, sd_dropdown-content: nbct__dropdown-content\"\n defaultSelectedOption={bookingOptions.find(cal => cal.value == this.selectedBookingType)}\n />\n )}\n </div>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booking-confirmation-type2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.scss?tag=nylas-booking-confirmation-type&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-confirmation-type {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin-bottom: 1rem;\n\n .nylas-booking-confirmation-type__dropdown {\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbct - The custom booking flow container\n * @part nbct__header - The header of the custom booking flow\n * @part nbct__dropdown - The dropdown container\n * @part nbct__dropdown-button - The dropdown button\n * @part nbct__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-confirmation-type',\n styleUrl: 'nylas-booking-confirmation-type.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingConfirmationType {\n @Element() host!: HTMLNylasBookingConfirmationTypeElement;\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The name of the confirmation redirect link.\n /\n @Prop() name: string = 'confirmation-type';\n /\n @standalone\n * The booking type.\n /\n @Prop() bookingType: string = 'booking';\n /\n @standalone\n * Show or hide the confirmation type.\n * This prop is automatically determined based on the value of selectedConfiguration in the config,\n * making it unnecessary to set this prop manually.\n /\n @Prop() showComponent: boolean = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected bookingType.\n /\n @State() selectedBookingType!: string;\n\n /\n The open/close state of the booking confirmation type dropdown.\n /\n @State() showDropdown!: boolean;\n /\n This event is fired when the selected bookingType changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\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-booking-confirmation-type', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-booking-confirmation-type', 'selectedConfigurationChangedHandler', newValue);\n if (newValue?.event_booking?.booking_type) {\n this.selectedBookingType = newValue?.event_booking?.booking_type;\n this.showDropdown = newValue?.event_booking?.booking_type !== 'custom-confirmation' && !!newValue?.scheduler?.organizer_confirmation_url;\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-confirmation-type', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-confirmation-type', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-confirmation-type', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-confirmation-type', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedBookingType = this.bookingType \|\| 'booking';\n this.showDropdown = this.showComponent;\n }\n this.internals.setFormValue(this.selectedBookingType.toString(), this.name);\n }\n\n componentWillUpdate() {\n debug('nylas-booking-confirmation-type', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-confirmation-type', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-confirmation-type', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-confirmation-type', 'componentDidRender');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-confirmation-type', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedBookingType = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasBookingConfirmationType, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-confirmation-type',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingOptions = [\n {\n label: 'Automatically accept bookings',\n value: 'booking',\n },\n {\n label: 'Manually accept bookings',\n value: 'organizer-confirmation',\n },\n ];\n\n return (\n <Host>\n {this.showDropdown && (\n <div class=\"nylas-booking-confirmation-type\" part=\"nbct\">\n {bookingOptions.length > 0 && (\n <div class=\"nylas-booking-confirmation-type__dropdown\">\n <span class=\"label\">\n When a booking is requested\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Manually accept bookings allows you to review and either accept or decline each booking request.</span>\n </tooltip-component>\n </span>\n {this.selectedBookingType && (\n <select-dropdown\n name=\"booking-type\"\n options={bookingOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbct__dropdown, sd_dropdown-button: nbct__dropdown-button, sd_dropdown-content: nbct__dropdown-content\"\n defaultSelectedOption={bookingOptions.find(cal => cal.value == this.selectedBookingType)}\n />\n )}\n </div>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-booking-form-config2.js CHANGED Viewed

@@ -3598,7 +3598,7 @@ const NylasBookingFormConfig = proxyCustomElement(class NylasBookingFormConfig e
         });
     }
     render() {
-        return (h(Host, { key: '8db177dc9df5c63aaae9e657b81a564d2df2d34e' }, h("div", { key: '3026f554b98ffdb0e14173a49bff44a85ad5cc17', class: "nylas-booking-form-config" }, h("div", { key: '4369640ba9d4411713d5066324fa6f59fb4040da', class: "header", part: "nbfc__header" }, h("div", { key: '1a4bfa5b5ef7532cb36be53bdc1f7d73db365c33', class: "header_text" }, h("h3", { key: 'c689200151903cb8b410c78da9dafc6550d0c51e' }, "Booking form"), h("p", { key: 'a53818d44fb4fce66b4a07d41f4fd1322efb4f5a' }, "Add custom fields to the booking form.")), h("div", { key: '8059ccdaad2ccabd0f33728cd4f93b1f3b8aebdd', class: "header_action" }, h("select-dropdown", { key: '7c11e6c8d82c9b7d585f85e2847d48c70d696e72', 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: '7e099ef91121f954377db3a4a0c517d58df3a1e8', slot: "select-icon" }, h("plus-icon", { key: 'bbdd97931d1826cc4955e1bc695f984f8ee35a20', width: "15", height: "15" }))))), h("div", { key: '417adc5084d74399f9a77f2da83117fe7c0160a3', class: "content" }, h("div", { key: '598bbda9bf5b9d87a8e13fc336c3879b327c58e6', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
+        return (h(Host, { key: '890a8dc51e6aee455ce2eec3b1b9e534122e87e1' }, h("div", { key: 'a6d477428eb9851402cadbe384fd5dc7a0a7788b', class: "nylas-booking-form-config", part: "nbfc" }, h("div", { key: '4fa905aa07838ab99c01d20f2e8f809a24328059', class: "header", part: "nbfc__header" }, h("div", { key: '33b8980d3927d1aa717aade3f6e1e3f3b099feab', class: "header_text" }, h("h3", { key: '2381bd7f07124b653aac4542946585357d1eecd5' }, "Booking form"), h("p", { key: 'a57f318250af040f150df4fe6cf02f299250da74' }, "Add custom fields to the booking form.")), h("div", { key: '7297904e841d80bdc38a22605427234bf69c15b3', class: "header_action" }, h("select-dropdown", { key: 'fed774ace8a8d000a51228c32100597035c01cb0', 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: '4a445ec9df4d27d455e5936a83469df6850ee24f', slot: "select-icon" }, h("plus-icon", { key: '1f5fa764396d7f0ecc212ed7e2145dee1250eb4c', width: "15", height: "15" }))))), h("div", { key: 'f2384ca1eef8e9b50176ca6a23ed018dba95190e', class: "content" }, h("div", { key: '6ce505f1753086e43ac25e188a63b4319282f33d', 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: () => {