npm - @nylas/web-elements - Versions diffs - 1.1.5 → 1.1.6 - Mend

@nylas/web-elements 1.1.5 → 1.1.6

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

package/dist/esm/nylas-timeslot-picker.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-timeslot-picker.entry.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: calc(100% - 48px); //48px is the height of the header\n @include default-css-variables;\n}\n\n.time-picker-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.timeslots {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n align-items: center;\n overflow-y: scroll;\n padding: 0.5rem 1.5rem 1.5rem;\n flex: 1;\n}\n\n.time {\n /* Frame 12 /\n box-sizing: border-box;\n\n / Auto layout /\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 4px 12px;\n gap: 0.5rem;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n\n width: 100%;\n height: 48px;\n\n color: var(--nylas-base-800);\n background: var(--nylas-base-0);\n border: none;\n outline: 1.5px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n flex: none;\n order: 4;\n align-self: stretch;\n flex-grow: 0;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: var(--nylas-primary);\n outline-color: var(--nylas-primary);\n }\n\n &.selected {\n font-weight: 600;\n color: var(--nylas-primary);\n outline: 2px solid var(--nylas-primary);\n border-color: transparent;\n box-shadow: 0 0 0 2px var(--nylas-primary);\n }\n}\n\n.empty {\n text-align: center;\n padding: 0 1.5rem;\n color: var(--nylas-base-600);\n font-size: min(max(12px, 2vw), 14px);\n height: 450px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-base-50);\n }\n\n 50% {\n background-color: var(--nylas-base-100);\n }\n\n 100% {\n background-color: var(--nylas-base-50);\n }\n}\n\n.loading {\n padding: 0 1.5rem;\n\n .timeslot-skeleton {\n width: 100%;\n height: 4rem;\n background-color: var(--nylas-base-50);\n margin-bottom: 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n animation: pulsate 1.5s infinite ease-in-out;\n }\n}\n\n.footer {\n width: 100%;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \n @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n /\n@Component({\n tag: 'nylas-timeslot-picker',\n styleUrl: 'nylas-timeslot-picker.scss',\n shadow: true,\n})\nexport class NylasTimeslotPicker {\n /\n @standalone\n * The available timeslots.\n /\n @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n /\n The selected timeslot.\n /\n @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n /\n The selected date.\n /\n @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n /\n The selected language.\n /\n @Prop() selectedLanguage?: string;\n\n /\n This event is fired when a timeslot is selected.\n /\n @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n /\n This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n /\n @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n @State() times: AvailabilityTimeslot[] = [];\n @State() hoveredTimeslotIndex?: number;\n @State() selectedTimeslotIndex?: string;\n\n @Watch('selectedLanguage')\n selectedLanguageChanged(newLanguage: string) {\n i18next.changeLanguage(newLanguage);\n }\n\n @Watch('selectedDate')\n selectedDateChanged(newVal: Date \| null \| undefined) {\n debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n if (newVal) {\n this.selectedTimeslotIndex = '';\n if (typeof newVal !== 'undefined') {\n const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n }\n\n @Watch('availability')\n availabilityChanged(newVal: AvailabilityTimeslot[] \| undefined) {\n debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n if (typeof newVal !== 'undefined') {\n const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n }\n\n async componentDidLoad() {\n debug(`[nylas-timeslot-picker] Component did load`);\n const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n\n private getTimeslotId(date: Date, index: number) {\n return `${date.toLocaleDateString()}-${index}`;\n }\n\n private onClickSelectTime(timeslot: Timeslot, index: number) {\n debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n this.timeslotSelected.emit({\n start_time: timeslot.start_time,\n end_time: timeslot.end_time,\n emails: timeslot.emails,\n });\n }\n\n private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot \| undefined) => {\n event.preventDefault();\n debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n this.timeslotConfirmed.emit(timeslot);\n };\n\n private handleMouseEnter = (index: number) => {\n this.hoveredTimeslotIndex = index;\n };\n\n private handleMouseLeave = () => {\n this.hoveredTimeslotIndex = -1;\n };\n\n private getTimeSlotLabel(timeslot: Timeslot) {\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-timeslot-picker',\n stateToProps: new Map([\n ['scheduler.selectedDate', 'selectedDate'],\n ['scheduler.availability', 'availability'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'timeslot-skeleton'} style={{ animationDelay: `${i 20}ms` }} />\n ))}\n </div>\n </Host>\n );\n }\n\n if (this.availability && this.availability.length === 0) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No dates available</span>\n </div>\n </Host>\n );\n }\n\n if ((!this.times \|\| this.times.length === 0) && !!this.selectedDate) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No time slots available for selected date</span>\n </div>\n </Host>\n );\n }\n\n if (!this.selectedDate) return <Host></Host>;\n\n return (\n <Host part=\"ntp\">\n <div class={'time-picker-wrapper'}>\n <div class={'timeslots'}>\n {this.times.map((timeslot, index) => (\n <button\n part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n aria-role=\"button\"\n class={{\n time: true,\n selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n }}\n onClick={() => this.onClickSelectTime(timeslot, index)}\n onMouseEnter={() => this.handleMouseEnter(index)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n {this.hoveredTimeslotIndex == index \|\| this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n ? this.getTimeSlotLabel(timeslot)\n : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n </button>\n ))}\n </div>\n {this.selectedTimeslot && (\n <div class={'footer'}>\n <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n </button-component>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-timeslot-picker.entry.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: calc(100% - 48px); //48px is the height of the header\n}\n\n.time-picker-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.timeslots {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n align-items: center;\n overflow-y: scroll;\n padding: 0.5rem 1.5rem 1.5rem;\n flex: 1;\n}\n\n.time {\n /* Frame 12 /\n box-sizing: border-box;\n\n / Auto layout /\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 4px 12px;\n gap: 0.5rem;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n\n width: 100%;\n height: 48px;\n\n color: var(--nylas-base-800);\n background: var(--nylas-base-0);\n border: none;\n outline: 1.5px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n flex: none;\n order: 4;\n align-self: stretch;\n flex-grow: 0;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: var(--nylas-primary);\n outline-color: var(--nylas-primary);\n }\n\n &.selected {\n font-weight: 600;\n color: var(--nylas-primary);\n outline: 2px solid var(--nylas-primary);\n border-color: transparent;\n box-shadow: 0 0 0 2px var(--nylas-primary);\n }\n}\n\n.empty {\n text-align: center;\n padding: 0 1.5rem;\n color: var(--nylas-base-600);\n font-size: min(max(12px, 2vw), 14px);\n height: 450px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-base-50);\n }\n\n 50% {\n background-color: var(--nylas-base-100);\n }\n\n 100% {\n background-color: var(--nylas-base-50);\n }\n}\n\n.loading {\n padding: 0 1.5rem;\n\n .timeslot-skeleton {\n width: 100%;\n height: 4rem;\n background-color: var(--nylas-base-50);\n margin-bottom: 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n animation: pulsate 1.5s infinite ease-in-out;\n }\n}\n\n.footer {\n width: 100%;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \n @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n /\n@Component({\n tag: 'nylas-timeslot-picker',\n styleUrl: 'nylas-timeslot-picker.scss',\n shadow: true,\n})\nexport class NylasTimeslotPicker {\n /\n The host element.\n * Used to manage the host element of the provider.\n /\n @Element() private host!: HTMLNylasTimeslotPickerElement;\n /\n @standalone\n * The available timeslots.\n /\n @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n /\n The selected timeslot.\n /\n @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n /\n The selected date.\n /\n @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n /\n The selected language.\n /\n @Prop() selectedLanguage?: string;\n\n /\n This event is fired when a timeslot is selected.\n /\n @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n /\n This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n /\n @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n @State() times: AvailabilityTimeslot[] = [];\n @State() hoveredTimeslotIndex?: number;\n @State() selectedTimeslotIndex?: string;\n\n @Watch('selectedLanguage')\n selectedLanguageChanged(newLanguage: string) {\n i18next.changeLanguage(newLanguage);\n }\n\n @Watch('selectedDate')\n selectedDateChanged(newVal: Date \| null \| undefined) {\n debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n if (newVal) {\n this.selectedTimeslotIndex = '';\n if (typeof newVal !== 'undefined') {\n const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n }\n\n @Watch('availability')\n availabilityChanged(newVal: AvailabilityTimeslot[] \| undefined) {\n debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n if (typeof newVal !== 'undefined') {\n const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n }\n\n async componentDidLoad() {\n debug(`[nylas-timeslot-picker] Component did load`);\n const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n this.applyThemeConfig(this.themeConfig);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private getTimeslotId(date: Date, index: number) {\n return `${date.toLocaleDateString()}-${index}`;\n }\n\n private onClickSelectTime(timeslot: Timeslot, index: number) {\n debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n this.timeslotSelected.emit({\n start_time: timeslot.start_time,\n end_time: timeslot.end_time,\n emails: timeslot.emails,\n });\n }\n\n private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot \| undefined) => {\n event.preventDefault();\n debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n this.timeslotConfirmed.emit(timeslot);\n };\n\n private handleMouseEnter = (index: number) => {\n this.hoveredTimeslotIndex = index;\n };\n\n private handleMouseLeave = () => {\n this.hoveredTimeslotIndex = -1;\n };\n\n private getTimeSlotLabel(timeslot: Timeslot) {\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-timeslot-picker',\n stateToProps: new Map([\n ['scheduler.selectedDate', 'selectedDate'],\n ['scheduler.availability', 'availability'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'timeslot-skeleton'} style={{ animationDelay: `${i 20}ms` }} />\n ))}\n </div>\n </Host>\n );\n }\n\n if (this.availability && this.availability.length === 0) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No dates available</span>\n </div>\n </Host>\n );\n }\n\n if ((!this.times \|\| this.times.length === 0) && !!this.selectedDate) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No time slots available for selected date</span>\n </div>\n </Host>\n );\n }\n\n if (!this.selectedDate) return <Host></Host>;\n\n return (\n <Host part=\"ntp\">\n <div class={'time-picker-wrapper'}>\n <div class={'timeslots'}>\n {this.times.map((timeslot, index) => (\n <button\n part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n aria-role=\"button\"\n class={{\n time: true,\n selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n }}\n onClick={() => this.onClickSelectTime(timeslot, index)}\n onMouseEnter={() => this.handleMouseEnter(index)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n {this.hoveredTimeslotIndex == index \|\| this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n ? this.getTimeSlotLabel(timeslot)\n : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n </button>\n ))}\n </div>\n {this.selectedTimeslot && (\n <div class={'footer'}>\n <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n </button-component>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/nylas-web-elements.js CHANGED Viewed

@@ -47,7 +47,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"nylas-reminder-emails\",[[65,\"nylas-reminder-emails\",{\"selectedConfiguration\":[16],\"name\":[1],\"reminders\":[32],\"reminderErrors\":[32],\"participants\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"],[0,\"nylasFormDropdownChanged\",\"handleNylasFormDropdownChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-scheduler-editor\",[[1,\"nylas-scheduler-editor\",{\"configurationId\":[1025,\"configuration-id\"],\"nylasApiRequest\":[1040],\"nylasSessionsConfig\":[16],\"defaultAuthArgs\":[16],\"eventOverrides\":[16],\"schedulerPreviewLink\":[1,\"scheduler-preview-link\"],\"defaultSchedulerConfigState\":[16],\"mode\":[1],\"additionalParticipants\":[16],\"hideEditorTabs\":[16],\"conferenceProviders\":[16],\"requiresSlug\":[4,\"requires-slug\"],\"enableUserFeedback\":[4,\"enable-user-feedback\"],\"automaticComponentRegistration\":[32],\"store\":[64],\"schedulerConnector\":[64]},[[0,\"registerComponent\",\"registerComponentHandler\"],[0,\"unregisterComponent\",\"unregisterComponentHandler\"]],{\"configurationId\":[\"configurationIdChanged\"]}]]],[\"nylas-scheduling\",[[1,\"nylas-scheduling\",{\"mode\":[1],\"defaultSchedulerState\":[16],\"sessionId\":[1,\"session-id\"],\"schedulerApiUrl\":[1,\"scheduler-api-url\"],\"bookingInfo\":[16],\"rescheduleBookingRef\":[1,\"reschedule-booking-ref\"],\"cancelBookingRef\":[1,\"cancel-booking-ref\"],\"organizerConfirmationBookingRef\":[1,\"organizer-confirmation-booking-ref\"],\"configurationId\":[1,\"configuration-id\"],\"slug\":[1],\"clientId\":[1,\"client-id\"],\"nylasBranding\":[4,\"nylas-branding\"],\"eventOverrides\":[16],\"isLoading\":[4,\"is-loading\"],\"themeConfig\":[16],\"localization\":[16],\"showNotification\":[4,\"show-notification\"],\"enableUserFeedback\":[4,\"enable-user-feedback\"],\"automaticComponentRegistration\":[32],\"selectedDateLabel\":[32],\"refConfigId\":[32],\"language\":[32],\"showFeedbackModal\":[32],\"bookingInfoConfirmed\":[32],\"getNylasSchedulerStore\":[64],\"getNylasSchedulerConnector\":[64],\"getRef\":[64]},[[0,\"languageChanged\",\"languageChanged\"],[0,\"registerComponent\",\"registerComponentHandler\"],[0,\"unregisterComponent\",\"unregisterComponentHandler\"],[0,\"monthChanged\",\"monthChangedHandler\"],[0,\"detailsConfirmed\",\"bookButtonClickedHandler\"],[0,\"dateSelected\",\"dateSelectedHandler\"],[0,\"cancelBookedEventError\",\"cancelBookedEventErrorHandler\"],[0,\"cancelBookedEventValidationError\",\"cancelBookedEventValidationErrorHandler\"],[0,\"rescheduleBookedEventError\",\"rescheduleBookedEventErrorHandler\"],[0,\"confirmBookingError\",\"confirmBookingErrorHandler\"],[0,\"feedbackModalClosed\",\"feedbackModalClosedHandler\"],[0,\"feedbackSubmitted\",\"feedbackSubmittedHandler\"]],{\"bookingInfo\":[\"bookingInfoChanged\"],\"rescheduleBookingRef\":[\"rescheduleBookingRefChanged\"],\"cancelBookingRef\":[\"cancelBookingRefChanged\"],\"organizerConfirmationBookingRef\":[\"organizerConfirmationBookingRefChanged\"],\"localization\":[\"localizationChanged\"],\"themeConfig\":[\"themeConfigChanged\"]}]]],[\"input-color-picker\",[[1,\"input-color-picker\",{\"name\":[1],\"defaultSelectedColor\":[1,\"default-selected-color\"],\"selectedColor\":[32],\"isOpen\":[32],\"ariaActivedescendant\":[32],\"errorMessage\":[32]},[[6,\"click\",\"handleOutsideClick\"]]]]],[\"archive-icon\",[[2,\"archive-icon\",{\"width\":[1],\"height\":[1]}]]],[\"arrow-icon\",[[2,\"arrow-icon\",{\"width\":[1],\"height\":[1]}]]],[\"bold-icon\",[[2,\"bold-icon\",{\"width\":[1],\"height\":[1]}]]],[\"document-refresh-icon\",[[2,\"document-refresh-icon\",{\"width\":[1],\"height\":[1]}]]],[\"folder-icon\",[[2,\"folder-icon\",{\"width\":[1],\"height\":[1]}]]],[\"forward-icon\",[[2,\"forward-icon\",{\"width\":[1],\"height\":[1]}]]],[\"inbox-icon\",[[2,\"inbox-icon\",{\"width\":[1],\"height\":[1]}]]],[\"italic-icon\",[[2,\"italic-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-if-state\",[[1,\"nylas-if-state\",{\"state\":[1],\"isStateSet\":[4,\"is-state-set\"],\"isBoolean\":[4,\"is-boolean\"],\"getStore\":[16],\"transition\":[1],\"show\":[32],\"classes\":[32]},null,{\"getStore\":[\"onGetStoreChange\"]}]]],[\"nylas-login\",[[1,\"nylas-login\",{\"isAuthenticated\":[4,\"is-authenticated\"],\"nylasConnector\":[16],\"scopes\":[16],\"loginMethod\":[1,\"login-method\"],\"companyName\":[1,\"company-name\"],\"logoUrl\":[1,\"logo-url\"],\"logoWidth\":[1,\"logo-width\"],\"providers\":[1],\"buttonText\":[1,\"button-text\"],\"email\":[32]}]]],[\"nylas-provider\",[[1,\"nylas-provider\",{\"authConfig\":[16],\"eventOverrides\":[16],\"automaticComponentRegistration\":[4,\"automatic-component-registration\"],\"getNylasAuth\":[64],\"getNylasConnector\":[64],\"getAuthStore\":[64],\"getNylasSchedulerStore\":[64],\"getNylasSchedulerConfigStore\":[64]},[[0,\"registerComponent\",\"registerComponentHandler\"],[0,\"unregisterComponent\",\"unregisterComponentHandler\"]]]]],[\"play-icon\",[[2,\"play-icon\",{\"width\":[1],\"height\":[1]}]]],[\"refresh-icon\",[[2,\"refresh-icon\",{\"width\":[1],\"height\":[1]}]]],[\"reply-all-icon\",[[2,\"reply-all-icon\",{\"width\":[1],\"height\":[1]}]]],[\"reply-icon\",[[2,\"reply-icon\",{\"width\":[1],\"height\":[1]}]]],[\"sent-icon\",[[2,\"sent-icon\",{\"width\":[1],\"height\":[1]}]]],[\"spam-icon\",[[2,\"spam-icon\",{\"width\":[1],\"height\":[1]}]]],[\"star-icon\",[[2,\"star-icon\",{\"width\":[1],\"height\":[1]}]]],[\"stop-icon\",[[2,\"stop-icon\",{\"width\":[1],\"height\":[1]}]]],[\"trash-fill-icon\",[[2,\"trash-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"underline-icon\",[[2,\"underline-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-confirmation-email\",[[65,\"nylas-confirmation-email\",{\"selectedConfiguration\":[16],\"confirmationEmailTemplate\":[16],\"participants\":[16],\"name\":[1],\"isOpen\":[4,\"is-open\"],\"confirmationEmail\":[32],\"isConfirmationEmailOpen\":[32],\"participantsState\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"],[0,\"valueChanged\",\"valueChangedHandler\"],[0,\"nylasFormInputImageUrlInvalid\",\"nylasFormInputImageUrlInvalidHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-booking-form-config\",[[65,\"nylas-booking-form-config\",{\"selectedConfiguration\":[16],\"name\":[1],\"additonalFields\":[16],\"formFields\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"nylasFormInputChanged\",\"nylasFormInputChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"formFields\":[\"watchHandler\"]}]]],[\"nylas-additional-participants\",[[65,\"nylas-additional-participants\",{\"name\":[1],\"selectedConfiguration\":[16],\"currentUser\":[16],\"participantOptions\":[16],\"eventParticipants\":[16],\"participants\":[32],\"participantErrors\":[32],\"includeOrganizerAsParticipant\":[32],\"isRoundRobinConfig\":[32],\"error\":[32]},[[0,\"inputOptionChanged\",\"onInputOptionChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-booking-confirmation-redirect\",[[65,\"nylas-booking-confirmation-redirect\",{\"selectedConfiguration\":[16],\"name\":[1],\"redirectUrl\":[1,\"redirect-url\"],\"redirectUrlErrorMessage\":[1,\"redirect-url-error-message\"],\"currentRedirectUrl\":[32],\"acceptUrl\":[32],\"componentLoaded\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"nylasFormInputBlurred\",\"nylasFormInputBlurHandler\"],[4,\"formSubmitted\",\"formSubmittedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-connected-calendars\",[[65,\"nylas-connected-calendars\",{\"name\":[1],\"selectedConfiguration\":[16],\"participants\":[16],\"calendars\":[16],\"participantOptions\":[16],\"selectedCalendars\":[32],\"participantCalendars\":[32],\"participantDefaultSelectedCalendars\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"calendars\":[\"calendarsChangedHandler\"],\"participants\":[\"participantsChangedHandler\"],\"participantOptions\":[\"participantOptionsChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-custom-event-slug\",[[65,\"nylas-custom-event-slug\",{\"selectedConfiguration\":[16],\"defaultUrlSlug\":[1,\"default-url-slug\"],\"isOpen\":[4,\"is-open\"],\"slugErrorMessage\":[1,\"slug-error-message\"],\"name\":[1],\"requiresSlug\":[4,\"requires-slug\"],\"urlSlug\":[32],\"focus\":[32],\"copied\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"],[0,\"nylasFormInputFocused\",\"nylasFormInputFocusHandler\"],[0,\"nylasFormInputBlurred\",\"nylasFormInputBlurHandler\"],[8,\"formSubmitted\",\"formSubmittedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-duration\",[[65,\"nylas-event-duration\",{\"selectedConfiguration\":[16],\"name\":[1],\"eventDurationMinutes\":[2,\"event-duration-minutes\"],\"duration\":[32],\"durationMinutes\":[32],\"durationIncrement\":[32],\"durationMinutesOptions\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"inputOptionChanged\",\"inputOptionChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"],\"durationMinutes\":[\"durationMinutesChangedHandler\"]}]]],[\"nylas-cancellation-policy\",[[65,\"nylas-cancellation-policy\",{\"selectedConfiguration\":[16],\"cancellationPolicy\":[1,\"cancellation-policy\"],\"name\":[1],\"message\":[32]},null,{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"flow-icon\",[[2,\"flow-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-editor-tabs\",[[6,\"nylas-editor-tabs\",{\"calendars\":[16],\"selectedConfiguration\":[16],\"configurations\":[16],\"currentUser\":[16],\"schedulerPreviewLink\":[1,\"scheduler-preview-link\"],\"mode\":[1],\"hideEditorTabs\":[16],\"enableUserFeedback\":[4,\"enable-user-feedback\"],\"action\":[32],\"showFeedbackModal\":[32],\"activeTab\":[32],\"isLoading\":[32],\"hasUnsavedChanges\":[32],\"changesSaved\":[32],\"formState\":[32],\"error\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"],[0,\"feedbackModalClosed\",\"feedbackModalClosedHandler\"],[0,\"feedbackSubmitted\",\"feedbackSubmittedHandler\"]],{\"selectedConfiguration\":[\"configChangedHandler\"],\"currentUser\":[\"userChangedHandler\"]}]]],[\"nylas-booking-form\",[[1,\"nylas-booking-form\",{\"isLoading\":[4,\"is-loading\"],\"bookingInfo\":[16],\"eventInfo\":[16],\"configSettings\":[16],\"name\":[32],\"email\":[32],\"guestEmails\":[32],\"guestEmailErrors\":[32],\"isNameValid\":[32],\"isEmailValid\":[32],\"additionalFields\":[32],\"validationError\":[32],\"backButtonLoading\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangedHandler\"],[0,\"nylasFormDropdownChanged\",\"selectOptionChangedHandler\"],[0,\"nylasFormSwitchToggled\",\"switchToggledHandler\"],[0,\"nylasFormCheckboxToggled\",\"checkboxToggledHandler\"],[0,\"nylasFormRadioChanged\",\"radioChangedHandler\"],[0,\"nylasFormDropdownDefaultSelected\",\"dropdownDefaultSelectedHandler\"]],{\"bookingInfo\":[\"bookingInfoChangedHandler\"]}]]],[\"nylas-list-configurations\",[[1,\"nylas-list-configurations\",{\"configurations\":[16],\"schedulerPreviewLink\":[1,\"scheduler-preview-link\"],\"listConfigurationsNextCursor\":[1,\"list-configurations-next-cursor\"],\"state\":[32],\"error\":[32],\"currentCursor\":[32],\"previousCursors\":[32],\"disableNextPageButton\":[32],\"getState\":[64],\"setState\":[64],\"setError\":[64]},[[0,\"nylasFormDropdownChanged\",\"handleNylasFormDropdownChanged\"]],{\"listConfigurationsNextCursor\":[\"listConfigurationsNextCursorChangedHandler\"]}]]],[\"nylas-cancel-booking-form\",[[1,\"nylas-cancel-booking-form\",{\"cancelBookingId\":[1,\"cancel-booking-id\"],\"rejectBookingId\":[1,\"reject-booking-id\"],\"selectedTimeslot\":[16],\"configSettings\":[16],\"eventInfo\":[16],\"isLoading\":[4,\"is-loading\"],\"cancellationReason\":[32],\"cancellationError\":[32],\"cancellationPolicy\":[32]},[[0,\"nylasFormInputChanged\",\"handleNylasFormInputChanged\"]],{\"configSettings\":[\"configSettingsChangedHandler\"]}]]],[\"nylas-booked-event-card\",[[1,\"nylas-booked-event-card\",{\"eventInfo\":[16],\"rescheduleBookingId\":[1,\"reschedule-booking-id\"],\"bookingInfo\":[8,\"booking-info\"],\"configSettings\":[8,\"config-settings\"],\"isLoading\":[4,\"is-loading\"],\"selectedTimezone\":[1,\"selected-timezone\"],\"selectedTimeslot\":[16],\"selectedLanguage\":[1,\"selected-language\"],\"startTime\":[32],\"endTime\":[32]}]]],[\"nylas-locale-switch\",[[1,\"nylas-locale-switch\",{\"selectedTimezone\":[1025,\"selected-timezone\"],\"selectedLanguage\":[1025,\"selected-language\"]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]]]]],[\"nylas-cancelled-event-card\",[[1,\"nylas-cancelled-event-card\",{\"configSettings\":[16],\"cancelledEventInfo\":[16],\"isClosing\":[32]}]]],[\"nylas-confirmed-event-card\",[[1,\"nylas-confirmed-event-card\",{\"configSettings\":[16],\"confirmedEventInfo\":[16],\"isClosing\":[32]}]]],[\"nylas-date-picker\",[[1,\"nylas-date-picker\",{\"selectableDates\":[16],\"configSettings\":[16],\"selectedDate\":[16],\"selectedLanguage\":[1,\"selected-language\"],\"isLoading\":[4,\"is-loading\"],\"eventDuration\":[2,\"event-duration\"],\"month\":[32],\"dates\":[32],\"disableNextMonthButton\":[32]},null,{\"configSettings\":[\"configSettingsChanged\"],\"selectedLanguage\":[\"selectedLanguageChanged\"]}]]],[\"nylas-organizer-confirmation-card\",[[1,\"nylas-organizer-confirmation-card\",{\"configSettings\":[8,\"config-settings\"],\"isLoading\":[4,\"is-loading\"],\"organizerConfirmationBookingId\":[1,\"organizer-confirmation-booking-id\"],\"selectedLanguage\":[1,\"selected-language\"],\"action\":[32],\"resetAction\":[64]}]]],[\"nylas-notification\",[[1,\"nylas-notification\",{\"ttl\":[8],\"allowedCategories\":[16],\"notifications\":[32]},[[16,\"nylasSchedulerError\",\"onError\"],[16,\"nylasSchedulerWarning\",\"onWarning\"],[16,\"nylasSchedulerInfo\",\"onInfo\"],[16,\"nylasSchedulerSuccess\",\"onSuccess\"]]]]],[\"nylas-selected-event-card\",[[1,\"nylas-selected-event-card\",{\"selectedDate\":[16],\"selectedTimeslot\":[16],\"selectedTimezone\":[1,\"selected-timezone\"],\"selectedLanguage\":[1,\"selected-language\"],\"startTime\":[32],\"endTime\":[32]}]]],[\"nylas-timeslot-picker\",[[1,\"nylas-timeslot-picker\",{\"availability\":[16],\"isLoading\":[4,\"loading-state\"],\"selectedTimeslot\":[16],\"selectedTimezone\":[1,\"selected-timezone\"],\"selectedDate\":[16],\"selectedLanguage\":[1,\"selected-language\"],\"times\":[32],\"hoveredTimeslotIndex\":[32],\"selectedTimeslotIndex\":[32]},null,{\"selectedLanguage\":[\"selectedLanguageChanged\"],\"selectedDate\":[\"selectedDateChanged\"],\"availability\":[\"availabilityChanged\"]}]]],[\"google-logo-icon\",[[2,\"google-logo-icon\",{\"width\":[1],\"height\":[1]}]]],[\"microsoft-logo-icon\",[[2,\"microsoft-logo-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-logo\",[[2,\"nylas-logo\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-participants-custom-availability\",[[65,\"nylas-participants-custom-availability\",{\"selectedConfiguration\":[16],\"name\":[1],\"participants\":[16],\"selectedParticipants\":[32]},[[0,\"nylasFormSwitchToggled\",\"nylasFormSwitchToggledHandler\"],[0,\"valueChanged\",\"handleValueChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"participants\":[\"participantsChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-location\",[[65,\"nylas-event-location\",{\"name\":[1],\"currentUser\":[16],\"userProvider\":[1,\"user-provider\"],\"eventConferencing\":[16],\"conferenceProviders\":[16],\"selectedConfiguration\":[16],\"eventLocation\":[1,\"event-location\"],\"location\":[32],\"grantId\":[32],\"selectedLocationOption\":[32],\"userProviderState\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-limit-future-bookings\",[[65,\"nylas-limit-future-bookings\",{\"selectedConfiguration\":[16],\"availableDaysInFuture\":[2,\"available-days-in-future\"],\"name\":[1],\"selectedNumber\":[32],\"selectedPeriod\":[32]},[[0,\"timePeriodChanged\",\"timePeriodChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-min-booking-notice\",[[65,\"nylas-min-booking-notice\",{\"selectedConfiguration\":[16],\"name\":[1],\"minBookingNotice\":[2,\"min-booking-notice\"],\"selectedNumber\":[32],\"selectedPeriod\":[32]},[[0,\"timePeriodChanged\",\"timePeriodChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-min-cancellation-notice\",[[65,\"nylas-min-cancellation-notice\",{\"selectedConfiguration\":[16],\"name\":[1],\"minCancellationNotice\":[2,\"min-cancellation-notice\"],\"selectedNumber\":[32],\"selectedPeriod\":[32]},[[0,\"timePeriodChanged\",\"timePeriodChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-participant-booking-calendars\",[[65,\"nylas-participant-booking-calendars\",{\"selectedConfiguration\":[16],\"name\":[1],\"participants\":[16],\"calendars\":[16],\"participantOptions\":[16],\"selectedCalendars\":[32],\"participantCalendars\":[32],\"participantDefaultSelectedCalendar\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"calendars\":[\"calendarsChangedHandler\"],\"participants\":[\"participantsChangedHandler\"],\"participantOptions\":[\"participantOptionsChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-scheduling-method\",[[65,\"nylas-scheduling-method\",{\"selectedConfiguration\":[16],\"name\":[1],\"participantOptions\":[16],\"readOnly\":[4,\"read-only\"],\"selectedBookingType\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"nylas-timeslot-interval\",[[65,\"nylas-timeslot-interval\",{\"selectedConfiguration\":[16],\"name\":[1],\"eventDurationMinutes\":[2,\"event-duration-minutes\"],\"internalEventDurationMinutes\":[32],\"selectedInterval\":[32],\"selectedRoundTo\":[32],\"componentLoaded\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"nylasFormRadioChanged\",\"nylasFormRadioChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-booking-confirmation-type\",[[65,\"nylas-booking-confirmation-type\",{\"selectedConfiguration\":[16],\"name\":[1],\"bookingType\":[1,\"booking-type\"],\"showComponent\":[4,\"show-component\"],\"selectedBookingType\":[32],\"showDropdown\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-buffer-time\",[[65,\"nylas-buffer-time\",{\"selectedConfiguration\":[16],\"name\":[1],\"buffer\":[16],\"selectedBeforeBufferTime\":[32],\"selectedAfterBufferTime\":[32],\"componentLoaded\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-page-name\",[[65,\"nylas-page-name\",{\"selectedConfiguration\":[16],\"name\":[1],\"pageName\":[1,\"page-name\"],\"showToggle\":[4,\"show-toggle\"],\"isOpen\":[4,\"is-open\"],\"currentPageName\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-customize-booking-settings\",[[65,\"nylas-customize-booking-settings\",{\"selectedConfiguration\":[16],\"defaultHideAdditionalGuests\":[4,\"default-hide-additional-guests\"],\"defaultHideCancellationOptions\":[4,\"default-hide-cancellation-options\"],\"defaultHideReschedulingOptions\":[4,\"default-hide-rescheduling-options\"],\"name\":[1],\"allowGuestsToInvite\":[32],\"hideCancellationOptions\":[32],\"hideReschedulingOptions\":[32]},[[0,\"nylasFormCheckboxToggled\",\"checkboxToggledHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-description\",[[65,\"nylas-event-description\",{\"selectedConfiguration\":[16],\"eventDescription\":[1,\"event-description\"],\"name\":[1],\"description\":[32]},null,{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-title\",[[65,\"nylas-event-title\",{\"selectedConfiguration\":[16],\"eventTitle\":[1,\"event-title\"],\"name\":[1],\"showTokens\":[32],\"availableTokens\":[32],\"filteredTokens\":[32],\"ariaActivedescendant\":[32],\"currentWord\":[32],\"validationError\":[32],\"configEventTitle\":[32]},[[8,\"formSubmitted\",\"formSubmittedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"ariaActivedescendant\":[\"ariaActivedescendantChangedHandler\"],\"selectedConfiguration\":[\"configChangedHandler\"]}]]],[\"nylas-custom-booking-flow\",[[65,\"nylas-custom-booking-flow\"]]],[\"nylas-event-info\",[[65,\"nylas-event-info\"]]],[\"nylas-event-limits\",[[65,\"nylas-event-limits\"]]],[\"nylas-page-styling\",[[65,\"nylas-page-styling\",{\"selectedConfiguration\":[16],\"name\":[1],\"appearance\":[16],\"isOpen\":[4,\"is-open\"],\"currentAppearance\":[32],\"customInputsSlot\":[32]},[[4,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"],[4,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[4,\"valueChanged\",\"valueChangedHandler\"],[4,\"nylasFormCheckboxToggled\",\"checkboxToggledHandler\"],[4,\"nylasFormRadioChanged\",\"radioChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"calendar-agenda-fill-icon\",[[2,\"calendar-agenda-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-agenda-icon\",[[2,\"calendar-agenda-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-info-icon\",[[2,\"calendar-info-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-patterns-icon\",[[2,\"calendar-patterns-icon\",{\"width\":[1],\"height\":[1]}]]],[\"checkmark-circle-icon\",[[2,\"checkmark-circle-icon\",{\"width\":[1],\"height\":[1]}]]],[\"delete-icon\",[[2,\"delete-icon\",{\"width\":[1],\"height\":[1]}]]],[\"envelope-fill-icon\",[[2,\"envelope-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"envelope-icon\",[[2,\"envelope-icon\",{\"width\":[1],\"height\":[1]}]]],[\"paintbrush-fill-icon\",[[2,\"paintbrush-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"paintbrush-icon\",[[2,\"paintbrush-icon\",{\"width\":[1],\"height\":[1]}]]],[\"people-icon\",[[2,\"people-icon\",{\"width\":[1],\"height\":[1]}]]],[\"person-icon\",[[2,\"person-icon\",{\"width\":[1],\"height\":[1]}]]],[\"translate-icon\",[[2,\"translate-icon\",{\"width\":[1],\"height\":[1]}]]],[\"warning-icon\",[[2,\"warning-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-availability-picker\",[[65,\"nylas-availability-picker\",{\"name\":[1],\"selectedConfiguration\":[16],\"openHours\":[16],\"defaultTimezone\":[1,\"default-timezone\"],\"hideHeader\":[4,\"hide-header\"],\"schedule\":[32],\"timezone\":[32],\"overlapDays\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"timeChange\",\"setTime\"],[0,\"formError\",\"setFormError\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"configChangedHandler\"],\"schedule\":[\"scheduleChanged\"]}]]],[\"nylas-feedback-form\",[[1,\"nylas-feedback-form\",{\"feedbackMessage\":[32]},[[4,\"nylasFormInputChanged\",\"handleFormInputChanged\"]]]]],[\"nylas-booking-calendar-picker\",[[65,\"nylas-booking-calendar-picker\",{\"calendars\":[16],\"currentUser\":[16],\"currentUserCalendars\":[16],\"name\":[1],\"defaultBookingCalendar\":[1,\"default-booking-calendar\"],\"hideHeader\":[4,\"hide-header\"],\"selectedCalendar\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"currentUserCalendars\":[\"currentUserCalendarsChangedHandler\"]}]]],[\"nylas-calendar-picker\",[[65,\"nylas-calendar-picker\",{\"name\":[1],\"currentUser\":[16],\"calendars\":[16],\"defaultSelectedCalendars\":[16],\"selectedCalendars\":[32],\"error\":[32]},[[0,\"selectedOptionsChanged\",\"selectedOptionsChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"nylas-reminder-time\",[[65,\"nylas-reminder-time\",{\"name\":[1],\"eventReminderTimeMinutes\":[2,\"event-reminder-time-minutes\"],\"reminderTime\":[32],\"reminderTimeMinutes\":[32],\"reminderTimeincrement\":[32],\"reminderTimeMinutesOptions\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"inputOptionChanged\",\"inputOptionChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"reminderTimeMinutes\":[\"reminderTimeMinutesChangedHandler\"]}]]],[\"input-image-url\",[[65,\"input-image-url\",{\"imageUrl\":[1,\"image-url\"],\"errorMessage\":[1,\"error-message\"],\"name\":[1],\"currentImageUrl\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangedHandler\"],[0,\"nylasFormInputBlurred\",\"nylasFormInputBlurHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"calendar-check-icon\",[[2,\"calendar-check-icon\",{\"width\":[1],\"height\":[1]}]]],[\"checkmark-icon\",[[2,\"checkmark-icon\",{\"width\":[1],\"height\":[1]}]]],[\"dragable-icon\",[[2,\"dragable-icon\",{\"width\":[1],\"height\":[1]}]]],[\"eye-icon\",[[2,\"eye-icon\",{\"width\":[1],\"height\":[1]}]]],[\"feedback-icon\",[[2,\"feedback-icon\",{\"width\":[1],\"height\":[1]}]]],[\"google-meet-icon\",[[2,\"google-meet-icon\",{\"width\":[1],\"height\":[1]}]]],[\"location-icon\",[[2,\"location-icon\",{\"width\":[1],\"height\":[1]}]]],[\"location-off-icon\",[[2,\"location-off-icon\",{\"width\":[1],\"height\":[1]}]]],[\"microsoft-teams-icon\",[[2,\"microsoft-teams-icon\",{\"width\":[1],\"height\":[1]}]]],[\"toggle-switch\",[[1,\"toggle-switch\",{\"name\":[1],\"checked\":[4],\"label\":[1],\"isChecked\":[32]}]]],[\"trash-icon\",[[2,\"trash-icon\",{\"width\":[1],\"height\":[1]}]]],[\"zoom-icon\",[[2,\"zoom-icon\",{\"width\":[1],\"height\":[1]}]]],[\"multi-select-dropdown\",[[1,\"multi-select-dropdown\",{\"name\":[1],\"label\":[1],\"options\":[16],\"error\":[1],\"availableOptions\":[32],\"isOpen\":[32],\"ariaActivedescendant\":[32],\"shouldFocusFirstOption\":[32]},[[6,\"click\",\"handleOutsideClick\"]]]]],[\"calendar-cancel-icon\",[[2,\"calendar-cancel-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-icon\",[[2,\"calendar-icon\",{\"width\":[1],\"height\":[1]}]]],[\"copy-icon\",[[2,\"copy-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-time-window-picker\",[[1,\"nylas-time-window-picker\",{\"time\":[1],\"minimumStartTime\":[1,\"minimum-start-time\"],\"placeholder\":[1],\"name\":[1],\"hasError\":[4,\"has-error\"],\"err\":[32],\"showTimes\":[32],\"ariaActivedescendant\":[32],\"times\":[32],\"shouldAutoScroll\":[32]},[[6,\"click\",\"handleOutsideClick\"]],{\"minimumStartTime\":[\"minimumStartTimeChangedHandler\"]}]]],[\"person-clipboard-icon\",[[2,\"person-clipboard-icon\",{\"width\":[1],\"height\":[1]}]]],[\"plus-icon\",[[2,\"plus-icon\",{\"width\":[1],\"height\":[1]}]]],[\"search-icon\",[[2,\"search-icon\",{\"width\":[1],\"height\":[1]}]]],[\"select-dropdown\",[[1,\"select-dropdown\",{\"name\":[1],\"options\":[16],\"defaultSelectedOption\":[16],\"withSearch\":[4,\"with-search\"],\"label\":[1],\"required\":[4],\"pluralizedLabel\":[1,\"pluralized-label\"],\"dropdownButtonText\":[1,\"dropdown-button-text\"],\"withChevron\":[4,\"with-chevron\"],\"selectedOption\":[32],\"isOpen\":[32],\"searchValue\":[32],\"filteredOptions\":[32],\"ariaActivedescendant\":[32],\"errorMessage\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"],[6,\"click\",\"handleOutsideClick\"]],{\"options\":[\"optionsChangedHandler\"],\"defaultSelectedOption\":[\"defaultSelectedOptionChangedHandler\"]}]]],[\"time-period-selector\",[[2,\"time-period-selector\",{\"timePeriods\":[16],\"defaultSelectedPeriod\":[1,\"default-selected-period\"],\"defaultSelectedNumber\":[2,\"default-selected-number\"],\"selectedPeriod\":[32],\"selectedNumber\":[32],\"numberOptions\":[32],\"timePeriodOptions\":[32]},[[0,\"inputOptionChanged\",\"inputOptionChangedHandler\"],[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]]]]],[\"checkbox-component\",[[1,\"checkbox-component\",{\"name\":[1],\"checked\":[4],\"label\":[1],\"required\":[4],\"isChecked\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"]]]]],[\"edit-icon\",[[2,\"edit-icon\",{\"width\":[1],\"height\":[1]}]]],[\"radio-button-group\",[[1,\"radio-button-group\",{\"name\":[1],\"options\":[16],\"defaultSelectedValue\":[1,\"default-selected-value\"],\"label\":[1],\"required\":[4],\"selectedValue\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"]],{\"defaultSelectedValue\":[\"handleDefaultSelectedValueChange\"]}]]],[\"clock-icon\",[[2,\"clock-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-form-card\",[[65,\"nylas-form-card\"]]],[\"textarea-component\",[[1,\"textarea-component\",{\"name\":[1],\"defaultValue\":[1,\"default-value\"],\"label\":[1],\"placeholder\":[1],\"required\":[4],\"readOnly\":[4,\"read-only\"],\"autoFocus\":[4,\"auto-focus\"],\"maxLength\":[2,\"max-length\"],\"type\":[1],\"tooltip\":[1],\"value\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"],[4,\"triggerValidation\",\"handletriggerValidation\"]]]]],[\"add-circle-icon\",[[2,\"add-circle-icon\",{\"width\":[1],\"height\":[1]}]]],[\"globe-icon\",[[2,\"globe-icon\",{\"width\":[1],\"height\":[1]}]]],[\"input-dropdown\",[[1,\"input-dropdown\",{\"name\":[1],\"options\":[16],\"defaultInputOption\":[16],\"inputValue\":[1,\"input-value\"],\"pluralizedLabel\":[1,\"pluralized-label\"],\"filterable\":[4],\"selectedOption\":[32],\"isOpen\":[32],\"typedValue\":[32],\"filteredOptions\":[32],\"ariaActivedescendant\":[32],\"shouldAutoScroll\":[32]},[[6,\"click\",\"handleOutsideClick\"]],{\"options\":[\"optionsChangedHandler\"],\"defaultInputOption\":[\"defaultSelectedOptionChangedHandler\"],\"inputValue\":[\"inputValueChangedHandler\"]}]]],[\"input-component\",[[1,\"input-component\",{\"name\":[1],\"defaultValue\":[1,\"default-value\"],\"label\":[1],\"type\":[1],\"placeholder\":[1],\"required\":[4],\"readOnly\":[4,\"read-only\"],\"autoFocus\":[4,\"auto-focus\"],\"pattern\":[16],\"maxLength\":[2,\"max-length\"],\"patternError\":[1,\"pattern-error\"],\"requiredError\":[1,\"required-error\"],\"value\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"],[4,\"formSubmitted\",\"handleFormSubmitted\"]],{\"defaultValue\":[\"handleDefaultValueChange\"]}]]],[\"close-icon\",[[2,\"close-icon\",{\"width\":[1],\"height\":[1]}]]],[\"loading-icon\",[[1,\"loading-icon\",{\"width\":[1],\"height\":[1]}]]],[\"button-component\",[[6,\"button-component\",{\"variant\":[1],\"disabled\":[4],\"type\":[1],\"tooltip\":[1],\"isLoading\":[4,\"is-loading\"],\"clickHandler\":[16],\"mouseOverHandler\":[16],\"mouseOutHandler\":[16],\"focusHandler\":[16],\"blurHandler\":[16]}]]],[\"tooltip-component\",[[1,\"tooltip-component\",{\"position\":[1]}]]],[\"info-icon\",[[2,\"info-icon\",{\"width\":[1],\"height\":[1]}]]],[\"chevron-icon\",[[2,\"chevron-icon\",{\"width\":[1],\"height\":[1]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"nylas-reminder-emails\",[[65,\"nylas-reminder-emails\",{\"selectedConfiguration\":[16],\"name\":[1],\"reminders\":[32],\"reminderErrors\":[32],\"participants\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"],[0,\"nylasFormDropdownChanged\",\"handleNylasFormDropdownChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-scheduler-editor\",[[1,\"nylas-scheduler-editor\",{\"configurationId\":[1025,\"configuration-id\"],\"nylasApiRequest\":[1040],\"nylasSessionsConfig\":[16],\"defaultAuthArgs\":[16],\"eventOverrides\":[16],\"schedulerPreviewLink\":[1,\"scheduler-preview-link\"],\"defaultSchedulerConfigState\":[16],\"mode\":[1],\"additionalParticipants\":[16],\"hideEditorTabs\":[16],\"conferenceProviders\":[16],\"requiresSlug\":[4,\"requires-slug\"],\"enableUserFeedback\":[4,\"enable-user-feedback\"],\"automaticComponentRegistration\":[32],\"store\":[64],\"schedulerConnector\":[64]},[[0,\"registerComponent\",\"registerComponentHandler\"],[0,\"unregisterComponent\",\"unregisterComponentHandler\"]],{\"configurationId\":[\"configurationIdChanged\"]}]]],[\"nylas-scheduling\",[[1,\"nylas-scheduling\",{\"mode\":[1],\"defaultSchedulerState\":[16],\"sessionId\":[1,\"session-id\"],\"schedulerApiUrl\":[1,\"scheduler-api-url\"],\"bookingInfo\":[16],\"rescheduleBookingRef\":[1,\"reschedule-booking-ref\"],\"cancelBookingRef\":[1,\"cancel-booking-ref\"],\"organizerConfirmationBookingRef\":[1,\"organizer-confirmation-booking-ref\"],\"configurationId\":[1,\"configuration-id\"],\"slug\":[1],\"clientId\":[1,\"client-id\"],\"nylasBranding\":[4,\"nylas-branding\"],\"eventOverrides\":[16],\"isLoading\":[4,\"is-loading\"],\"themeConfig\":[16],\"localization\":[16],\"showNotification\":[4,\"show-notification\"],\"enableUserFeedback\":[4,\"enable-user-feedback\"],\"automaticComponentRegistration\":[32],\"selectedDateLabel\":[32],\"refConfigId\":[32],\"language\":[32],\"showFeedbackModal\":[32],\"bookingInfoConfirmed\":[32],\"getNylasSchedulerStore\":[64],\"getNylasSchedulerConnector\":[64],\"getRef\":[64]},[[0,\"languageChanged\",\"languageChanged\"],[0,\"registerComponent\",\"registerComponentHandler\"],[0,\"unregisterComponent\",\"unregisterComponentHandler\"],[0,\"monthChanged\",\"monthChangedHandler\"],[0,\"detailsConfirmed\",\"bookButtonClickedHandler\"],[0,\"dateSelected\",\"dateSelectedHandler\"],[0,\"cancelBookedEventError\",\"cancelBookedEventErrorHandler\"],[0,\"cancelBookedEventValidationError\",\"cancelBookedEventValidationErrorHandler\"],[0,\"rescheduleBookedEventError\",\"rescheduleBookedEventErrorHandler\"],[0,\"confirmBookingError\",\"confirmBookingErrorHandler\"],[0,\"feedbackModalClosed\",\"feedbackModalClosedHandler\"],[0,\"feedbackSubmitted\",\"feedbackSubmittedHandler\"]],{\"bookingInfo\":[\"bookingInfoChanged\"],\"rescheduleBookingRef\":[\"rescheduleBookingRefChanged\"],\"cancelBookingRef\":[\"cancelBookingRefChanged\"],\"organizerConfirmationBookingRef\":[\"organizerConfirmationBookingRefChanged\"],\"localization\":[\"localizationChanged\"],\"themeConfig\":[\"themeConfigChanged\"]}]]],[\"input-color-picker\",[[1,\"input-color-picker\",{\"name\":[1],\"defaultSelectedColor\":[1,\"default-selected-color\"],\"selectedColor\":[32],\"isOpen\":[32],\"ariaActivedescendant\":[32],\"errorMessage\":[32]},[[6,\"click\",\"handleOutsideClick\"]]]]],[\"archive-icon\",[[2,\"archive-icon\",{\"width\":[1],\"height\":[1]}]]],[\"arrow-icon\",[[2,\"arrow-icon\",{\"width\":[1],\"height\":[1]}]]],[\"bold-icon\",[[2,\"bold-icon\",{\"width\":[1],\"height\":[1]}]]],[\"document-refresh-icon\",[[2,\"document-refresh-icon\",{\"width\":[1],\"height\":[1]}]]],[\"folder-icon\",[[2,\"folder-icon\",{\"width\":[1],\"height\":[1]}]]],[\"forward-icon\",[[2,\"forward-icon\",{\"width\":[1],\"height\":[1]}]]],[\"inbox-icon\",[[2,\"inbox-icon\",{\"width\":[1],\"height\":[1]}]]],[\"italic-icon\",[[2,\"italic-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-if-state\",[[1,\"nylas-if-state\",{\"state\":[1],\"isStateSet\":[4,\"is-state-set\"],\"isBoolean\":[4,\"is-boolean\"],\"getStore\":[16],\"transition\":[1],\"show\":[32],\"classes\":[32]},null,{\"getStore\":[\"onGetStoreChange\"]}]]],[\"nylas-login\",[[1,\"nylas-login\",{\"isAuthenticated\":[4,\"is-authenticated\"],\"nylasConnector\":[16],\"scopes\":[16],\"loginMethod\":[1,\"login-method\"],\"companyName\":[1,\"company-name\"],\"logoUrl\":[1,\"logo-url\"],\"logoWidth\":[1,\"logo-width\"],\"providers\":[1],\"buttonText\":[1,\"button-text\"],\"email\":[32]}]]],[\"nylas-provider\",[[1,\"nylas-provider\",{\"authConfig\":[16],\"eventOverrides\":[16],\"automaticComponentRegistration\":[4,\"automatic-component-registration\"],\"getNylasAuth\":[64],\"getNylasConnector\":[64],\"getAuthStore\":[64],\"getNylasSchedulerStore\":[64],\"getNylasSchedulerConfigStore\":[64]},[[0,\"registerComponent\",\"registerComponentHandler\"],[0,\"unregisterComponent\",\"unregisterComponentHandler\"]]]]],[\"play-icon\",[[2,\"play-icon\",{\"width\":[1],\"height\":[1]}]]],[\"refresh-icon\",[[2,\"refresh-icon\",{\"width\":[1],\"height\":[1]}]]],[\"reply-all-icon\",[[2,\"reply-all-icon\",{\"width\":[1],\"height\":[1]}]]],[\"reply-icon\",[[2,\"reply-icon\",{\"width\":[1],\"height\":[1]}]]],[\"sent-icon\",[[2,\"sent-icon\",{\"width\":[1],\"height\":[1]}]]],[\"spam-icon\",[[2,\"spam-icon\",{\"width\":[1],\"height\":[1]}]]],[\"star-icon\",[[2,\"star-icon\",{\"width\":[1],\"height\":[1]}]]],[\"stop-icon\",[[2,\"stop-icon\",{\"width\":[1],\"height\":[1]}]]],[\"trash-fill-icon\",[[2,\"trash-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"underline-icon\",[[2,\"underline-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-confirmation-email\",[[65,\"nylas-confirmation-email\",{\"selectedConfiguration\":[16],\"confirmationEmailTemplate\":[16],\"participants\":[16],\"name\":[1],\"isOpen\":[4,\"is-open\"],\"confirmationEmail\":[32],\"isConfirmationEmailOpen\":[32],\"participantsState\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"],[0,\"valueChanged\",\"valueChangedHandler\"],[0,\"nylasFormInputImageUrlInvalid\",\"nylasFormInputImageUrlInvalidHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-booking-form-config\",[[65,\"nylas-booking-form-config\",{\"selectedConfiguration\":[16],\"name\":[1],\"additonalFields\":[16],\"formFields\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"nylasFormInputChanged\",\"nylasFormInputChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"formFields\":[\"watchHandler\"]}]]],[\"nylas-additional-participants\",[[65,\"nylas-additional-participants\",{\"name\":[1],\"selectedConfiguration\":[16],\"currentUser\":[16],\"participantOptions\":[16],\"eventParticipants\":[16],\"participants\":[32],\"participantErrors\":[32],\"includeOrganizerAsParticipant\":[32],\"isRoundRobinConfig\":[32],\"error\":[32]},[[0,\"inputOptionChanged\",\"onInputOptionChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-booking-confirmation-redirect\",[[65,\"nylas-booking-confirmation-redirect\",{\"selectedConfiguration\":[16],\"name\":[1],\"redirectUrl\":[1,\"redirect-url\"],\"redirectUrlErrorMessage\":[1,\"redirect-url-error-message\"],\"currentRedirectUrl\":[32],\"acceptUrl\":[32],\"componentLoaded\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"nylasFormInputBlurred\",\"nylasFormInputBlurHandler\"],[4,\"formSubmitted\",\"formSubmittedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-connected-calendars\",[[65,\"nylas-connected-calendars\",{\"name\":[1],\"selectedConfiguration\":[16],\"participants\":[16],\"calendars\":[16],\"participantOptions\":[16],\"selectedCalendars\":[32],\"participantCalendars\":[32],\"participantDefaultSelectedCalendars\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"calendars\":[\"calendarsChangedHandler\"],\"participants\":[\"participantsChangedHandler\"],\"participantOptions\":[\"participantOptionsChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-custom-event-slug\",[[65,\"nylas-custom-event-slug\",{\"selectedConfiguration\":[16],\"defaultUrlSlug\":[1,\"default-url-slug\"],\"isOpen\":[4,\"is-open\"],\"slugErrorMessage\":[1,\"slug-error-message\"],\"name\":[1],\"requiresSlug\":[4,\"requires-slug\"],\"urlSlug\":[32],\"focus\":[32],\"copied\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"],[0,\"nylasFormInputFocused\",\"nylasFormInputFocusHandler\"],[0,\"nylasFormInputBlurred\",\"nylasFormInputBlurHandler\"],[8,\"formSubmitted\",\"formSubmittedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-duration\",[[65,\"nylas-event-duration\",{\"selectedConfiguration\":[16],\"name\":[1],\"eventDurationMinutes\":[2,\"event-duration-minutes\"],\"duration\":[32],\"durationMinutes\":[32],\"durationIncrement\":[32],\"durationMinutesOptions\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"inputOptionChanged\",\"inputOptionChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"],\"durationMinutes\":[\"durationMinutesChangedHandler\"]}]]],[\"nylas-cancellation-policy\",[[65,\"nylas-cancellation-policy\",{\"selectedConfiguration\":[16],\"cancellationPolicy\":[1,\"cancellation-policy\"],\"name\":[1],\"message\":[32]},null,{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"flow-icon\",[[2,\"flow-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-editor-tabs\",[[6,\"nylas-editor-tabs\",{\"calendars\":[16],\"selectedConfiguration\":[16],\"configurations\":[16],\"currentUser\":[16],\"schedulerPreviewLink\":[1,\"scheduler-preview-link\"],\"mode\":[1],\"hideEditorTabs\":[16],\"enableUserFeedback\":[4,\"enable-user-feedback\"],\"action\":[32],\"showFeedbackModal\":[32],\"activeTab\":[32],\"isLoading\":[32],\"hasUnsavedChanges\":[32],\"changesSaved\":[32],\"formState\":[32],\"error\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"],[0,\"feedbackModalClosed\",\"feedbackModalClosedHandler\"],[0,\"feedbackSubmitted\",\"feedbackSubmittedHandler\"]],{\"selectedConfiguration\":[\"configChangedHandler\"],\"currentUser\":[\"userChangedHandler\"]}]]],[\"nylas-booking-form\",[[1,\"nylas-booking-form\",{\"isLoading\":[4,\"is-loading\"],\"bookingInfo\":[16],\"eventInfo\":[16],\"configSettings\":[16],\"themeConfig\":[8,\"theme-config\"],\"name\":[32],\"email\":[32],\"guestEmails\":[32],\"guestEmailErrors\":[32],\"isNameValid\":[32],\"isEmailValid\":[32],\"additionalFields\":[32],\"validationError\":[32],\"backButtonLoading\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangedHandler\"],[0,\"nylasFormDropdownChanged\",\"selectOptionChangedHandler\"],[0,\"nylasFormSwitchToggled\",\"switchToggledHandler\"],[0,\"nylasFormCheckboxToggled\",\"checkboxToggledHandler\"],[0,\"nylasFormRadioChanged\",\"radioChangedHandler\"],[0,\"nylasFormDropdownDefaultSelected\",\"dropdownDefaultSelectedHandler\"]],{\"bookingInfo\":[\"bookingInfoChangedHandler\"]}]]],[\"nylas-list-configurations\",[[1,\"nylas-list-configurations\",{\"configurations\":[16],\"schedulerPreviewLink\":[1,\"scheduler-preview-link\"],\"listConfigurationsNextCursor\":[1,\"list-configurations-next-cursor\"],\"state\":[32],\"error\":[32],\"currentCursor\":[32],\"previousCursors\":[32],\"disableNextPageButton\":[32],\"getState\":[64],\"setState\":[64],\"setError\":[64]},[[0,\"nylasFormDropdownChanged\",\"handleNylasFormDropdownChanged\"]],{\"listConfigurationsNextCursor\":[\"listConfigurationsNextCursorChangedHandler\"]}]]],[\"nylas-cancel-booking-form\",[[1,\"nylas-cancel-booking-form\",{\"cancelBookingId\":[1,\"cancel-booking-id\"],\"rejectBookingId\":[1,\"reject-booking-id\"],\"selectedTimeslot\":[16],\"configSettings\":[16],\"eventInfo\":[16],\"isLoading\":[4,\"is-loading\"],\"themeConfig\":[8,\"theme-config\"],\"cancellationReason\":[32],\"cancellationError\":[32],\"cancellationPolicy\":[32]},[[0,\"nylasFormInputChanged\",\"handleNylasFormInputChanged\"]],{\"configSettings\":[\"configSettingsChangedHandler\"]}]]],[\"nylas-booked-event-card\",[[1,\"nylas-booked-event-card\",{\"eventInfo\":[16],\"rescheduleBookingId\":[1,\"reschedule-booking-id\"],\"bookingInfo\":[8,\"booking-info\"],\"configSettings\":[8,\"config-settings\"],\"isLoading\":[4,\"is-loading\"],\"themeConfig\":[8,\"theme-config\"],\"selectedTimezone\":[1,\"selected-timezone\"],\"selectedTimeslot\":[16],\"selectedLanguage\":[1,\"selected-language\"],\"startTime\":[32],\"endTime\":[32]}]]],[\"nylas-locale-switch\",[[1,\"nylas-locale-switch\",{\"themeConfig\":[8,\"theme-config\"],\"selectedTimezone\":[1025,\"selected-timezone\"],\"selectedLanguage\":[1025,\"selected-language\"]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]]]]],[\"nylas-cancelled-event-card\",[[1,\"nylas-cancelled-event-card\",{\"configSettings\":[16],\"themeConfig\":[8,\"theme-config\"],\"cancelledEventInfo\":[16],\"isClosing\":[32]}]]],[\"nylas-confirmed-event-card\",[[1,\"nylas-confirmed-event-card\",{\"configSettings\":[16],\"themeConfig\":[8,\"theme-config\"],\"confirmedEventInfo\":[16],\"isClosing\":[32]}]]],[\"nylas-date-picker\",[[1,\"nylas-date-picker\",{\"selectableDates\":[16],\"configSettings\":[16],\"themeConfig\":[8,\"theme-config\"],\"selectedDate\":[16],\"selectedLanguage\":[1,\"selected-language\"],\"isLoading\":[4,\"is-loading\"],\"eventDuration\":[2,\"event-duration\"],\"month\":[32],\"dates\":[32],\"disableNextMonthButton\":[32]},null,{\"configSettings\":[\"configSettingsChanged\"],\"selectedLanguage\":[\"selectedLanguageChanged\"]}]]],[\"nylas-organizer-confirmation-card\",[[1,\"nylas-organizer-confirmation-card\",{\"configSettings\":[8,\"config-settings\"],\"isLoading\":[4,\"is-loading\"],\"themeConfig\":[8,\"theme-config\"],\"organizerConfirmationBookingId\":[1,\"organizer-confirmation-booking-id\"],\"selectedLanguage\":[1,\"selected-language\"],\"action\":[32],\"resetAction\":[64]}]]],[\"nylas-notification\",[[1,\"nylas-notification\",{\"ttl\":[8],\"allowedCategories\":[16],\"notifications\":[32]},[[16,\"nylasSchedulerError\",\"onError\"],[16,\"nylasSchedulerWarning\",\"onWarning\"],[16,\"nylasSchedulerInfo\",\"onInfo\"],[16,\"nylasSchedulerSuccess\",\"onSuccess\"]]]]],[\"nylas-selected-event-card\",[[1,\"nylas-selected-event-card\",{\"themeConfig\":[8,\"theme-config\"],\"selectedDate\":[16],\"selectedTimeslot\":[16],\"selectedTimezone\":[1,\"selected-timezone\"],\"selectedLanguage\":[1,\"selected-language\"],\"startTime\":[32],\"endTime\":[32]}]]],[\"nylas-timeslot-picker\",[[1,\"nylas-timeslot-picker\",{\"availability\":[16],\"isLoading\":[4,\"loading-state\"],\"themeConfig\":[8,\"theme-config\"],\"selectedTimeslot\":[16],\"selectedTimezone\":[1,\"selected-timezone\"],\"selectedDate\":[16],\"selectedLanguage\":[1,\"selected-language\"],\"times\":[32],\"hoveredTimeslotIndex\":[32],\"selectedTimeslotIndex\":[32]},null,{\"selectedLanguage\":[\"selectedLanguageChanged\"],\"selectedDate\":[\"selectedDateChanged\"],\"availability\":[\"availabilityChanged\"]}]]],[\"google-logo-icon\",[[2,\"google-logo-icon\",{\"width\":[1],\"height\":[1]}]]],[\"microsoft-logo-icon\",[[2,\"microsoft-logo-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-logo\",[[2,\"nylas-logo\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-participants-custom-availability\",[[65,\"nylas-participants-custom-availability\",{\"selectedConfiguration\":[16],\"name\":[1],\"participants\":[16],\"selectedParticipants\":[32]},[[0,\"nylasFormSwitchToggled\",\"nylasFormSwitchToggledHandler\"],[0,\"valueChanged\",\"handleValueChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"participants\":[\"participantsChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-location\",[[65,\"nylas-event-location\",{\"name\":[1],\"currentUser\":[16],\"userProvider\":[1,\"user-provider\"],\"eventConferencing\":[16],\"conferenceProviders\":[16],\"selectedConfiguration\":[16],\"eventLocation\":[1,\"event-location\"],\"location\":[32],\"grantId\":[32],\"selectedLocationOption\":[32],\"userProviderState\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-limit-future-bookings\",[[65,\"nylas-limit-future-bookings\",{\"selectedConfiguration\":[16],\"availableDaysInFuture\":[2,\"available-days-in-future\"],\"name\":[1],\"selectedNumber\":[32],\"selectedPeriod\":[32]},[[0,\"timePeriodChanged\",\"timePeriodChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-min-booking-notice\",[[65,\"nylas-min-booking-notice\",{\"selectedConfiguration\":[16],\"name\":[1],\"minBookingNotice\":[2,\"min-booking-notice\"],\"selectedNumber\":[32],\"selectedPeriod\":[32]},[[0,\"timePeriodChanged\",\"timePeriodChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-min-cancellation-notice\",[[65,\"nylas-min-cancellation-notice\",{\"selectedConfiguration\":[16],\"name\":[1],\"minCancellationNotice\":[2,\"min-cancellation-notice\"],\"selectedNumber\":[32],\"selectedPeriod\":[32]},[[0,\"timePeriodChanged\",\"timePeriodChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-participant-booking-calendars\",[[65,\"nylas-participant-booking-calendars\",{\"selectedConfiguration\":[16],\"name\":[1],\"participants\":[16],\"calendars\":[16],\"participantOptions\":[16],\"selectedCalendars\":[32],\"participantCalendars\":[32],\"participantDefaultSelectedCalendar\":[32]},[[0,\"valueChanged\",\"handleValueChanged\"]],{\"name\":[\"elementNameChangedHandler\"],\"calendars\":[\"calendarsChangedHandler\"],\"participants\":[\"participantsChangedHandler\"],\"participantOptions\":[\"participantOptionsChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-scheduling-method\",[[65,\"nylas-scheduling-method\",{\"selectedConfiguration\":[16],\"name\":[1],\"participantOptions\":[16],\"readOnly\":[4,\"read-only\"],\"selectedBookingType\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"nylas-timeslot-interval\",[[65,\"nylas-timeslot-interval\",{\"selectedConfiguration\":[16],\"name\":[1],\"eventDurationMinutes\":[2,\"event-duration-minutes\"],\"internalEventDurationMinutes\":[32],\"selectedInterval\":[32],\"selectedRoundTo\":[32],\"componentLoaded\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"nylasFormRadioChanged\",\"nylasFormRadioChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-booking-confirmation-type\",[[65,\"nylas-booking-confirmation-type\",{\"selectedConfiguration\":[16],\"name\":[1],\"bookingType\":[1,\"booking-type\"],\"showComponent\":[4,\"show-component\"],\"selectedBookingType\":[32],\"showDropdown\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-buffer-time\",[[65,\"nylas-buffer-time\",{\"selectedConfiguration\":[16],\"name\":[1],\"buffer\":[16],\"selectedBeforeBufferTime\":[32],\"selectedAfterBufferTime\":[32],\"componentLoaded\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-page-name\",[[65,\"nylas-page-name\",{\"selectedConfiguration\":[16],\"name\":[1],\"pageName\":[1,\"page-name\"],\"showToggle\":[4,\"show-toggle\"],\"isOpen\":[4,\"is-open\"],\"currentPageName\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-customize-booking-settings\",[[65,\"nylas-customize-booking-settings\",{\"selectedConfiguration\":[16],\"defaultHideAdditionalGuests\":[4,\"default-hide-additional-guests\"],\"defaultHideCancellationOptions\":[4,\"default-hide-cancellation-options\"],\"defaultHideReschedulingOptions\":[4,\"default-hide-rescheduling-options\"],\"name\":[1],\"allowGuestsToInvite\":[32],\"hideCancellationOptions\":[32],\"hideReschedulingOptions\":[32]},[[0,\"nylasFormCheckboxToggled\",\"checkboxToggledHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-description\",[[65,\"nylas-event-description\",{\"selectedConfiguration\":[16],\"eventDescription\":[1,\"event-description\"],\"name\":[1],\"description\":[32]},null,{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"selectedConfigurationChangedHandler\"]}]]],[\"nylas-event-title\",[[65,\"nylas-event-title\",{\"selectedConfiguration\":[16],\"eventTitle\":[1,\"event-title\"],\"name\":[1],\"showTokens\":[32],\"availableTokens\":[32],\"filteredTokens\":[32],\"ariaActivedescendant\":[32],\"currentWord\":[32],\"validationError\":[32],\"configEventTitle\":[32]},[[8,\"formSubmitted\",\"formSubmittedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"ariaActivedescendant\":[\"ariaActivedescendantChangedHandler\"],\"selectedConfiguration\":[\"configChangedHandler\"]}]]],[\"nylas-custom-booking-flow\",[[65,\"nylas-custom-booking-flow\"]]],[\"nylas-event-info\",[[65,\"nylas-event-info\"]]],[\"nylas-event-limits\",[[65,\"nylas-event-limits\"]]],[\"nylas-page-styling\",[[65,\"nylas-page-styling\",{\"selectedConfiguration\":[16],\"name\":[1],\"appearance\":[16],\"isOpen\":[4,\"is-open\"],\"currentAppearance\":[32],\"customInputsSlot\":[32]},[[4,\"nylasFormInputChanged\",\"nylasFormInputChangeHandler\"],[4,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[4,\"valueChanged\",\"valueChangedHandler\"],[4,\"nylasFormCheckboxToggled\",\"checkboxToggledHandler\"],[4,\"nylasFormRadioChanged\",\"radioChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"calendar-agenda-fill-icon\",[[2,\"calendar-agenda-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-agenda-icon\",[[2,\"calendar-agenda-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-info-icon\",[[2,\"calendar-info-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-patterns-icon\",[[2,\"calendar-patterns-icon\",{\"width\":[1],\"height\":[1]}]]],[\"checkmark-circle-icon\",[[2,\"checkmark-circle-icon\",{\"width\":[1],\"height\":[1]}]]],[\"delete-icon\",[[2,\"delete-icon\",{\"width\":[1],\"height\":[1]}]]],[\"envelope-fill-icon\",[[2,\"envelope-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"envelope-icon\",[[2,\"envelope-icon\",{\"width\":[1],\"height\":[1]}]]],[\"paintbrush-fill-icon\",[[2,\"paintbrush-fill-icon\",{\"width\":[1],\"height\":[1]}]]],[\"paintbrush-icon\",[[2,\"paintbrush-icon\",{\"width\":[1],\"height\":[1]}]]],[\"people-icon\",[[2,\"people-icon\",{\"width\":[1],\"height\":[1]}]]],[\"person-icon\",[[2,\"person-icon\",{\"width\":[1],\"height\":[1]}]]],[\"translate-icon\",[[2,\"translate-icon\",{\"width\":[1],\"height\":[1]}]]],[\"warning-icon\",[[2,\"warning-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-availability-picker\",[[65,\"nylas-availability-picker\",{\"name\":[1],\"selectedConfiguration\":[16],\"openHours\":[16],\"defaultTimezone\":[1,\"default-timezone\"],\"hideHeader\":[4,\"hide-header\"],\"schedule\":[32],\"timezone\":[32],\"overlapDays\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"timeChange\",\"setTime\"],[0,\"formError\",\"setFormError\"]],{\"name\":[\"elementNameChangedHandler\"],\"selectedConfiguration\":[\"configChangedHandler\"],\"schedule\":[\"scheduleChanged\"]}]]],[\"nylas-feedback-form\",[[1,\"nylas-feedback-form\",{\"themeConfig\":[8,\"theme-config\"],\"feedbackMessage\":[32]},[[4,\"nylasFormInputChanged\",\"handleFormInputChanged\"]]]]],[\"nylas-booking-calendar-picker\",[[65,\"nylas-booking-calendar-picker\",{\"calendars\":[16],\"currentUser\":[16],\"currentUserCalendars\":[16],\"name\":[1],\"defaultBookingCalendar\":[1,\"default-booking-calendar\"],\"hideHeader\":[4,\"hide-header\"],\"selectedCalendar\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"currentUserCalendars\":[\"currentUserCalendarsChangedHandler\"]}]]],[\"nylas-calendar-picker\",[[65,\"nylas-calendar-picker\",{\"name\":[1],\"currentUser\":[16],\"calendars\":[16],\"defaultSelectedCalendars\":[16],\"selectedCalendars\":[32],\"error\":[32]},[[0,\"selectedOptionsChanged\",\"selectedOptionsChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"nylas-reminder-time\",[[65,\"nylas-reminder-time\",{\"name\":[1],\"eventReminderTimeMinutes\":[2,\"event-reminder-time-minutes\"],\"reminderTime\":[32],\"reminderTimeMinutes\":[32],\"reminderTimeincrement\":[32],\"reminderTimeMinutesOptions\":[32]},[[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"],[0,\"inputOptionChanged\",\"inputOptionChangedHandler\"]],{\"name\":[\"elementNameChangedHandler\"],\"reminderTimeMinutes\":[\"reminderTimeMinutesChangedHandler\"]}]]],[\"input-image-url\",[[65,\"input-image-url\",{\"imageUrl\":[1,\"image-url\"],\"errorMessage\":[1,\"error-message\"],\"name\":[1],\"currentImageUrl\":[32]},[[0,\"nylasFormInputChanged\",\"nylasFormInputChangedHandler\"],[0,\"nylasFormInputBlurred\",\"nylasFormInputBlurHandler\"]],{\"name\":[\"elementNameChangedHandler\"]}]]],[\"calendar-check-icon\",[[2,\"calendar-check-icon\",{\"width\":[1],\"height\":[1]}]]],[\"checkmark-icon\",[[2,\"checkmark-icon\",{\"width\":[1],\"height\":[1]}]]],[\"dragable-icon\",[[2,\"dragable-icon\",{\"width\":[1],\"height\":[1]}]]],[\"eye-icon\",[[2,\"eye-icon\",{\"width\":[1],\"height\":[1]}]]],[\"feedback-icon\",[[2,\"feedback-icon\",{\"width\":[1],\"height\":[1]}]]],[\"google-meet-icon\",[[2,\"google-meet-icon\",{\"width\":[1],\"height\":[1]}]]],[\"location-icon\",[[2,\"location-icon\",{\"width\":[1],\"height\":[1]}]]],[\"location-off-icon\",[[2,\"location-off-icon\",{\"width\":[1],\"height\":[1]}]]],[\"microsoft-teams-icon\",[[2,\"microsoft-teams-icon\",{\"width\":[1],\"height\":[1]}]]],[\"toggle-switch\",[[1,\"toggle-switch\",{\"name\":[1],\"checked\":[4],\"label\":[1],\"isChecked\":[32]}]]],[\"trash-icon\",[[2,\"trash-icon\",{\"width\":[1],\"height\":[1]}]]],[\"zoom-icon\",[[2,\"zoom-icon\",{\"width\":[1],\"height\":[1]}]]],[\"multi-select-dropdown\",[[1,\"multi-select-dropdown\",{\"name\":[1],\"label\":[1],\"options\":[16],\"error\":[1],\"availableOptions\":[32],\"isOpen\":[32],\"ariaActivedescendant\":[32],\"shouldFocusFirstOption\":[32]},[[6,\"click\",\"handleOutsideClick\"]]]]],[\"calendar-cancel-icon\",[[2,\"calendar-cancel-icon\",{\"width\":[1],\"height\":[1]}]]],[\"calendar-icon\",[[2,\"calendar-icon\",{\"width\":[1],\"height\":[1]}]]],[\"copy-icon\",[[2,\"copy-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-time-window-picker\",[[1,\"nylas-time-window-picker\",{\"time\":[1],\"minimumStartTime\":[1,\"minimum-start-time\"],\"placeholder\":[1],\"name\":[1],\"hasError\":[4,\"has-error\"],\"err\":[32],\"showTimes\":[32],\"ariaActivedescendant\":[32],\"times\":[32],\"shouldAutoScroll\":[32]},[[6,\"click\",\"handleOutsideClick\"]],{\"minimumStartTime\":[\"minimumStartTimeChangedHandler\"]}]]],[\"person-clipboard-icon\",[[2,\"person-clipboard-icon\",{\"width\":[1],\"height\":[1]}]]],[\"plus-icon\",[[2,\"plus-icon\",{\"width\":[1],\"height\":[1]}]]],[\"search-icon\",[[2,\"search-icon\",{\"width\":[1],\"height\":[1]}]]],[\"select-dropdown\",[[1,\"select-dropdown\",{\"name\":[1],\"options\":[16],\"defaultSelectedOption\":[16],\"withSearch\":[4,\"with-search\"],\"label\":[1],\"required\":[4],\"pluralizedLabel\":[1,\"pluralized-label\"],\"dropdownButtonText\":[1,\"dropdown-button-text\"],\"withChevron\":[4,\"with-chevron\"],\"selectedOption\":[32],\"isOpen\":[32],\"searchValue\":[32],\"filteredOptions\":[32],\"ariaActivedescendant\":[32],\"errorMessage\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"],[6,\"click\",\"handleOutsideClick\"]],{\"options\":[\"optionsChangedHandler\"],\"defaultSelectedOption\":[\"defaultSelectedOptionChangedHandler\"]}]]],[\"time-period-selector\",[[2,\"time-period-selector\",{\"timePeriods\":[16],\"defaultSelectedPeriod\":[1,\"default-selected-period\"],\"defaultSelectedNumber\":[2,\"default-selected-number\"],\"selectedPeriod\":[32],\"selectedNumber\":[32],\"numberOptions\":[32],\"timePeriodOptions\":[32]},[[0,\"inputOptionChanged\",\"inputOptionChangedHandler\"],[0,\"nylasFormDropdownChanged\",\"nylasFormDropdownChangedHandler\"]]]]],[\"checkbox-component\",[[1,\"checkbox-component\",{\"name\":[1],\"checked\":[4],\"label\":[1],\"required\":[4],\"isChecked\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"]]]]],[\"edit-icon\",[[2,\"edit-icon\",{\"width\":[1],\"height\":[1]}]]],[\"radio-button-group\",[[1,\"radio-button-group\",{\"name\":[1],\"options\":[16],\"defaultSelectedValue\":[1,\"default-selected-value\"],\"label\":[1],\"required\":[4],\"selectedValue\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"]],{\"defaultSelectedValue\":[\"handleDefaultSelectedValueChange\"]}]]],[\"clock-icon\",[[2,\"clock-icon\",{\"width\":[1],\"height\":[1]}]]],[\"nylas-form-card\",[[65,\"nylas-form-card\"]]],[\"textarea-component\",[[1,\"textarea-component\",{\"name\":[1],\"defaultValue\":[1,\"default-value\"],\"label\":[1],\"placeholder\":[1],\"required\":[4],\"readOnly\":[4,\"read-only\"],\"autoFocus\":[4,\"auto-focus\"],\"maxLength\":[2,\"max-length\"],\"type\":[1],\"tooltip\":[1],\"value\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"],[4,\"triggerValidation\",\"handletriggerValidation\"]]]]],[\"add-circle-icon\",[[2,\"add-circle-icon\",{\"width\":[1],\"height\":[1]}]]],[\"globe-icon\",[[2,\"globe-icon\",{\"width\":[1],\"height\":[1]}]]],[\"input-dropdown\",[[1,\"input-dropdown\",{\"name\":[1],\"options\":[16],\"defaultInputOption\":[16],\"inputValue\":[1,\"input-value\"],\"pluralizedLabel\":[1,\"pluralized-label\"],\"filterable\":[4],\"selectedOption\":[32],\"isOpen\":[32],\"typedValue\":[32],\"filteredOptions\":[32],\"ariaActivedescendant\":[32],\"shouldAutoScroll\":[32]},[[6,\"click\",\"handleOutsideClick\"]],{\"options\":[\"optionsChangedHandler\"],\"defaultInputOption\":[\"defaultSelectedOptionChangedHandler\"],\"inputValue\":[\"inputValueChangedHandler\"]}]]],[\"input-component\",[[1,\"input-component\",{\"name\":[1],\"defaultValue\":[1,\"default-value\"],\"label\":[1],\"type\":[1],\"placeholder\":[1],\"required\":[4],\"readOnly\":[4,\"read-only\"],\"autoFocus\":[4,\"auto-focus\"],\"pattern\":[16],\"maxLength\":[2,\"max-length\"],\"patternError\":[1,\"pattern-error\"],\"requiredError\":[1,\"required-error\"],\"value\":[32],\"error\":[32]},[[4,\"bookingFormSubmitted\",\"handleBookingFormSubmitted\"],[4,\"formSubmitted\",\"handleFormSubmitted\"]],{\"defaultValue\":[\"handleDefaultValueChange\"]}]]],[\"close-icon\",[[2,\"close-icon\",{\"width\":[1],\"height\":[1]}]]],[\"loading-icon\",[[1,\"loading-icon\",{\"width\":[1],\"height\":[1]}]]],[\"button-component\",[[6,\"button-component\",{\"variant\":[1],\"disabled\":[4],\"type\":[1],\"tooltip\":[1],\"isLoading\":[4,\"is-loading\"],\"clickHandler\":[16],\"mouseOverHandler\":[16],\"mouseOutHandler\":[16],\"focusHandler\":[16],\"blurHandler\":[16]}]]],[\"tooltip-component\",[[1,\"tooltip-component\",{\"position\":[1]}]]],[\"info-icon\",[[2,\"info-icon\",{\"width\":[1],\"height\":[1]}]]],[\"chevron-icon\",[[2,\"chevron-icon\",{\"width\":[1],\"height\":[1]}]]]]"), options);
 });
 //# sourceMappingURL=nylas-web-elements.js.map

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, a as createEvent, h, i as Host } from './index-b5cb18eb.js';
+import { r as registerInstance, a as createEvent, h, i as Host, e as getElement } from './index-b5cb18eb.js';
 import { R as RegisterComponent } from './register-component-e6af12c1.js';
 import { a as debug, k as formatTimezone, i as instance, j as capitalizeFirstLetter } from './utils-8defae4b.js';
 import { T as TIMEZONE_MAP, a as LANGUAGE_CODE_MAP } from './constants-cca60908.js';
-const nylasBookedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-booked-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400;border-bottom:1px solid var(--nylas-base-200);width:inherit;padding:0 0 1.5rem}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booked-event-header .card-description{text-align:center}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:16px;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.button-container{width:inherit}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);border-top:1px solid var(--nylas-base-200);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
+const nylasBookedEventCardCss = ":host{display:block}.nylas-booked-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400;border-bottom:1px solid var(--nylas-base-200);width:inherit;padding:0 0 1.5rem}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booked-event-header .card-description{text-align:center}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:16px;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.button-container{width:inherit}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);border-top:1px solid var(--nylas-base-200);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -63,6 +63,7 @@ const NylasBookedEventCard = class {
         this.bookingInfo = undefined;
         this.configSettings = undefined;
         this.isLoading = undefined;
+        this.themeConfig = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         this.selectedTimeslot = undefined;
         this.selectedLanguage = navigator.language;
@@ -82,25 +83,34 @@ const NylasBookedEventCard = class {
         if (!this.bookingInfo) {
             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.');
         }
+        this.applyThemeConfig(this.themeConfig);
         this.startTime = formatTimezone(this.selectedTimeslot?.start_time, this.selectedTimezone);
         this.endTime = formatTimezone(this.selectedTimeslot?.end_time, this.selectedTimezone);
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     render() {
         const bookingType = this.configSettings?.booking_type;
         const isManualConfirmation = bookingType && bookingType !== 'booking';
-        return (h(Host, { key: '4c047c53d7532b60d6d28be607b3e926e07f2e50', part: "nbec" }, h("div", { key: '154180aa38c82fc2e28d8b9ad753804fdfb837d7', class: "nylas-booked-event-card" }, h("div", { key: 'a6d046deffb82706bd609a2ac7f33f462578326a', class: "booked-event-timezone" }, h("globe-icon", { key: '22418924800ed88cdf685441561728ecac4594cd' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'f4f4ffb1ff084cba9f1032c1d5e394a9b65286e2', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '7440e6baed4f509594acf69166566a6546d9b2ae', class: "calendar-icon" }, h("calendar-check-icon", { key: '6a82cfb9ac8d89bb8151e86dcbb9d49422513b89' })), h("div", { key: 'c913c479384ecd4e5df96dea05a1305a12df76c8', class: "booked-event-header" }, h("h2", { key: 'c818d579e73751d6e83bf50f9dc34a3523e2b0f1', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
+        return (h(Host, { key: '448f4b09ce4624c71dbff719acb7a67ecbc913e8', part: "nbec" }, h("div", { key: '83186cea10465372dece0a270725407ea74a0e1c', class: "nylas-booked-event-card" }, h("div", { key: '26d0cae03f426336f59c9459109d6c55beedb505', class: "booked-event-timezone" }, h("globe-icon", { key: '87fe3f6a6c6e8a0aad7c0250358d387b70d6a634' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '9c445dce0c157cb67cb92a7a713e1dada1be47a7', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '8bcfae606e9f99ba9a268b2dbb19e755143f2842', class: "calendar-icon" }, h("calendar-check-icon", { key: '7abab211fd0f1a04a087e2bd15ee112db8616e6a' })), h("div", { key: '7c40924ba6736cfc379ed828c5359c1b4e79d98e', class: "booked-event-header" }, h("h2", { key: '497f50d74143788b9d9920ba2ad57564abf7844a', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
             ? `${instance.t('bookingRescheduled')}`
             : isManualConfirmation && !this.isLoading
                 ? `${instance.t('bookingSent')}`
-                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'bb6cef397ebe5aec3ed49f455ac00430594c4c6f', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: 'd4732fc9421c4d54062bdac74e69a476322f168a', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'caadcce299c4506d709a65bfbc3d10fec64ef6d6' }), h("h3", { key: '8a2dc813f1be6bab13a53328c4e9dbb5ec7d41df' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: 'fedc61f46ba1b96e424b23aff08c382296e4a6d3' }, this.selectedTimeslot?.start_time
+                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'efaf8dda6da9da0e3d181ecedd579cb1648beec2', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: '4a4566f77af068b139525a13b84fd658fd9b8d02', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '8526a636990d6f1bd3631a77fc4c11587bb1c966' }), h("h3", { key: 'f2286f630eb03a961276b149b7f556be715c0dc3' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: 'ad07de11395666123ccf0022f0da372c9c3f8425' }, this.selectedTimeslot?.start_time
             ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))
-            : '-', ' ', h("br", { key: '6efc18bfd398bca545c359b5876ff9a16792485f' }), this.startTime, " - ", this.endTime)), h("div", { key: 'c972d3fc4f1541ec6a1fde958176de0adccf3bcd', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
+            : '-', ' ', h("br", { key: '70397806f6fbed27a981f23a4ae3c57309fffbbf' }), this.startTime, " - ", this.endTime)), h("div", { key: '5fe7e31e10847e8e701dcd192c39350bec71291f', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
                 'footer': true,
                 'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
                     this.configSettings?.booking_type === 'organizer-confirmation',
                 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
             } }, !this.configSettings?.scheduler?.hide_cancellation_options && (h("button-component", { variant: 'destructive', onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, `${instance.t('cancelBookingButton')}`)), !this.configSettings?.scheduler?.hide_rescheduling_options && (h("button-component", { variant: 'basic', onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, `${instance.t('rescheduleBookingButton')}`)))))))));
     }
+    get host() { return getElement(this); }
 };
 __decorate([
     RegisterComponent({
@@ -132,6 +142,7 @@ __decorate([
                 debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

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

	@@ -1 +1 @@
1	- {"file":"nylas-booked-event-card.entry.esm.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}
1	+ {"file":"nylas-booked-event-card.entry.esm.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: 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}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, 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, ThemeConfig, 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 host element.\n * Used to manage the host element of the provider.\n /\n @Element() private host!: HTMLNylasBookedEventCardElement;\n\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 @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\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 this.applyThemeConfig(this.themeConfig);\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 applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\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 localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\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/nylas-web-elements/nylas-booking-form.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, a as createEvent, h, i as Host, e as getElement
 import { R as RegisterComponent } from './register-component-e6af12c1.js';
 import { s as sanitizeHtml_1, i as instance, a as debug, l as sanitize } from './utils-8defae4b.js';
-const nylasBookingFormCss = ":host{display:block;height:100%;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{grid-template-columns:1fr}}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family);font-size:16px}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}.button-content{display:flex;gap:4px;align-items:center}sp-infield-button{--spectrum-infield-button-background-color:transparent;--spectrum-infield-button-background-color-hover:transparent;--spectrum-infield-button-background-color-active:transparent;--spectrum-infield-button-border-color:transparent;--spectrum-infield-button-border-width:1px;--spectrum-infield-button-border-radius:0;color:var(--nylas-base-600);background:transparent;border:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;display:flex;position:absolute;right:0;align-items:center;justify-content:center;cursor:pointer}sp-infield-button sp-icon-cross300{color:var(--nylas-base-600)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}button-component.remove-guest{position:absolute;height:51px;right:0}button-component.remove-guest.error button{border-color:var(--nylas-error)}button-component.remove-guest button{height:inherit;border-top-left-radius:initial;border-bottom-left-radius:initial;border:none !important;border-left:1px solid var(--nylas-base-300) !important}button-component.remove-guest button:hover,button-component.remove-guest button:focus{outline:1px solid var(--nylas-primary) !important;color:var(--nylas-primary)}button-component.back button{--dot-color:var(--nylas-base-800)}.guest-email-input{position:relative;display:flex;width:100%}";
+const nylasBookingFormCss = ":host{display:block;height:100%}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{grid-template-columns:1fr}}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family);font-size:16px}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}.button-content{display:flex;gap:4px;align-items:center}sp-infield-button{--spectrum-infield-button-background-color:transparent;--spectrum-infield-button-background-color-hover:transparent;--spectrum-infield-button-background-color-active:transparent;--spectrum-infield-button-border-color:transparent;--spectrum-infield-button-border-width:1px;--spectrum-infield-button-border-radius:0;color:var(--nylas-base-600);background:transparent;border:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;display:flex;position:absolute;right:0;align-items:center;justify-content:center;cursor:pointer}sp-infield-button sp-icon-cross300{color:var(--nylas-base-600)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}button-component.remove-guest{position:absolute;height:51px;right:0}button-component.remove-guest.error button{border-color:var(--nylas-error)}button-component.remove-guest button{height:inherit;border-top-left-radius:initial;border-bottom-left-radius:initial;border:none !important;border-left:1px solid var(--nylas-base-300) !important}button-component.remove-guest button:hover,button-component.remove-guest button:focus{outline:1px solid var(--nylas-primary) !important;color:var(--nylas-primary)}button-component.back button{--dot-color:var(--nylas-base-800)}.guest-email-input{position:relative;display:flex;width:100%}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -150,6 +150,7 @@ const NylasBookingForm = class {
         this.bookingInfo = undefined;
         this.eventInfo = undefined;
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.name = '';
         this.email = '';
         this.guestEmails = [];
@@ -164,10 +165,14 @@ const NylasBookingForm = class {
     disconnectedCallback() { }
     componentWillLoad() {
         debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
+    }
+    componentDidLoad() {
+        debug('nylas-booking-form', 'componentDidLoad', this.bookingInfo);
         if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {
             this.name = this.bookingInfo.primaryParticipant?.name;
             this.email = this.bookingInfo.primaryParticipant?.email;
         }
+        this.applyThemeConfig(this.themeConfig);
     }
     bookingInfoChangedHandler(newValue) {
         if (newValue && newValue.primaryParticipant) {
@@ -175,6 +180,13 @@ const NylasBookingForm = class {
             this.email = newValue.primaryParticipant.email;
         }
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     changeName(name) {
         this.isNameValid = true;
         this.validationError.name = '';
@@ -235,7 +247,7 @@ const NylasBookingForm = class {
         this.updateAdditionalFields(event.detail.name, event.detail.value);
     }
     render() {
-        return (h(Host, { key: '0ea30bef8b00673240ee959d6b8baaffc7d2c715' }, h("form", { key: 'd5bf36df0f5419c98b5114719c731e8c3201bc7b', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '2a7a7cbaae2af6f3b79e23366752a421bf2304ba', class: "nylas-booking-form", part: "nbf" }, h("div", { key: '9af4ebc990cb2ef4e3e58af148eb7609b203c78a', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '31ea0d5c904a62c2c9b8d7572b448d9a28b24e86', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '95de0dabca66d11e1370b282e4d23eb545fb33a6', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '712b25028a9d12bde236ada12c9b8ee15a70c885', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
+        return (h(Host, { key: '9a442ac154e4e8ab9d8e8ec08b2005bb9bda476c' }, h("form", { key: '63feaa1eb0688e4019e1af96d48a3e71cafe2d3a', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '95f92c677613fcddd743467c30e6b097a575fa40', class: "nylas-booking-form", part: "nbf" }, h("div", { key: 'b37fc60cddc9172fbb65edaf45e77c3d999f6aa4', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '5545f58ce4fc92b0ab185087dfbeb5de6a25aca0', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '6ddd5a68d0966e1fa79998d757a47b2df8c2b6e6', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '20a13472d671c968a2f20c79992a04aca4b50f54', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
                 error: !!this.guestEmailErrors[index],
             } }, instance.t('guestEmail')), h("div", { class: "guest-email-input" }, h("input", { type: "email", id: `guest-email-${index}`, maxLength: 100, class: {
                 'guest-email': true,
@@ -262,7 +274,7 @@ const NylasBookingForm = class {
                 default:
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
             }
-        })), h("div", { key: 'f89d9ed23eca94e127aca472e8444336160a4a49', class: "cta" }, h("button-component", { key: 'e1de4364cd5d351f23499ab82bf4d444185a47cc', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '1b1a422766e53e8e1aec7d31db9c2406afec3da1', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: '68c249ef1ca7dad8b6217d86662dd195ec77b016', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: 'de2c7d09c9203409e7d92b80f6901b5099ab1163', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
+        })), h("div", { key: '9229b464ad25565982e59b7d01fe5f2204e1d10e', class: "cta" }, h("button-component", { key: '877d574a7a39f960c5cddff0f84d3d0454bfc96c', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '9436fe8276b9da6baa608695b1d0dceb03c865ae', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: '48814874005b24b2f21a8cdbd863194a563f171f', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '975aba7f10d24850113f7fcfe1e11abbb15ac401', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -298,6 +310,7 @@ __decorate([
                 debug('nylas-booking-form', 'bookingFormError', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),