npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.13 → 1.1.0-canary.14 - Mend

@nylas/web-elements 1.1.0-canary.13 → 1.1.0-canary.14

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

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":[],"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\nsp-theme {\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 @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\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 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 1rem;\n font-weight: 400;\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\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: 1rem;\n font-weight: 600;\n line-height: 1.25rem;\n text-align: justify;\n margin-bottom: 4px;\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.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 width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n}\n\nsp-button {\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-700);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n padding: 8px;\n font-family: var(--nylas-font-family);\n font-weight: 600;\n height: 48px;\n line-height: 24px;\n &.cancel {\n color: var(--nylas-error);\n &:hover,\n &:focus {\n border-color: var(--nylas-error);\n }\n &:active {\n color: var(--nylas-error-pressed);\n border-color: var(--nylas-error-pressed);\n }\n }\n &.reschedule {\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\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 } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { addMinutesToCurrentTime, debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n 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\n private handleCancelBookingButtonClicked = () => {\n const today = new Date();\n const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;\n const dateTillCancellation = addMinutesToCurrentTime(today, minCancellationNotice);\n if (today.getTime() < dateTillCancellation.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 private getOrganizer = (eventInfo: NylasEvent) => {\n const organizer = eventInfo?.organizer;\n return organizer;\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.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 },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nbec\">\n <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\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 Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n </h2>\n <div part=\"nbec__description\">\n {this.getOrganizer(this.eventInfo)?.name \|\| this.getOrganizer(this.eventInfo)?.email} & \n {this.bookingInfo?.primaryParticipant?.name \|\| this.bookingInfo?.primaryParticipant?.email}\n </div>\n </div>\n <sp-divider></sp-divider>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>Booking date and time</h3>\n <p>\n {new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n {new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n {new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\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 <sp-divider></sp-divider>\n <div class=\"footer\">\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n Cancel booking\n </sp-button>\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n Reschedule\n </sp-button>\n </div>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booked-event-card.entry.esm.js","mappings":"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","names":[],"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\nsp-theme {\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 @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\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 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 1rem;\n font-weight: 400;\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\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 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.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 width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n}\n\nsp-button {\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-700);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n padding: 8px;\n font-family: var(--nylas-font-family);\n font-weight: 600;\n height: 48px;\n line-height: 24px;\n &.cancel {\n color: var(--nylas-error);\n &:hover,\n &:focus {\n border-color: var(--nylas-error);\n }\n &:active {\n color: var(--nylas-error-pressed);\n border-color: var(--nylas-error-pressed);\n }\n }\n &.reschedule {\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\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 } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { addMinutesToCurrentTime, debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n 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\n private handleCancelBookingButtonClicked = () => {\n const today = new Date();\n const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;\n const dateTillCancellation = addMinutesToCurrentTime(today, minCancellationNotice);\n if (today.getTime() < dateTillCancellation.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 private getOrganizer = (eventInfo: NylasEvent) => {\n const organizer = eventInfo?.organizer;\n return organizer;\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.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 },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nbec\">\n <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\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 Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n </h2>\n <div part=\"nbec__description\">\n {this.getOrganizer(this.eventInfo)?.name \|\| this.getOrganizer(this.eventInfo)?.email} & \n {this.bookingInfo?.primaryParticipant?.name \|\| this.bookingInfo?.primaryParticipant?.email}\n </div>\n </div>\n <sp-divider></sp-divider>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>Booking date and time</h3>\n <p>\n {new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n {new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n {new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\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 <sp-divider></sp-divider>\n <div class=\"footer\">\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n Cancel booking\n </sp-button>\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n Reschedule\n </sp-button>\n </div>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/nylas-web-elements/nylas-booking-form.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { s as sanitizeHtml_1 } from './index-66636777.js';
 import './_commonjsHelpers-fc8d6640.js';
 import './index-04e3cd59.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:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:10px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{flex-direction:column-reverse}}sp-button{background-color:transparent;color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);--button-width:50%;font-family:var(--nylas-font-family);font-size:16px;font-weight:600;border:none;height:48px;padding:14px}@media screen and (max-width: 768px){sp-button{--button-width:100%}}sp-button:hover,sp-button:focus{background-color:var(--nylas-base-100);color:var(--nylas-primary);border-radius:var(--nylas-border-radius-2x)}sp-button:active{background-color:var(--nylas-base-200);color:var(--nylas-base-800)}sp-button.back{width:var(--button-width);background-color:transparent;color:var(--nylas-base-700);outline:1px solid var(--nylas-base-300)}sp-button.back:hover,sp-button.back:focus{outline-color:var(--nylas-primary)}sp-button.back:active{outline:2px solid var(--nylas-base-600)}sp-button.book{width:var(--button-width);background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.book:hover,sp-button.book:focus{background-color:var(--nylas-base-600)}sp-button.book:active{background-color:var(--nylas-base-800)}.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)}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}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].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].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}";
+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:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:10px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{flex-direction:column-reverse}}sp-button{background-color:transparent;color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);--button-width:50%;font-family:var(--nylas-font-family);font-size:16px;font-weight:600;border:none;height:48px;padding:14px}@media screen and (max-width: 768px){sp-button{--button-width:100%}}sp-button:hover,sp-button:focus{background-color:var(--nylas-base-100);color:var(--nylas-primary);border-radius:var(--nylas-border-radius-2x)}sp-button:active{background-color:var(--nylas-base-200);color:var(--nylas-base-800)}sp-button.back{width:var(--button-width);background-color:transparent;color:var(--nylas-base-700);outline:1px solid var(--nylas-base-300)}sp-button.back:hover,sp-button.back:focus{outline-color:var(--nylas-primary)}sp-button.back:active{outline:2px solid var(--nylas-base-600)}sp-button.book{width:var(--button-width);background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.book:hover,sp-button.book:focus{background-color:var(--nylas-base-600)}sp-button.book:active{background-color:var(--nylas-base-800)}.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}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].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}";
 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;

package/dist/nylas-web-elements/nylas-booking-form.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booking-form.entry.esm.js","mappings":"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","names":["sanitizeHtml"],"sources":["src/components/scheduler/nylas-booking-form/nylas-booking-form.scss?tag=nylas-booking-form&encapsulation=shadow","src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"sourcesContent":["@import '../../../common/mixins/inputs.scss';\n@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: 100%;\n @include default-css-variables;\n}\n\n.nylas-booking-form {\n width: 100%;\n padding: 1.5rem;\n box-sizing: border-box;\n height: 450px;\n overflow-y: auto;\n height: 100%;\n}\n\nform {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n}\n\nsp-textfield {\n --spectrum-corner-radius-100: var(--nylas-border-radius-2x); // Set guest input radius\n --spectrum-textfield-border-color: var(--nylas-base-300);\n position: relative;\n width: 100%;\n height: 48px;\n margin-bottom: 16px;\n color: var(--nylas-base-500);\n}\n\n.cta {\n width: 100%;\n display: flex;\n flex-direction: row;\n @media #{$mobile} {\n flex-direction: column-reverse;\n }\n align-items: flex-start;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 10px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}\n\nsp-button {\n background-color: transparent;\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n --button-width: 50%;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n font-weight: 600;\n border: none;\n height: 48px;\n padding: 14px;\n @media #{$mobile} {\n --button-width: 100%;\n }\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n color: var(--nylas-primary);\n border-radius: var(--nylas-border-radius-2x);\n }\n &:active {\n background-color: var(--nylas-base-200);\n color: var(--nylas-base-800);\n }\n\n &.back {\n width: var(--button-width);\n background-color: transparent;\n color: var(--nylas-base-700);\n outline: 1px solid var(--nylas-base-300);\n &:hover,\n &:focus {\n outline-color: var(--nylas-primary);\n }\n &:active {\n outline: 2px solid var(--nylas-base-600);\n }\n }\n\n &.book {\n width: var(--button-width);\n background-color: var(--nylas-primary);\n color: var(--nylas-base-0);\n &:hover,\n &:focus {\n background-color: var(--nylas-base-600);\n }\n &:active {\n background-color: var(--nylas-base-800);\n }\n }\n}\n\n.input-wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 1rem;\n input::placeholder {\n color: var(--nylas-base-300);\n }\n label,\n input {\n font-family: var(--nylas-font-family);\n }\n .help-text {\n margin: 0;\n color: var(--nylas-error);\n }\n}\n\n.button-wrapper {\n width: 100%;\n align-items: flex-start;\n height: max-content;\n position: relative;\n}\n\nsp-infield-button {\n --spectrum-infield-button-background-color: transparent;\n --spectrum-infield-button-background-color-hover: transparent;\n --spectrum-infield-button-background-color-active: transparent;\n --spectrum-infield-button-border-color: transparent;\n --spectrum-infield-button-border-width: 1px;\n --spectrum-infield-button-border-radius: 0;\n color: var(--nylas-base-600);\n background: transparent;\n border: none;\n outline: 1px solid var(--nylas-base-300);\n border-radius: 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;\n height: 52px;\n width: 52px;\n display: flex;\n position: absolute;\n right: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n sp-icon-cross300 {\n color: var(--nylas-base-600);\n }\n &.error {\n border-width: 2px;\n border-color: var(--nylas-error);\n }\n}\n\ninput[type='text'],\ninput[type='email'] {\n @include textfield;\n &.guest-email {\n color: var(--nylas-base-900);\n padding-right: 52px; // Infield button width\n }\n}\n\nlabel {\n @include input-label;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '../../..';\nimport type { NylasEvent, NylasSchedulerBookingData } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst emailRegex = /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/;\n\n/*\n The `nylas-booking-form` component is a UI component that allows users to book an event.\n \n The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-label - The input label.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button for adding guests.\n * @part nbf__button-primary - The primary button for booking.\n * @part nbf__button-outline - The outline button for canceling.\n * @slot custom-booking-form - The custom booking form.\n /\n@Component({\n tag: 'nylas-booking-form',\n styleUrl: 'nylas-booking-form.scss',\n shadow: true,\n})\nexport class NylasBookingForm {\n /\n The host element\n /\n @Element() readonly host!: HTMLElement;\n\n /\n The loading state.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n The booking info.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n The booked event (Used to track if a booking is created in an eventOverride).\n /\n @Prop() readonly eventInfo?: NylasEvent;\n\n /\n This event is fired when the name is changed.\n /\n @Event() nameChanged!: EventEmitter<string>;\n\n /\n This event is fired when the email is changed.\n /\n @Event() emailChanged!: EventEmitter<string>;\n\n /\n This event is fired when the cancel button is clicked.\n /\n @Event() backButtonClicked!: EventEmitter<boolean>;\n\n /\n This event is fired when the book button is clicked.\n /\n @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingData>;\n\n /\n This event is fired when an error occurs in the booking form.\n /\n @Event() bookingFormError!: EventEmitter<Partial<Notification>>;\n\n /\n The name of the user.\n /\n @State() name: string = '';\n\n /\n The email address of the user.\n /\n @State() email: string = '';\n\n /\n The guests of the user.\n /\n @State() guestEmails: string[] = [];\n\n /\n Guest email input errors.\n /\n @State() guestEmailErrors: { [key: number]: string } = {};\n\n /\n State to check if name is valid.\n /\n @State() isNameValid: boolean = true;\n\n /\n State to check if email is valid.\n /\n @State() isEmailValid: boolean = true;\n\n /\n Error message state.\n /\n @State() validationError: { name: string; email: string } = { name: '', email: '' };\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {\n debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n if (this.bookingInfo) {\n this.name = this.bookingInfo.primaryParticipant?.name;\n this.email = this.bookingInfo.primaryParticipant?.email;\n }\n }\n\n @Watch('bookingInfo')\n bookingInfoChangedHandler(newValue: NylasSchedulerBookingData \| undefined) {\n if (newValue && newValue.primaryParticipant) {\n this.name = newValue.primaryParticipant.name;\n this.email = newValue.primaryParticipant.email;\n }\n }\n\n /\n Change the name.\n * @param name The name to select.\n /\n changeName(name: string) {\n // Reset the validation error\n this.isNameValid = true;\n this.validationError.name = '';\n\n this.name = sanitizeHtml(name);\n this.nameChanged.emit(name);\n }\n\n /\n Change the email.\n * @param email The email to select.\n /\n changeEmail(email: string) {\n // Reset the validation error\n this.isEmailValid = true;\n this.validationError.email = '';\n\n this.email = sanitizeHtml(email);\n this.emailChanged.emit(email);\n }\n\n resetGuestEmailError(guestIndex: number) {\n const errors = { ...this.guestEmailErrors };\n delete errors[guestIndex];\n this.guestEmailErrors = { ...errors };\n }\n\n /\n Handle guest emails changed.\n /\n handleGuestChange = (guestIndex: number, email: string) => {\n // Reset the validation error\n this.resetGuestEmailError(guestIndex);\n const guests = [...this.guestEmails];\n guests[guestIndex] = sanitizeHtml(email);\n this.guestEmails = [...guests];\n };\n\n /\n Handle guest input blur.\n /\n handleGuestBlur = (guestIndex: number, email: string) => {\n this.resetGuestEmailError(guestIndex);\n\n if (email === '') {\n this.guestEmailErrors[guestIndex] = 'Email is required';\n return;\n }\n if (!emailRegex.test(email)) {\n this.guestEmailErrors[guestIndex] = 'Enter a valid email address';\n return;\n }\n this.handleGuestChange(guestIndex, email);\n };\n\n /\n Handle add guest button clicked.\n /\n addGuestButtonClickedHandler = () => {\n this.guestEmails = [...this.guestEmails, ''];\n };\n\n /\n Handle remove guest button clicked.\n /\n removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n e.preventDefault();\n this.resetGuestEmailError(guestIndex);\n\n const guests = [...this.guestEmails];\n guests.splice(guestIndex, 1);\n this.guestEmails = [...guests];\n };\n\n /\n Handle back button clicked.\n /\n handleBackButtonClicked = () => {\n this.backButtonClicked.emit();\n };\n\n /\n \n * Handle book button clicked.\n /\n bookButtonClickedHandler = async (e: Event) => {\n e.preventDefault();\n debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);\n const name = this.name \|\| this.bookingInfo?.primaryParticipant?.name;\n const email = this.email \|\| this.bookingInfo?.primaryParticipant?.email;\n\n if (!name \|\| name === '') {\n this.isNameValid = false;\n this.validationError.name = 'Name is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Name is required',\n });\n return;\n }\n if (!email \|\| email === '') {\n this.isEmailValid = false;\n this.validationError.email = 'Email is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Email is required',\n });\n return;\n }\n if (!emailRegex.test(email)) {\n this.isEmailValid = false;\n this.validationError.email = 'Enter a valid email address';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Invalid email',\n });\n return;\n }\n\n let guests: NylasSchedulerBookingParticipant[] = [];\n if (this.guestEmails.length > 0) {\n let hasError = false;\n this.guestEmails.forEach((email: string, i: number) => {\n if (email === '') {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Email is required' };\n } else if (!emailRegex.test(email)) {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Enter a valid email address' };\n }\n });\n if (hasError) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Invalid guest email',\n });\n return;\n }\n guests = this.guestEmails.map((email: string) => ({ name: '', email: email.trim() }));\n } else if (this.bookingInfo?.guests) {\n guests = this.bookingInfo?.guests;\n }\n\n this.detailsConfirmed.emit({\n primaryParticipant: {\n name: name,\n email: email,\n },\n guests: guests,\n additionalFields: {\n ...this.bookingInfo?.additionalFields,\n },\n });\n };\n\n @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booking-form',\n stateToProps: new Map([\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.eventInfo', 'eventInfo'],\n ]),\n eventToProps: {\n backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n },\n nameChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantName(event.detail);\n },\n emailChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <form onSubmit={e => this.bookButtonClickedHandler(e)} noValidate>\n <div class=\"nylas-booking-form\">\n <slot name=\"custom-booking-form\">\n <div class=\"input-wrapper\">\n <label htmlFor=\"name\" class={{ 'input-label': true, 'error': !this.isNameValid }} part=\"nbf__input-label\">\n Name <span class=\"required\"></span>\n </label>\n <input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter your name\"\n value={this.name}\n class={{\n input: true,\n error: !this.isNameValid,\n }}\n maxLength={100}\n part=\"nbf__input-textfield\"\n onInput={(e: Event) => this.changeName((e.target as HTMLInputElement)?.value)}\n ></input>\n <p class=\"help-text\">{this.validationError.name}</p>\n </div>\n <div class=\"input-wrapper\">\n <label htmlFor=\"email\" class={{ 'input-label': true, 'error': !this.isEmailValid }} part=\"nbf__input-label\">\n Email <span class=\"required\"></span>\n </label>\n <input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n value={this.email}\n maxLength={100}\n class={{\n input: true,\n error: !this.isEmailValid,\n }}\n part=\"nbf__input-textfield\"\n onInput={(e: Event) => this.changeEmail((e.target as HTMLInputElement)?.value)}\n ></input>\n <p class=\"help-text\">{this.validationError.email}</p>\n </div>\n {/ <div class=\"input-wrapper\">\n <sp-button class=\"add-guest\" variant=\"primary\" part=\"nbf__button-ghost\" onClick={this.addGuestButtonClickedHandler}>\n <add-circle-icon slot=\"icon\"></add-circle-icon>\n Add guest\n </sp-button>\n {this.guestEmails.map((email, index) => (\n <div class=\"input-wrapper button-wrapper\">\n <input\n type=\"email\"\n id={`guest-email-${index}`}\n maxLength={100}\n class={{\n 'guest-email': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n placeholder=\"Enter guest email\"\n value={email}\n data-index={index}\n part=\"nbf__input-textfield\"\n onBlur={(e: Event) => this.handleGuestBlur(index, (e.target as HTMLInputElement)?.value)}\n onInput={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n ></input>\n <sp-infield-button\n size=\"s\"\n class={{\n 'remove-guest': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n treatment=\"outline\"\n inline=\"end\"\n onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}\n >\n <sp-icon-cross300 size=\"s\"></sp-icon-cross300>\n </sp-infield-button>\n <p class=\"help-text\">{this.guestEmailErrors[index]}</p>\n </div>\n ))}\n </div> */}\n </slot>\n </div>\n <div class=\"cta\">\n <sp-button treatment=\"outline\" variant=\"secondary\" class={'back'} part=\"nbf__button-outline\" onClick={this.handleBackButtonClicked}>\n <slot name=\"booking-form-back-label\">Back</slot>\n </sp-button>\n <sp-button variant=\"primary\" class={'book'} part=\"nbf__button-primary\" type=\"submit\">\n {this.isLoading && <loading-icon slot=\"icon\"></loading-icon>}\n <slot name=\"booking-form-book-label\">Book now</slot>\n </sp-button>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booking-form.entry.esm.js","mappings":"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","names":["sanitizeHtml"],"sources":["src/components/scheduler/nylas-booking-form/nylas-booking-form.scss?tag=nylas-booking-form&encapsulation=shadow","src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"sourcesContent":["@import '../../../common/mixins/inputs.scss';\n@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: 100%;\n @include default-css-variables;\n}\n\n.nylas-booking-form {\n width: 100%;\n padding: 1.5rem;\n box-sizing: border-box;\n height: 450px;\n overflow-y: auto;\n height: 100%;\n}\n\nform {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n}\n\nsp-textfield {\n --spectrum-corner-radius-100: var(--nylas-border-radius-2x); // Set guest input radius\n --spectrum-textfield-border-color: var(--nylas-base-300);\n position: relative;\n width: 100%;\n height: 48px;\n margin-bottom: 16px;\n color: var(--nylas-base-500);\n}\n\n.cta {\n width: 100%;\n display: flex;\n flex-direction: row;\n @media #{$mobile} {\n flex-direction: column-reverse;\n }\n align-items: flex-start;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 10px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}\n\nsp-button {\n background-color: transparent;\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n --button-width: 50%;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n font-weight: 600;\n border: none;\n height: 48px;\n padding: 14px;\n @media #{$mobile} {\n --button-width: 100%;\n }\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n color: var(--nylas-primary);\n border-radius: var(--nylas-border-radius-2x);\n }\n &:active {\n background-color: var(--nylas-base-200);\n color: var(--nylas-base-800);\n }\n\n &.back {\n width: var(--button-width);\n background-color: transparent;\n color: var(--nylas-base-700);\n outline: 1px solid var(--nylas-base-300);\n &:hover,\n &:focus {\n outline-color: var(--nylas-primary);\n }\n &:active {\n outline: 2px solid var(--nylas-base-600);\n }\n }\n\n &.book {\n width: var(--button-width);\n background-color: var(--nylas-primary);\n color: var(--nylas-base-0);\n &:hover,\n &:focus {\n background-color: var(--nylas-base-600);\n }\n &:active {\n background-color: var(--nylas-base-800);\n }\n }\n}\n\n.input-wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 1rem;\n input::placeholder {\n color: var(--nylas-base-300);\n }\n label,\n input {\n font-family: var(--nylas-font-family);\n font-size: 16px;\n }\n .help-text {\n margin: 0;\n color: var(--nylas-error);\n }\n}\n\n.button-wrapper {\n width: 100%;\n align-items: flex-start;\n height: max-content;\n position: relative;\n}\n\nsp-infield-button {\n --spectrum-infield-button-background-color: transparent;\n --spectrum-infield-button-background-color-hover: transparent;\n --spectrum-infield-button-background-color-active: transparent;\n --spectrum-infield-button-border-color: transparent;\n --spectrum-infield-button-border-width: 1px;\n --spectrum-infield-button-border-radius: 0;\n color: var(--nylas-base-600);\n background: transparent;\n border: none;\n outline: 1px solid var(--nylas-base-300);\n border-radius: 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;\n height: 52px;\n width: 52px;\n display: flex;\n position: absolute;\n right: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n sp-icon-cross300 {\n color: var(--nylas-base-600);\n }\n &.error {\n border-width: 2px;\n border-color: var(--nylas-error);\n }\n}\n\ninput[type='text'],\ninput[type='email'] {\n @include textfield;\n &.guest-email {\n color: var(--nylas-base-900);\n padding-right: 52px; // Infield button width\n }\n}\n\nlabel {\n @include input-label;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '../../..';\nimport type { NylasEvent, NylasSchedulerBookingData } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst emailRegex = /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/;\n\n/*\n The `nylas-booking-form` component is a UI component that allows users to book an event.\n \n The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-label - The input label.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button for adding guests.\n * @part nbf__button-primary - The primary button for booking.\n * @part nbf__button-outline - The outline button for canceling.\n * @slot custom-booking-form - The custom booking form.\n /\n@Component({\n tag: 'nylas-booking-form',\n styleUrl: 'nylas-booking-form.scss',\n shadow: true,\n})\nexport class NylasBookingForm {\n /\n The host element\n /\n @Element() readonly host!: HTMLElement;\n\n /\n The loading state.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n The booking info.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n The booked event (Used to track if a booking is created in an eventOverride).\n /\n @Prop() readonly eventInfo?: NylasEvent;\n\n /\n This event is fired when the name is changed.\n /\n @Event() nameChanged!: EventEmitter<string>;\n\n /\n This event is fired when the email is changed.\n /\n @Event() emailChanged!: EventEmitter<string>;\n\n /\n This event is fired when the cancel button is clicked.\n /\n @Event() backButtonClicked!: EventEmitter<boolean>;\n\n /\n This event is fired when the book button is clicked.\n /\n @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingData>;\n\n /\n This event is fired when an error occurs in the booking form.\n /\n @Event() bookingFormError!: EventEmitter<Partial<Notification>>;\n\n /\n The name of the user.\n /\n @State() name: string = '';\n\n /\n The email address of the user.\n /\n @State() email: string = '';\n\n /\n The guests of the user.\n /\n @State() guestEmails: string[] = [];\n\n /\n Guest email input errors.\n /\n @State() guestEmailErrors: { [key: number]: string } = {};\n\n /\n State to check if name is valid.\n /\n @State() isNameValid: boolean = true;\n\n /\n State to check if email is valid.\n /\n @State() isEmailValid: boolean = true;\n\n /\n Error message state.\n /\n @State() validationError: { name: string; email: string } = { name: '', email: '' };\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {\n debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n if (this.bookingInfo) {\n this.name = this.bookingInfo.primaryParticipant?.name;\n this.email = this.bookingInfo.primaryParticipant?.email;\n }\n }\n\n @Watch('bookingInfo')\n bookingInfoChangedHandler(newValue: NylasSchedulerBookingData \| undefined) {\n if (newValue && newValue.primaryParticipant) {\n this.name = newValue.primaryParticipant.name;\n this.email = newValue.primaryParticipant.email;\n }\n }\n\n /\n Change the name.\n * @param name The name to select.\n /\n changeName(name: string) {\n // Reset the validation error\n this.isNameValid = true;\n this.validationError.name = '';\n\n this.name = sanitizeHtml(name);\n this.nameChanged.emit(name);\n }\n\n /\n Change the email.\n * @param email The email to select.\n /\n changeEmail(email: string) {\n // Reset the validation error\n this.isEmailValid = true;\n this.validationError.email = '';\n\n this.email = sanitizeHtml(email);\n this.emailChanged.emit(email);\n }\n\n resetGuestEmailError(guestIndex: number) {\n const errors = { ...this.guestEmailErrors };\n delete errors[guestIndex];\n this.guestEmailErrors = { ...errors };\n }\n\n /\n Handle guest emails changed.\n /\n handleGuestChange = (guestIndex: number, email: string) => {\n // Reset the validation error\n this.resetGuestEmailError(guestIndex);\n const guests = [...this.guestEmails];\n guests[guestIndex] = sanitizeHtml(email);\n this.guestEmails = [...guests];\n };\n\n /\n Handle guest input blur.\n /\n handleGuestBlur = (guestIndex: number, email: string) => {\n this.resetGuestEmailError(guestIndex);\n\n if (email === '') {\n this.guestEmailErrors[guestIndex] = 'Email is required';\n return;\n }\n if (!emailRegex.test(email)) {\n this.guestEmailErrors[guestIndex] = 'Enter a valid email address';\n return;\n }\n this.handleGuestChange(guestIndex, email);\n };\n\n /\n Handle add guest button clicked.\n /\n addGuestButtonClickedHandler = () => {\n this.guestEmails = [...this.guestEmails, ''];\n };\n\n /\n Handle remove guest button clicked.\n /\n removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n e.preventDefault();\n this.resetGuestEmailError(guestIndex);\n\n const guests = [...this.guestEmails];\n guests.splice(guestIndex, 1);\n this.guestEmails = [...guests];\n };\n\n /\n Handle back button clicked.\n /\n handleBackButtonClicked = () => {\n this.backButtonClicked.emit();\n };\n\n /\n \n * Handle book button clicked.\n /\n bookButtonClickedHandler = async (e: Event) => {\n e.preventDefault();\n debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);\n const name = this.name \|\| this.bookingInfo?.primaryParticipant?.name;\n const email = this.email \|\| this.bookingInfo?.primaryParticipant?.email;\n\n if (!name \|\| name === '') {\n this.isNameValid = false;\n this.validationError.name = 'Name is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Name is required',\n });\n return;\n }\n if (!email \|\| email === '') {\n this.isEmailValid = false;\n this.validationError.email = 'Email is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Email is required',\n });\n return;\n }\n if (!emailRegex.test(email)) {\n this.isEmailValid = false;\n this.validationError.email = 'Enter a valid email address';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Invalid email',\n });\n return;\n }\n\n let guests: NylasSchedulerBookingParticipant[] = [];\n if (this.guestEmails.length > 0) {\n let hasError = false;\n this.guestEmails.forEach((email: string, i: number) => {\n if (email === '') {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Email is required' };\n } else if (!emailRegex.test(email)) {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Enter a valid email address' };\n }\n });\n if (hasError) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Invalid guest email',\n });\n return;\n }\n guests = this.guestEmails.map((email: string) => ({ name: '', email: email.trim() }));\n } else if (this.bookingInfo?.guests) {\n guests = this.bookingInfo?.guests;\n }\n\n this.detailsConfirmed.emit({\n primaryParticipant: {\n name: name,\n email: email,\n },\n guests: guests,\n additionalFields: {\n ...this.bookingInfo?.additionalFields,\n },\n });\n };\n\n @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booking-form',\n stateToProps: new Map([\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.eventInfo', 'eventInfo'],\n ]),\n eventToProps: {\n backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n },\n nameChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantName(event.detail);\n },\n emailChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <form onSubmit={e => this.bookButtonClickedHandler(e)} noValidate>\n <div class=\"nylas-booking-form\">\n <slot name=\"custom-booking-form\">\n <div class=\"input-wrapper\">\n <label htmlFor=\"name\" class={{ 'input-label': true, 'error': !this.isNameValid }} part=\"nbf__input-label\">\n Name <span class=\"required\"></span>\n </label>\n <input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter your name\"\n value={this.name}\n class={{\n input: true,\n error: !this.isNameValid,\n }}\n maxLength={100}\n part=\"nbf__input-textfield\"\n onInput={(e: Event) => this.changeName((e.target as HTMLInputElement)?.value)}\n ></input>\n <p class=\"help-text\">{this.validationError.name}</p>\n </div>\n <div class=\"input-wrapper\">\n <label htmlFor=\"email\" class={{ 'input-label': true, 'error': !this.isEmailValid }} part=\"nbf__input-label\">\n Email <span class=\"required\"></span>\n </label>\n <input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n value={this.email}\n maxLength={100}\n class={{\n input: true,\n error: !this.isEmailValid,\n }}\n part=\"nbf__input-textfield\"\n onInput={(e: Event) => this.changeEmail((e.target as HTMLInputElement)?.value)}\n ></input>\n <p class=\"help-text\">{this.validationError.email}</p>\n </div>\n {/ <div class=\"input-wrapper\">\n <sp-button class=\"add-guest\" variant=\"primary\" part=\"nbf__button-ghost\" onClick={this.addGuestButtonClickedHandler}>\n <add-circle-icon slot=\"icon\"></add-circle-icon>\n Add guest\n </sp-button>\n {this.guestEmails.map((email, index) => (\n <div class=\"input-wrapper button-wrapper\">\n <input\n type=\"email\"\n id={`guest-email-${index}`}\n maxLength={100}\n class={{\n 'guest-email': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n placeholder=\"Enter guest email\"\n value={email}\n data-index={index}\n part=\"nbf__input-textfield\"\n onBlur={(e: Event) => this.handleGuestBlur(index, (e.target as HTMLInputElement)?.value)}\n onInput={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n ></input>\n <sp-infield-button\n size=\"s\"\n class={{\n 'remove-guest': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n treatment=\"outline\"\n inline=\"end\"\n onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}\n >\n <sp-icon-cross300 size=\"s\"></sp-icon-cross300>\n </sp-infield-button>\n <p class=\"help-text\">{this.guestEmailErrors[index]}</p>\n </div>\n ))}\n </div> */}\n </slot>\n </div>\n <div class=\"cta\">\n <sp-button treatment=\"outline\" variant=\"secondary\" class={'back'} part=\"nbf__button-outline\" onClick={this.handleBackButtonClicked}>\n <slot name=\"booking-form-back-label\">Back</slot>\n </sp-button>\n <sp-button variant=\"primary\" class={'book'} part=\"nbf__button-primary\" type=\"submit\">\n {this.isLoading && <loading-icon slot=\"icon\"></loading-icon>}\n <slot name=\"booking-form-book-label\">Book now</slot>\n </sp-button>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js CHANGED Viewed

@@ -66,7 +66,7 @@ const NylasCancelBookingForm = class {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: 'b1807e47c789883c24894d78997b706e75c4ceb1', part: "ncec" }, h("sp-theme", { key: 'ee1efb2527806b2ac84331ceae3f9883aa6368f4', theme: "spectrum", scale: "medium" }, h("div", { key: '96f6b3424cdad58db6e8eb674e2b08b634ce42ef', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: 'cda2f57ff29f321a065aa12945db52b909d26120', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '7a5726c0b062c82c2348e3d3f646d20b16f25f69' })), h("h3", { key: 'd6eb5c9ca294308d6044ca4883974daab89e796c', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '731ff9897a7b7bc7ab142590d782465e4b7c0246', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: 'efaa6d04137eb43e471f5df9c1673f0d4b3a664b', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'f98b808d7431cb69579acd95a29113215256bee2', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: 'e5d01b2fe4dc4cf4323ed2000b96aed70feffbf2', class: "required" }, "*")), h("sp-textfield", { key: 'd0dd574a5929cca67afca1363f789e2c871ddc6f', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: '781d6ebc2104595939ee23254e127b1bfae4540a', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'ba9c37dc52597cfb5c338e56dca2ec13871dd99d', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'f748b5c67c2a42c19f95a80fbd829b8ba4c4ad36', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
+        return (h(Host, { key: '1adb9feda638c4d8d8a1d8393a7cf9a91b8bc670', part: "ncec" }, h("sp-theme", { key: 'dda572233ab6b2816594ca6f7cd2ea2199a34394', theme: "spectrum", scale: "medium" }, h("div", { key: '2e54734b0763bc127a7b8e2acaba77cb91e6217c', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '79300b5640e3f6e1602cbdc26c598e3aab403721', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '1e57e7c3d0154929da6c318215f99349696a0f42' })), h("h3", { key: '7df6fe8acbe6cfa030305555fed0307d0b3c7150', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '80a3b525b440d81470bd9279a9e81da53db5823d', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: 'a0bd33531db46816774c1cf5802e5b0a03046436', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: '2d4896e6c61f464a5914a6c854075542aeeb637e', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: 'c867adf9311edef27d535e525faf7e776d7edb1f', class: "required" }, "*")), h("sp-textfield", { key: '96d9a97dced583946423e07f561964fd6e5a1f85', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: '771bc7ae47ba5635d5707e5840bf4ebb13cdd60c', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: '07bc558de2f6464c043ff86af24da036c0848f96', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'f33976367a2e023a442b9477ad0cbc9d4e520055', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
     }
 };
 __decorate([
@@ -74,7 +74,7 @@ __decorate([
         name: 'nylas-cancel-booking-form',
         eventToProps: {
             cancelBookingFormSubmitted: async (event, nylasSchedulerConnector) => {
-                const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId);
+                const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId, event.detail.reason);
                 const { errorHandler } = event.detail;
                 if (errorHandler && (!result || 'error' in result)) {
                     errorHandler(result);

package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-cancel-booking-form.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.scss?tag=nylas-cancel-booking-form&encapsulation=shadow","src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n width: 400px;\n @include default-css-variables;\n}\n\nsp-theme {\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.nylas-cancel-booking-form {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1.5rem;\n position: relative;\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.nylas-cancel-booking-form__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 0;\n color: var(--nylas-base-900);\n}\n\n.nylas-cancel-booking-form__description {\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 140%;\n color: var(--nylas-base-600);\n}\n\n.nylas-cancel-booking-form__calendar-icon {\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}\n\ncalendar-cancel-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nsp-button {\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-700);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n font-weight: 600;\n width: 100%;\n height: 48px;\n padding: 8px;\n line-height: 24px;\n font-family: var(--nylas-font-family);\n &.cancel {\n margin-top: 1.25rem;\n background-color: var(--nylas-primary);\n color: var(--nylas-base-0);\n &:hover,\n &:focus {\n background-color: var(--nylas-base-600);\n }\n &:active {\n background-color: var(--nylas-base-800);\n }\n }\n &.back {\n margin-top: 0.5rem;\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\n }\n}\n\nsp-field-label {\n margin-top: 1rem;\n display: flex;\n color: var(--nylas-base-800);\n font-size: 14px;\n &.error {\n color: var(--nylas-error);\n }\n span.required {\n color: var(--nylas-error);\n }\n}\nsp-textfield {\n --spectrum-textfield-border-color: var(--nylas-base-300);\n --spectrum-textfield-icon-color-invalid: var(--nylas-error);\n position: relative;\n width: 100%;\n height: 48px;\n margin-bottom: 16px;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-500);\n &.error {\n --spectrum-textfield-border-color: var(--nylas-error);\n }\n}\n\nsp-help-text {\n margin: 0.25rem 0 1rem 0;\n color: var(--nylas-error);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse } from '@nylas/core';\n\n/*\n The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking.\n /\n@Component({\n tag: 'nylas-cancel-booking-form',\n styleUrl: 'nylas-cancel-booking-form.scss',\n shadow: true,\n})\nexport class NylasCancelBookingForm {\n /\n The booking ID to cancel.\n /\n @Prop() readonly cancelBookingId!: string;\n\n /\n This event is fired when the Go back button is clicked on the cancel booking form.\n /\n @Event() readonly goBackButtonClicked!: EventEmitter<void>;\n\n /\n This event is fired when the cancel booking form is submitted.\n /\n @Event() readonly cancelBookingFormSubmitted!: EventEmitter<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs in the booking form.\n /\n @Event() cancelBookingFormError!: EventEmitter<Partial<Notification>>;\n\n /\n The reason for cancellation.\n /\n @State() cancellationReason: string = '';\n\n @State() cancellationError: string = '';\n\n connectedCallback() {\n debug(`[nylas-cancel-booking-form] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancel-booking-form] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancel-booking-form] Component did load`);\n if (!this.cancelBookingId) {\n console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n }\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancel-booking-form] Component disconnected`);\n }\n\n private handleGoBackClicked = () => {\n this.goBackButtonClicked.emit();\n };\n\n private handleSubmitCancelBooking = (event: Event) => {\n event.preventDefault();\n if (!this.cancellationReason) {\n this.cancellationError = 'Please provide a reason for cancellation.';\n this.cancelBookingFormError.emit({ title: 'Cancel booking form error', description: 'Please provide a reason for cancellation.' });\n return;\n }\n\n debug(`[nylas-cancel-booking-form] Cancel booking form submitted with reason: ${this.cancellationReason}`);\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.cancelBookedEventError.emit(error);\n };\n this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, reason: this.cancellationReason, errorHandler });\n };\n\n private handleOnChangeCancellationReason = (event: Event) => {\n this.cancellationError = '';\n this.cancellationReason = (event.target as HTMLInputElement).value;\n };\n\n @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancel-booking-form',\n eventToProps: {\n cancelBookingFormSubmitted: async (\n event: CustomEvent<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\n <sp-theme theme=\"spectrum\" scale=\"medium\">\n <div class=\"nylas-cancel-booking-form\" part=\"ncec__card\">\n <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncec__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncec__title\">\n Cancel booking?\n </h3>\n <div class=\"nylas-cancel-booking-form__description\" part=\"ncec__description\">\n Your current timeslot will become available to others.\n </div>\n <form onSubmit={this.handleSubmitCancelBooking}>\n <sp-field-label for=\"cancel-reason\" class={this.cancellationError ? 'error' : ''}>\n Reason for cancellation <span class=\"required\"></span>\n </sp-field-label>\n <sp-textfield\n id=\"cancel-reason\"\n class={this.cancellationError ? 'error' : ''}\n part=\"ncec__reason-textarea\"\n multiline\n value={this.cancellationReason}\n onInput={this.handleOnChangeCancellationReason}\n onFocus={this.handleOnChangeCancellationReason}\n invalid={!!this.cancellationError}\n >\n <sp-help-text slot=\"negative-help-text\">{this.cancellationError}</sp-help-text>\n </sp-textfield>\n <sp-button variant=\"primary\" class=\"cancel\" type=\"submit\" part=\"ncec__button-cta\">\n Cancel booking\n </sp-button>\n <sp-button variant=\"secondary\" class=\"back\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleGoBackClicked}>\n Go back\n </sp-button>\n </form>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-cancel-booking-form.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.scss?tag=nylas-cancel-booking-form&encapsulation=shadow","src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n width: 400px;\n @include default-css-variables;\n}\n\nsp-theme {\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.nylas-cancel-booking-form {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1.5rem;\n position: relative;\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.nylas-cancel-booking-form__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 0;\n color: var(--nylas-base-900);\n}\n\n.nylas-cancel-booking-form__description {\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 140%;\n color: var(--nylas-base-600);\n}\n\n.nylas-cancel-booking-form__calendar-icon {\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}\n\ncalendar-cancel-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nsp-button {\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-700);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n font-weight: 600;\n width: 100%;\n height: 48px;\n padding: 8px;\n line-height: 24px;\n font-family: var(--nylas-font-family);\n &.cancel {\n margin-top: 1.25rem;\n background-color: var(--nylas-primary);\n color: var(--nylas-base-0);\n &:hover,\n &:focus {\n background-color: var(--nylas-base-600);\n }\n &:active {\n background-color: var(--nylas-base-800);\n }\n }\n &.back {\n margin-top: 0.5rem;\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\n }\n}\n\nsp-field-label {\n margin-top: 1rem;\n display: flex;\n color: var(--nylas-base-800);\n font-size: 14px;\n &.error {\n color: var(--nylas-error);\n }\n span.required {\n color: var(--nylas-error);\n }\n}\nsp-textfield {\n --spectrum-textfield-border-color: var(--nylas-base-300);\n --spectrum-textfield-icon-color-invalid: var(--nylas-error);\n position: relative;\n width: 100%;\n height: 48px;\n margin-bottom: 16px;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-500);\n &.error {\n --spectrum-textfield-border-color: var(--nylas-error);\n }\n}\n\nsp-help-text {\n margin: 0.25rem 0 1rem 0;\n color: var(--nylas-error);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse } from '@nylas/core';\n\n/*\n The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking.\n /\n@Component({\n tag: 'nylas-cancel-booking-form',\n styleUrl: 'nylas-cancel-booking-form.scss',\n shadow: true,\n})\nexport class NylasCancelBookingForm {\n /\n The booking ID to cancel.\n /\n @Prop() readonly cancelBookingId!: string;\n\n /\n This event is fired when the Go back button is clicked on the cancel booking form.\n /\n @Event() readonly goBackButtonClicked!: EventEmitter<void>;\n\n /\n This event is fired when the cancel booking form is submitted.\n /\n @Event() readonly cancelBookingFormSubmitted!: EventEmitter<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs in the booking form.\n /\n @Event() cancelBookingFormError!: EventEmitter<Partial<Notification>>;\n\n /\n The reason for cancellation.\n /\n @State() cancellationReason: string = '';\n\n @State() cancellationError: string = '';\n\n connectedCallback() {\n debug(`[nylas-cancel-booking-form] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancel-booking-form] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancel-booking-form] Component did load`);\n if (!this.cancelBookingId) {\n console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n }\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancel-booking-form] Component disconnected`);\n }\n\n private handleGoBackClicked = () => {\n this.goBackButtonClicked.emit();\n };\n\n private handleSubmitCancelBooking = (event: Event) => {\n event.preventDefault();\n if (!this.cancellationReason) {\n this.cancellationError = 'Please provide a reason for cancellation.';\n this.cancelBookingFormError.emit({ title: 'Cancel booking form error', description: 'Please provide a reason for cancellation.' });\n return;\n }\n\n debug(`[nylas-cancel-booking-form] Cancel booking form submitted with reason: ${this.cancellationReason}`);\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.cancelBookedEventError.emit(error);\n };\n this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, reason: this.cancellationReason, errorHandler });\n };\n\n private handleOnChangeCancellationReason = (event: Event) => {\n this.cancellationError = '';\n this.cancellationReason = (event.target as HTMLInputElement).value;\n };\n\n @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancel-booking-form',\n eventToProps: {\n cancelBookingFormSubmitted: async (\n event: CustomEvent<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId, event.detail.reason);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\n <sp-theme theme=\"spectrum\" scale=\"medium\">\n <div class=\"nylas-cancel-booking-form\" part=\"ncec__card\">\n <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncec__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncec__title\">\n Cancel booking?\n </h3>\n <div class=\"nylas-cancel-booking-form__description\" part=\"ncec__description\">\n Your current timeslot will become available to others.\n </div>\n <form onSubmit={this.handleSubmitCancelBooking}>\n <sp-field-label for=\"cancel-reason\" class={this.cancellationError ? 'error' : ''}>\n Reason for cancellation <span class=\"required\"></span>\n </sp-field-label>\n <sp-textfield\n id=\"cancel-reason\"\n class={this.cancellationError ? 'error' : ''}\n part=\"ncec__reason-textarea\"\n multiline\n value={this.cancellationReason}\n onInput={this.handleOnChangeCancellationReason}\n onFocus={this.handleOnChangeCancellationReason}\n invalid={!!this.cancellationError}\n >\n <sp-help-text slot=\"negative-help-text\">{this.cancellationError}</sp-help-text>\n </sp-textfield>\n <sp-button variant=\"primary\" class=\"cancel\" type=\"submit\" part=\"ncec__button-cta\">\n Cancel booking\n </sp-button>\n <sp-button variant=\"secondary\" class=\"back\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleGoBackClicked}>\n Go back\n </sp-button>\n </form>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/nylas-web-elements/nylas-date-picker.entry.js CHANGED Viewed

@@ -1739,7 +1739,7 @@ function ticker(year, month, week, day, hour, minute) {
 const [utcTicks, utcTickInterval] = ticker(utcYear, utcMonth, utcSunday, unixDay, utcHour, utcMinute);
 const [timeTicks, timeTickInterval] = ticker(timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute);
-const nylasDatePickerCss = ":host{display:block;min-height:444px;--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}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:1rem}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
+const nylasDatePickerCss = ":host{display:block;min-height:444px;--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}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
 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;