npm - @nylas/web-elements - Versions diffs - 1.0.2-canary.2 → 1.1.0-canary.3 - Mend

@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

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

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":[],"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-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant } from '@nylas/core';\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 = 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 = 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] = 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 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 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 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":[],"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-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant } from '@nylas/core';\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 = 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 = 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] = 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 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 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 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-buffer-time.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
@@ -115,7 +115,7 @@ const NylasBufferTime = class {
                 else if (isPartial) {
                     slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;
                 }
-                return (h("div", { class: `slot ${isActive ? 'active' : ''}`, style: {
+                return (h("div", { key: index, class: `slot ${isActive ? 'active' : ''}`, style: {
                         height: `${slotHeight}px`,
                         ...slotStyle,
                     } }));
@@ -133,7 +133,7 @@ const NylasBufferTime = class {
                 else if (isPartial) {
                     slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;
                 }
-                return (h("div", { class: `slot ${isActive ? 'active' : ''}`, style: {
+                return (h("div", { key: index, class: `slot ${isActive ? 'active' : ''}`, style: {
                         height: `${slotHeight}px`,
                         ...slotStyle,
                     } }));
@@ -148,7 +148,7 @@ const NylasBufferTime = class {
                 value: i,
             };
         });
-        return (h(Host, null, h("div", { class: "nylas-buffer-time" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Buffer time"), h("p", null, "Add buffer time before and after the event.")), h("div", { class: "nylas-buffer-time__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, "Before the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "before-buffer-time", name: "before-buffer-time", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0] }), h("span", null, "mins"))), h("div", { class: "nylas-buffer-time__row" }, h("label", null, "After the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "after-buffer-time", name: "after-buffer-time", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0] }), h("span", null, "mins")))), h("div", { class: "nylas-buffer-time__preview" }, h("h4", null, "PREVIEW"), this.renderPreview())))));
+        return (h(Host, null, h("div", { class: "nylas-buffer-time", part: "nbt" }, h("div", { class: "header", part: "nbt__header" }, h("h3", null, "Buffer time"), h("p", null, "Add buffer time before and after the event.")), h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, "Before the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "before-buffer-time", name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0] }), h("span", null, "mins"))), h("div", { class: "nylas-buffer-time__row" }, h("label", null, "After the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "after-buffer-time", name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0] }), h("span", null, "mins")))), h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, h("h4", null, "PREVIEW"), this.renderPreview())))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/nylas-web-elements/nylas-buffer-time.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-buffer-time.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.scss?tag=nylas-buffer-time&encapsulation=shadow","src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-buffer-time {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n text-align: left;\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n\n .nylas-buffer-time__body {\n display: grid;\n grid-template-columns: 1fr auto;\n .nylas-buffer-time__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-right: 1px solid var(--nylas-base-200);\n .nylas-buffer-time__row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: 1rem;\n label {\n width: 200px;\n }\n .dropdown-container {\n display: flex;\n gap: 1rem;\n align-items: center;\n }\n }\n }\n .nylas-buffer-time__preview {\n width: 200px;\n padding: 1rem;\n background: var(--nylas-base-25);\n border-bottom-right-radius: var(--nylas-border-radius-2x);\n h4 {\n font-size: 12px;\n line-height: 24px;\n color: var(--nylas-base-600);\n font-family: var(--nylas-font-family);\n font-weight: 500;\n text-align: center;\n }\n .preview-container {\n .slot {\n background-color: transparent;\n border-top: 1px solid var(--nylas-base-300);\n &.active {\n background-color: var(--nylas-base-100);\n }\n &:last-of-type {\n border-bottom: 1px solid var(--nylas-base-300);\n }\n }\n .event-slot {\n background-color: var(--nylas-base-600);\n border-top: 1px solid var(--nylas-base-300);\n border-bottom: 1px solid var(--nylas-base-300);\n }\n }\n }\n }\n\n .nylas-buffer-time__dropdown {\n select-dropdown::part(sd_dropdown-button) {\n width: 104px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-buffer-time` component is a UI component that displays the booking calendar picker.\n /\n@Component({\n tag: 'nylas-buffer-time',\n styleUrl: 'nylas-buffer-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBufferTime {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'buffer-time';\n /\n The buffer time\n /\n @Prop() buffer: { before: number; after: number } = { before: 0, after: 0 };\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected before buffer time.\n /\n @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n /\n The selected after buffer time.\n /\n @State() selectedAfterBufferTime: number = this.buffer.after;\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-buffer-time', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-buffer-time', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-buffer-time', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-buffer-time', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n }\n this.selectedAfterBufferTime = this.buffer.after;\n this.selectedBeforeBufferTime = this.buffer.before;\n }\n\n componentWillUpdate() {\n debug('nylas-buffer-time', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-buffer-time', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-buffer-time', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-buffer-time', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-buffer-time', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value, name } = event.detail;\n if (name === 'before-buffer-time') {\n this.selectedBeforeBufferTime = parseInt(value);\n } else if (name === 'after-buffer-time') {\n this.selectedAfterBufferTime = parseInt(value);\n }\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n renderPreview() {\n const totalSlots = 4;\n const slotHeight = 20; // The height for each 30-minute slot\n\n // Event slot height is constant\n const eventSlotHeight = slotHeight 2;\n\n // Helper function to determine the fill of a slot based on the minutes selected\n const slotFill = minutes => {\n const fullSlots = Math.floor(minutes / 30);\n const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n return {\n fullSlots,\n partialFillHeight,\n };\n };\n\n // Helper function to create before slots\n const createBeforeSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n // Slot is active if its index is greater than the total slots minus the full slots minus one\n // and there are some minutes selected.\n const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n // Helper function to create after slots\n const createAfterSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n const isPartial = index === fullSlots && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n return (\n <div class=\"preview-container\">\n {createBeforeSlots()}\n <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n {createAfterSlots()}\n </div>\n );\n }\n\n @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-buffer-time',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const minuteOptions = Array.from({ length: 121 }, (_, i) => {\n return {\n label: i.toString(),\n value: i,\n };\n });\n\n return (\n <Host>\n <div class=\"nylas-buffer-time\">\n <div class=\"header\" part=\"ncp__header\">\n <h3>Buffer time</h3>\n <p>Add buffer time before and after the event.</p>\n </div>\n <div class=\"nylas-buffer-time__body\">\n <div class=\"nylas-buffer-time__dropdown\">\n <div class=\"nylas-buffer-time__row\">\n <label>Before the event</label>\n <div class=\"dropdown-container\">\n <select-dropdown\n id=\"before-buffer-time\"\n name=\"before-buffer-time\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0]}\n />\n <span>mins</span>\n </div>\n </div>\n <div class=\"nylas-buffer-time__row\">\n <label>After the event</label>\n <div class=\"dropdown-container\">\n <select-dropdown\n id=\"after-buffer-time\"\n name=\"after-buffer-time\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0]}\n />\n <span>mins</span>\n </div>\n </div>\n </div>\n <div class=\"nylas-buffer-time__preview\">\n <h4>PREVIEW</h4>\n {this.renderPreview()}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-buffer-time.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.scss?tag=nylas-buffer-time&encapsulation=shadow","src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-buffer-time {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n text-align: left;\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n\n .nylas-buffer-time__body {\n display: grid;\n grid-template-columns: 1fr auto;\n .nylas-buffer-time__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-right: 1px solid var(--nylas-base-200);\n .nylas-buffer-time__row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: 1rem;\n label {\n width: 200px;\n }\n .dropdown-container {\n display: flex;\n gap: 1rem;\n align-items: center;\n }\n }\n }\n .nylas-buffer-time__preview {\n width: 200px;\n padding: 1rem;\n background: var(--nylas-base-25);\n border-bottom-right-radius: var(--nylas-border-radius-2x);\n h4 {\n font-size: 12px;\n line-height: 24px;\n color: var(--nylas-base-600);\n font-family: var(--nylas-font-family);\n font-weight: 500;\n text-align: center;\n }\n .preview-container {\n .slot {\n background-color: transparent;\n border-top: 1px solid var(--nylas-base-300);\n &.active {\n background-color: var(--nylas-base-100);\n }\n &:last-of-type {\n border-bottom: 1px solid var(--nylas-base-300);\n }\n }\n .event-slot {\n background-color: var(--nylas-base-600);\n border-top: 1px solid var(--nylas-base-300);\n border-bottom: 1px solid var(--nylas-base-300);\n }\n }\n }\n }\n\n .nylas-buffer-time__dropdown {\n select-dropdown::part(sd_dropdown-button) {\n width: 104px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-buffer-time` component is a UI component that displays the booking calendar picker.\n * @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n /\n@Component({\n tag: 'nylas-buffer-time',\n styleUrl: 'nylas-buffer-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBufferTime {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'buffer-time';\n /\n The buffer time\n /\n @Prop() buffer: { before: number; after: number } = { before: 0, after: 0 };\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected before buffer time.\n /\n @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n /\n The selected after buffer time.\n /\n @State() selectedAfterBufferTime: number = this.buffer.after;\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-buffer-time', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-buffer-time', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-buffer-time', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-buffer-time', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n }\n this.selectedAfterBufferTime = this.buffer.after;\n this.selectedBeforeBufferTime = this.buffer.before;\n }\n\n componentWillUpdate() {\n debug('nylas-buffer-time', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-buffer-time', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-buffer-time', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-buffer-time', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-buffer-time', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value, name } = event.detail;\n if (name === 'before-buffer-time') {\n this.selectedBeforeBufferTime = parseInt(value);\n } else if (name === 'after-buffer-time') {\n this.selectedAfterBufferTime = parseInt(value);\n }\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n renderPreview() {\n const totalSlots = 4;\n const slotHeight = 20; // The height for each 30-minute slot\n\n // Event slot height is constant\n const eventSlotHeight = slotHeight 2;\n\n // Helper function to determine the fill of a slot based on the minutes selected\n const slotFill = minutes => {\n const fullSlots = Math.floor(minutes / 30);\n const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n return {\n fullSlots,\n partialFillHeight,\n };\n };\n\n // Helper function to create before slots\n const createBeforeSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n // Slot is active if its index is greater than the total slots minus the full slots minus one\n // and there are some minutes selected.\n const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n // Helper function to create after slots\n const createAfterSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n const isPartial = index === fullSlots && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n return (\n <div class=\"preview-container\">\n {createBeforeSlots()}\n <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n {createAfterSlots()}\n </div>\n );\n }\n\n @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-buffer-time',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const minuteOptions = Array.from({ length: 121 }, (_, i) => {\n return {\n label: i.toString(),\n value: i,\n };\n });\n\n return (\n <Host>\n <div class=\"nylas-buffer-time\" part=\"nbt\">\n <div class=\"header\" part=\"nbt__header\">\n <h3>Buffer time</h3>\n <p>Add buffer time before and after the event.</p>\n </div>\n <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n <div class=\"nylas-buffer-time__dropdown\">\n <div class=\"nylas-buffer-time__row\">\n <label>Before the event</label>\n <div class=\"dropdown-container\">\n <select-dropdown\n id=\"before-buffer-time\"\n name=\"before-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0]}\n />\n <span>mins</span>\n </div>\n </div>\n <div class=\"nylas-buffer-time__row\">\n <label>After the event</label>\n <div class=\"dropdown-container\">\n <select-dropdown\n id=\"after-buffer-time\"\n name=\"after-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0]}\n />\n <span>mins</span>\n </div>\n </div>\n </div>\n <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n <h4>PREVIEW</h4>\n {this.renderPreview()}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
-const nylasCalendarPickerCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-calendar-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-calendar-picker .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-calendar-picker .nylas-calendar-picker__loading{padding-bottom:1rem}.nylas-calendar-picker .nylas-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-calendar-picker .nylas-calendar-picker__loading .label tooltip-component{display:flex}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown{padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown){width:100%}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-content){width:100%;max-width:unset}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
+const nylasCalendarPickerCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-calendar-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-calendar-picker .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-calendar-picker .nylas-calendar-picker__loading{padding-bottom:1rem;display:flex;flex-direction:column;gap:4px}.nylas-calendar-picker .nylas-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-calendar-picker .nylas-calendar-picker__loading .label tooltip-component{display:flex}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown{padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown){width:100%;display:flex;flex-direction:column;gap:4px}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-content){width:100%;max-width:unset}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
 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;
@@ -85,7 +85,7 @@ const NylasCalendarPicker = class {
                 selected: this.defaultSelectedCalendars?.includes(calendar.id) || (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),
             };
         }) ?? [];
-        return (h(Host, null, h("div", { class: "nylas-calendar-picker" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Calendar availability"), h("p", null, "Select calendars that you\u2019d like to use for checking your availability.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-calendar-picker__dropdown" }, h("multi-select-dropdown", { name: 'calendar', label: "Select calendars that will be checked for availability", options: calendarOptions }, h("span", { slot: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available. The default is your primary calendar if none are selected.")))))) : (h("div", { class: "nylas-calendar-picker__loading" }, h("span", { class: "label" }, "Select calendars that will be checked for availability ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, null, h("div", { class: "nylas-calendar-picker", part: "ncp" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Calendar availability"), h("p", null, "Select calendars that you\u2019d like to use for checking your availability.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-calendar-picker__dropdown" }, h("multi-select-dropdown", { name: 'calendar', label: "Select calendars that will be checked for availability", options: calendarOptions, exportparts: "msd__dropdown: ncp__dropdown, msd__dropdown-button: ncp__dropdown-button, msd__dropdown-content: ncp__dropdown-content" }, h("span", { slot: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available. The default is your primary calendar if none are selected.")))))) : (h("div", { class: "nylas-calendar-picker__loading" }, h("span", { class: "label" }, "Select calendars that will be checked for availability ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

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

	@@ -1 +1 @@
1	- {"file":"nylas-calendar-picker.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.scss?tag=nylas-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-calendar-picker__loading {\n padding-bottom: 1rem;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-calendar-picker__dropdown {\n padding: 1rem;\n multi-select-dropdown::part(msd_dropdown) {\n width: 100%;\n }\n multi-select-dropdown::part(msd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n multi-select-dropdown::part(msd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n multi-select-dropdown::part(msd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-calendar-picker` component is a form input for selecting calendars.\n /\n@Component({\n tag: 'nylas-calendar-picker',\n styleUrl: 'nylas-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The organizer's email.\n /\n @Prop() organizerEmail?: string;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultSelectedCalendars: string[] = [];\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendars: string[] = [];\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string[];\n name: string;\n valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultSelectedCalendars.toString(), 'calendar');\n }\n }\n\n componentWillUpdate() {\n debug('nylas-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionsChanged')\n selectedOptionsChangedHandler(event: CustomEvent<{ value: string[]; name: string }>) {\n debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChangedHandler = (event: CustomEvent<{ value: string[]; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendars = [...value];\n this.internals.setFormValue(value.toString(), 'calendar');\n };\n this.valueChanged.emit({ ...event.detail, name: this.name, valueChangedHandler });\n }\n\n @RegisterComponent<NylasCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChangedHandler } = event.detail;\n // If a handler is passed, call it.\n if (valueChangedHandler) {\n valueChangedHandler(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n selected: this.defaultSelectedCalendars?.includes(calendar.id) \|\| (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-calendar-picker\">\n <div class=\"header\" part=\"ncp__header\">\n <h3>Calendar availability</h3>\n <p>Select calendars that you’d like to use for checking your availability.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-calendar-picker__dropdown\">\n <multi-select-dropdown name={'calendar'} label=\"Select calendars that will be checked for availability\" options={calendarOptions}>\n <span slot=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n The default is your primary calendar if none are selected.\n </span>\n </tooltip-component>\n </span>\n </multi-select-dropdown>\n </div>\n ) : (\n <div class=\"nylas-calendar-picker__loading\">\n <span class=\"label\">\n Select calendars that will be checked for availability <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-calendar-picker.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.scss?tag=nylas-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-calendar-picker__dropdown {\n padding: 1rem;\n multi-select-dropdown::part(msd_dropdown) {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n multi-select-dropdown::part(msd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n multi-select-dropdown::part(msd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n multi-select-dropdown::part(msd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-calendar-picker` component is a form input for selecting calendars.\n * @part ncp - The calendar picker container\n * @part ncp__header - The header of the calendar picker\n * @part ncp__dropdown - The dropdown container\n * @part ncp__dropdown-button - The dropdown button\n * @part ncp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-calendar-picker',\n styleUrl: 'nylas-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The organizer's email.\n /\n @Prop() organizerEmail?: string;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultSelectedCalendars: string[] = [];\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendars: string[] = [];\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string[];\n name: string;\n valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultSelectedCalendars.toString(), 'calendar');\n }\n }\n\n componentWillUpdate() {\n debug('nylas-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionsChanged')\n selectedOptionsChangedHandler(event: CustomEvent<{ value: string[]; name: string }>) {\n debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChangedHandler = (event: CustomEvent<{ value: string[]; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendars = [...value];\n this.internals.setFormValue(value.toString(), 'calendar');\n };\n this.valueChanged.emit({ ...event.detail, name: this.name, valueChangedHandler });\n }\n\n @RegisterComponent<NylasCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChangedHandler } = event.detail;\n // If a handler is passed, call it.\n if (valueChangedHandler) {\n valueChangedHandler(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n selected: this.defaultSelectedCalendars?.includes(calendar.id) \|\| (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-calendar-picker\" part=\"ncp\">\n <div class=\"header\" part=\"ncp__header\">\n <h3>Calendar availability</h3>\n <p>Select calendars that you’d like to use for checking your availability.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-calendar-picker__dropdown\">\n <multi-select-dropdown\n name={'calendar'}\n label=\"Select calendars that will be checked for availability\"\n options={calendarOptions}\n exportparts=\"msd__dropdown: ncp__dropdown, msd__dropdown-button: ncp__dropdown-button, msd__dropdown-content: ncp__dropdown-content\"\n >\n <span slot=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n The default is your primary calendar if none are selected.\n </span>\n </tooltip-component>\n </span>\n </multi-select-dropdown>\n </div>\n ) : (\n <div class=\"nylas-calendar-picker__loading\">\n <span class=\"label\">\n Select calendars that will be checked for availability <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, a as Host } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, i as createEvent, h, a as Host } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
-const nylasCancelBookingFormCss = ":host{display:block;width:400px;--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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600)}.nylas-cancel-booking-form__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;width:100%;height:48px;padding:8px;line-height:24px;font-family:var(--nylas-font-family)}sp-button.cancel{margin-top:1.25rem;background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.cancel:hover,sp-button.cancel:focus{background-color:var(--nylas-base-600)}sp-button.cancel:active{background-color:var(--nylas-base-800)}sp-button.back{margin-top:0.5rem}sp-button.back:hover,sp-button.back:focus{border-color:var(--nylas-primary)}sp-button.back:active{border-color:var(--nylas-base-600)}sp-field-label{margin-top:1rem;display:flex;color:var(--nylas-base-800)}sp-field-label.error{color:var(--nylas-error)}sp-field-label span.required{color:var(--nylas-error)}sp-textfield{--spectrum-textfield-border-color:var(--nylas-base-300);--spectrum-textfield-icon-color-invalid:var(--nylas-error);position:relative;width:100%;height:48px;margin-bottom:16px;background-color:var(--nylas-base-0);color:var(--nylas-base-500)}sp-textfield.error{--spectrum-textfield-border-color:var(--nylas-error)}sp-help-text{margin:0.25rem 0 1rem 0;color:var(--nylas-error)}";
+const nylasCancelBookingFormCss = ":host{display:block;width:400px;--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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600)}.nylas-cancel-booking-form__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;width:100%;height:48px;padding:8px;line-height:24px;font-family:var(--nylas-font-family)}sp-button.cancel{margin-top:1.25rem;background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.cancel:hover,sp-button.cancel:focus{background-color:var(--nylas-base-600)}sp-button.cancel:active{background-color:var(--nylas-base-800)}sp-button.back{margin-top:0.5rem}sp-button.back:hover,sp-button.back:focus{border-color:var(--nylas-primary)}sp-button.back:active{border-color:var(--nylas-base-600)}sp-field-label{margin-top:1rem;display:flex;color:var(--nylas-base-800);font-size:14px}sp-field-label.error{color:var(--nylas-error)}sp-field-label span.required{color:var(--nylas-error)}sp-textfield{--spectrum-textfield-border-color:var(--nylas-base-300);--spectrum-textfield-icon-color-invalid:var(--nylas-error);position:relative;width:100%;height:48px;margin-bottom:16px;background-color:var(--nylas-base-0);color:var(--nylas-base-500)}sp-textfield.error{--spectrum-textfield-border-color:var(--nylas-error)}sp-help-text{margin:0.25rem 0 1rem 0;color:var(--nylas-error)}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -63,7 +63,7 @@ const NylasCancelBookingForm = class {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '37bca52431abe226b6fd868fc24076ec3e841294', part: "ncec" }, h("sp-theme", { key: '40cdcc06a4c14ee3708c34be9260bd6d48a9846d', theme: "spectrum", scale: "medium" }, h("div", { key: '5361b2877dfa977494b51adb4dee9a15ff18179b', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: 'abb7b5820d3e48d4986f0fb01d873fb857a93c0e', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '1dcb825a6b57df4cb0cbd07e188d55519670798a' })), h("h3", { key: 'e8e261dd983185aedefcd7f4d556723c963f5880', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: 'c142bbb14fe2f3e416f2503c0ddef533850182d6', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: '7b1c3b6465310f358583f952472f6eb4c29dcd49', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'c013d9b44b21f6e35fec4c75fcbf80548fb55e76', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '23043f60c6243e3713c4ff909942a3358042bdb6', class: "required" }, "*")), h("sp-textfield", { key: 'ec70ddb3dfdc3ac35e762bf6f7211fd8d1f400f5', 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: 'c20a578c582aad43ce4ee228f8cb87b48d02305b', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'ee0e1cc78325b8e3fdaa99ed4e3b516790050dd5', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'd924c5db2efea170c1ef4c00e237954e69efcd5a', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
+        return (h(Host, { key: '3e77b83049c0b9cd2ed968cc97e665017f76837e', part: "ncec" }, h("sp-theme", { key: '857ac295df09b0f642eb1e9d01021531b935c7ad', theme: "spectrum", scale: "medium" }, h("div", { key: '9f52787bc3efc81618e5eac14219c5674f4efe5a', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '07ddd2cd5664aacf4e123d822bde07af562a8571', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '04ccbf1eb7ccd7d9053265e1991f8fd494b7e4ae' })), h("h3", { key: '2fdbd40021dae8eb98e4288793af8719d3cc6226', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '3af3918de0c111bcf90f6ad44a468efdcab185ac', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: '7e136e261b22e513b395e47dfc2db696aced945f', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'fa566625fafbc74f98bb7c012dcb1c71093c0227', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: 'fb567a86677bfc33c63b6118ed9ce71eed7a5084', class: "required" }, "*")), h("sp-textfield", { key: 'c585d1f070700a4ccb39d52fdc7dba764c19d43f', 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: 'cf6d0e82b648ee662fa9244a793cfcaa64913c4c', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'b8e17a34e57faaaa61585ea4beb2205537c38c49', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'eafb068d14d0680d8ea5cd7e42fd358d3582e99a', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
     }
 };
 __decorate([

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 &.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-scheduler/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 }\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-scheduler/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 }\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}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, i as createEvent, h, a as Host } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, i as createEvent, h, a as Host } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
@@ -41,7 +41,7 @@ const NylasCancelledEventCard = class {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: 'e8e30ff1e8e629c9a522167cfd14629f3b8dc7a6', part: "ncec" }, h("sp-theme", { key: 'bc3928c9c42250b59457ec2dd50599878e162567', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '6aa1399164d77ce4972c2278ef56d537c5027f76', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'dc92dd92882eb01cea5d0c762f87a536a823e0d5', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '60229789ba46ee3abe328e4c9442b4df631d57f9' })), h("h3", { key: '8ddd0f47dc710a41798d32043d641a363e245272', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '8506cc89a56047b8a6f3026697f752ea061c77ee', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '5a38391df6da96396ee719e58ab6c3cb67058c17', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '6d87963e3071dff1e9cb033db37b1afe5a0f419f', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+        return (h(Host, { key: '52b1d729c8df61770be08c165665671f54189c9a', part: "ncec" }, h("sp-theme", { key: '94633560e146be20b9321e9548edb007bf570e1c', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'a18a0006aa5e84e58daa6f9446e2b85908867196', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '67cc5524db58cb7777feaf9b249070e5d713b17b', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '87b0379d4847388505e4f6ddd62d059af9156303' })), h("h3", { key: 'b7d36ece20f5926c8bb2d0e796a35ed44772e8cf', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '808a6cdf14cec2782990c85e06c23e5b9936bc56', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: 'cfd161ea961c637ab2247a568143e659bfb1b7da', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: 'ab549c146571e0dd4e86cce46d9947875794a437', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
     }
 };
 __decorate([

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-bda1cba1.js';
+import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
@@ -134,7 +134,7 @@ const NylasComposer = class {
         this.editorEl.focus();
     }
     render() {
-        return (h(Host, { key: 'bf89c512a7bebc2d438c8ace6c36ddfdc70f4e9b' }, h("sp-theme", { key: '20b57ce48fa2069c2d047a10d4756d0c4b931bb2', scale: "medium", color: "dark" }, h("div", { key: 'e89832859052769d38acf7d8297888b9146f5f30', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '4ab0148ad491259a14b280ac21f8b650f1ec3897', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '6426f50ff6e3f98d6b65aebb99e5ed528dd03817', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '38be22cd82acf14e31801e65f5190e07cb1bc124', slot: "icon" }, h("bold-icon", { key: 'c965237b13c0bf358f0937a27da3be305fbb94d3' })), h("div", { key: '935c3961fc590ee88cdc0d351704d078f179e692', slot: "label" }, "Bold")), h("sp-button", { key: '51572cf863ce03a6814e4f2b5090ba899abce298', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'b55f65bd672b467eff478ddac04907f8d1a8fc8b', slot: "icon" }, h("underline-icon", { key: 'c1251e0fd863dab56c1127dcfe650995da054ae7' })), h("div", { key: '63a575566653d4957a3fe51cb877b5d7418086c2', slot: "label" }, "Underline")), h("sp-button", { key: 'd678867388f1c0e8bec34cb2a4cc5f0158d3b327', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'e6add93a87877e6701cd2877573e0c63c55c0ae6', slot: "icon" }, h("italic-icon", { key: 'fa5ad4323cd0cf31cb2d8a7c93ec2171fa776586' })), h("div", { key: '26c7f9d97e786c9e8e7e7e8b8d27dcfd2a5b0e50', slot: "label" }, "Italic")))), h("div", { key: '367b9de03c23d6bb5e96f6d6e49f0d549eb92e37', class: 'buttons' }, h("sp-button", { key: '4e3e6a5ad05b285e68b2ef26fcebac1e54a71be2', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'e2444f4a64d500032fa90b6c539afa8e2567cb72', onClick: this.closeComposer, class: "close" }, "Close")))));
+        return (h(Host, { key: '89cdb2c6c606698704a06507ddbe301a37134ca4' }, h("sp-theme", { key: '4946560c2ab8518e5172e506caf36fa98fbc3912', scale: "medium", color: "dark" }, h("div", { key: 'b21a8843aaebb1fd4169ce2b849fb801bce46df4', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '830a97d7947b65c0312630184d539d4f8c7a48eb', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '2fb11d997b13e4ec6e700155e3001d30f52bb217', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '5c4fd64a8a3ccb94f36675047c05a662a1846426', slot: "icon" }, h("bold-icon", { key: '033043849fddd392bc078dbb2fd843f6701c0501' })), h("div", { key: '585b08407297a97e3214d716505331f0889ea68f', slot: "label" }, "Bold")), h("sp-button", { key: 'b01e3c9c40fbe11122ca7be4b5120ba19262e1d5', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'e407e888cb414fc4e5b15e9d21349038c7871f83', slot: "icon" }, h("underline-icon", { key: '838cf6c3b7b42708b5ed6e5c53072cda29043f40' })), h("div", { key: 'c662e1cefa352cb8910050a77e5b0a2e18de6bed', slot: "label" }, "Underline")), h("sp-button", { key: '7e39fdbbdaeafabf1de93f42758f3b499c70206b', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: '8d7c7be8cf3959726b7541ed64e4e41995461258', slot: "icon" }, h("italic-icon", { key: 'ae07a6648728e3f9720dfdc3e3f91e8e4cbf86d9' })), h("div", { key: 'fc3fc026d47610df27752ec8a310db99e280014c', slot: "label" }, "Italic")))), h("div", { key: '9d4abb27a5d5a6b2c884da58191ca8f014e9ab43', class: 'buttons' }, h("sp-button", { key: '43f2b6d9a4a6d5513eb6fd52fb8f68f416077b37', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'fbae8e0490814b13347e3cc09bfd922ff5fceb43', onClick: this.closeComposer, class: "close" }, "Close")))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-bda1cba1.js';
-import { R as RegisterComponent } from './register-component-93f9bcf5.js';
+import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
+import { R as RegisterComponent } from './register-component-0645dce0.js';
 import { d as debug } from './utils-3a8d433a.js';
 import './_commonjsHelpers-7c16df4a.js';
@@ -87,7 +87,7 @@ const NylasCustomBookingFlow = class {
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: '8caff7b115db52f355185615eab1e5c0c3fe32db' }, h("div", { key: '9c43d51b15ceefa958560b8fbb0a684f77e58eb0', class: "nylas-custom-booking-flow" }, h("div", { key: '2d25054eef5b8208ad0e1b9ac165e023061cb85c', class: "header", part: "ncp__header" }, h("h3", { key: '63f570c5f8e6423123eaec621dacda10be0a33e6' }, "Customize booking flow"), h("p", { key: 'cf6b5cb225510a9bb6ba9cee1fa850caa331c9ea' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: 'fe9e837aba8f846a0b77a21eee365080d41b4e57' }, h("div", { key: '2405db5290bcd44a602fd9f91bb91e13a9d7ffc7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '2de829660fdba0da9e6cbcd6281c427b65414d90', class: "header", part: "ncbf__header" }, h("h3", { key: '13e3b9e450f54f04538c773ab2564513cdaf0fa5' }, "Customize booking flow"), h("p", { key: '9436439f81faf9aed4ff9029c5c0a08a268b5e59' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }