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

@nylas/web-elements 1.1.0-canary.3 → 1.1.0-canary.5

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

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

	@@ -1 +1 @@
1	- {"file":"nylas-booking-form2.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-form2.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/components/nylas-buffer-time2.js CHANGED Viewed

@@ -207,7 +207,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasBufferTime);
 export { NylasBufferTime as N, defineCustomElement as d };

package/dist/components/nylas-buffer-time2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-buffer-time2.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}
1	+ {"file":"nylas-buffer-time2.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/components/nylas-calendar-picker2.js CHANGED Viewed

@@ -157,7 +157,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasCalendarPicker);
 export { NylasCalendarPicker as N, defineCustomElement as d };

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

	@@ -1 +1 @@
1	- {"file":"nylas-calendar-picker2.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}
1	+ {"file":"nylas-calendar-picker2.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/components/nylas-cancel-booking-form2.js CHANGED Viewed

@@ -65,7 +65,7 @@ const NylasCancelBookingForm = proxyCustomElement(class NylasCancelBookingForm e
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        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"))))));
+        return (h(Host, { key: 'cd458abc8be3fea5d194bf0795e5ea6f8cd4ae1d', part: "ncec" }, h("sp-theme", { key: '4ea58339902d42d06f9860c905420afe514d8ce6', theme: "spectrum", scale: "medium" }, h("div", { key: '8e22168fb288c4d8a7103fcdc474fff39ab675d7', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '160c99846c244a28c1e84276994c0ac2443edcc7', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '4fe4d83d698aeb3ca1340e985736e0b0e5ae4767' })), h("h3", { key: '4a1f3159bd17eaeae75796fdc6d264a388edc54c', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '5f12df75b97ecaa5d5083658a9b9f9fa4af3ac7f', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: '1dc6db16c39ca4b023eaf21708abf30eb4f2fffd', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'b8bb55e85cc824ec11c4e0b594dbb5ac9834b827', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: 'e2f2b8f856aba5c13bad5634eb594202a0f15d37', class: "required" }, "*")), h("sp-textfield", { key: 'ff201494cd1f96fe08db14f443cc407cc95f68ca', 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: '6101a1942260b69c3ba09ff6d139d4f777c6d1ba', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: '67a9ecde3bf3e6ce7f66499709f3f5f2b9b2cdf3', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'eeac156906a10f13541f62924f136f23ebc4be4a', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
     }
     static get style() { return nylasCancelBookingFormCss; }
 }, [1, "nylas-cancel-booking-form", {
@@ -109,7 +109,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasCancelBookingForm);
 export { NylasCancelBookingForm as N, defineCustomElement as d };

package/dist/components/nylas-cancel-booking-form2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-cancel-booking-form2.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}
1	+ {"file":"nylas-cancel-booking-form2.js","mappings":";;;;;AAAA,MAAM,yBAAyB,GAAG,u1FAAu1F;;;;;;;;;;;;;;;;MCe52F,sBAAsB;;;;;;;;;QAiDzB,wBAAmB,GAAG;YAC5B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;SACjC,CAAC;QAEM,8BAAyB,GAAG,CAAC,KAAY;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;gBAC5B,IAAI,CAAC,iBAAiB,GAAG,2CAA2C,CAAC;gBACrE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,2BAA2B,EAAE,WAAW,EAAE,2CAA2C,EAAE,CAAC,CAAC;gBACnI,OAAO;aACR;YAED,KAAK,CAAC,0EAA0E,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;YAC3G,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACzC,CAAC;YACF,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,YAAY,EAAE,CAAC,CAAC;SAC1H,CAAC;QAEM,qCAAgC,GAAG,CAAC,KAAY;YACtD,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,kBAAkB,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;SACpE,CAAC;;kCA1CoC,EAAE;iCAEH,EAAE;;IAEvC,iBAAiB;QACf,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,gDAAgD,CAAC,CAAC;KACzD;IAED,oBAAoB;QAClB,KAAK,CAAC,oDAAoD,CAAC,CAAC;KAC7D;IA0CD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,IACvC,4DAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,YAAY,IACtD,4DAAK,KAAK,EAAC,0CAA0C,EAAC,IAAI,EAAC,YAAY,IACrE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,sBAE1D,EACL,4DAAK,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,mBAAmB,6DAEtE,EACN,6DAAM,QAAQ,EAAE,IAAI,CAAC,yBAAyB,IAC5C,uEAAgB,GAAG,EAAC,eAAe,EAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAAG,OAAO,GAAG,EAAE,gCACtD,6DAAM,KAAK,EAAC,UAAU,QAAS,CACxC,EACjB,qEACE,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAAG,OAAO,GAAG,EAAE,EAC5C,IAAI,EAAC,uBAAuB,EAC5B,SAAS,QACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAC9C,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAC9C,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAEjC,qEAAc,IAAI,EAAC,oBAAoB,IAAE,IAAI,CAAC,iBAAiB,CAAgB,CAClE,EACf,kEAAW,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,kBAAkB,qBAErE,EACZ,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,cAEjH,CACP,CACH,CACG,CACN,EACP;KACH;;;;;;;AAzCD;IAhBC,iBAAiB,CAAiG;QACjH,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE;YACZ,0BAA0B,EAAE,OAC1B,KAAsH,EACtH,uBAAgD;gBAEhD,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC7F,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACtC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDA0CD;;;;;;;;;;;;;;;;;;;;;;","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/components/nylas-cancelled-event-card2.js CHANGED Viewed

@@ -43,7 +43,7 @@ const NylasCancelledEventCard = proxyCustomElement(class NylasCancelledEventCard
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        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"))))));
+        return (h(Host, { key: '1d10c839e557abfc03115780d11ac2dd0777c7cb', part: "ncec" }, h("sp-theme", { key: '88b5a9ece7ffc99a870217c96e756ed2a2fe4f85', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '287a45fc86df89719461be7104c7e1b3cafe4c0c', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '078ca3fc5474dae97cb1439727360b5ce23ae98b', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'e9d1df069e34cb7c0d16139db8fe98964ab2ad1c' })), h("h3", { key: '2ce714e14dbffcd74adc5f1c3c313ec8f3176e07', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '503c4b443dda028e829270cf4b984e2b647ecaae', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '2f7313a894344052b3397c2d8e58a35cf81fc5eb', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '5d099b201c419f93d839c34a3cf3351cb524ee61', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
     }
     static get style() { return nylasCancelledEventCardCss; }
 }, [1, "nylas-cancelled-event-card", {
@@ -77,7 +77,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasCancelledEventCard);
 export { NylasCancelledEventCard as N, defineCustomElement as d };

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

	@@ -1 +1 @@
1	- {"file":"nylas-cancelled-event-card2.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,6mEAA6mE;;;;;;;;;;;;;;;;MCqBnoE,uBAAuB;;;;;;QA2B1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;SACzC,CAAC;;;IAlBF,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IAWD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8DAEvE,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAEnG,CACR,CACF,CACG,CACN,EACP;KACH;;;;;AAvBD;IALC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD~~;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\nsp-theme {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.nylas-cancelled-event-card {\n display: flex;\n align-items: center;\n flex-direction: column;\n width: 400px;\n @media #{$mobile} {\n width: inherit;\n }\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-cancelled-event-card__title {\n font-size: 18px;\n font-weight: 600;\n line-height: 24px;\n color: var(--nylas-base-900);\n text-align: center;\n}\n\n.nylas-cancelled-event-description {\n font-size: 16px;\n font-weight: 500;\n color: var(--nylas-base-600);\n}\n\n.nylas-cancelled-event-card__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\n.nylas-cancelled-event-card__cta {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n margin-top: 1rem;\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: 1rem;\n height: 48px;\n padding: 8px;\n line-height: 24px;\n width: 100%;\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\n\n/*\n The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n \n @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n /\n@Component({\n tag: 'nylas-cancelled-event-card',\n styleUrl: 'nylas-cancelled-event-card.scss',\n shadow: true,\n})\nexport class NylasCancelledEventCard {\n /\n The participant's name who booked the event / is logged in.\n /\n @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n /\n This event is fired when the close button is clicked on the cancelled event card.\n */\n @Event() readonly closeCancelEventCardClicked!: EventEmitter<void>;\n\n connectedCallback() {\n debug(`[nylas-cancelled-event-card] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancelled-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancelled-event-card] Component did load`);\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancelled-event-card] Component disconnected`);\n }\n\n private handleCloseClicked = () => {\n this.closeCancelEventCardClicked.emit();\n };\n\n @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancelled-event-card',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\n <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n Your booking has been cancelled successfully!\n </h3>\n <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n A cancellation email has been sent to the participants.\n </div>\n <div class=\"nylas-cancelled-event-card__cta\">\n <sp-button variant=\"secondary\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n Close\n </sp-button>\n </div>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-cancelled-event-card2.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,6mEAA6mE;;;;;;;;;;;;;;;;MCqBnoE,uBAAuB;;;;;;QA2B1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;SACzC,CAAC;;;IAlBF,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IAWD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8DAEvE,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAEnG,CACR,CACF,CACG,CACN,EACP;KACH;;;;;AAvBD;IALC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\nsp-theme {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.nylas-cancelled-event-card {\n display: flex;\n align-items: center;\n flex-direction: column;\n width: 400px;\n @media #{$mobile} {\n width: inherit;\n }\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-cancelled-event-card__title {\n font-size: 18px;\n font-weight: 600;\n line-height: 24px;\n color: var(--nylas-base-900);\n text-align: center;\n}\n\n.nylas-cancelled-event-description {\n font-size: 16px;\n font-weight: 500;\n color: var(--nylas-base-600);\n}\n\n.nylas-cancelled-event-card__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\n.nylas-cancelled-event-card__cta {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n margin-top: 1rem;\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: 1rem;\n height: 48px;\n padding: 8px;\n line-height: 24px;\n width: 100%;\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\n\n/*\n The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n \n @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n /\n@Component({\n tag: 'nylas-cancelled-event-card',\n styleUrl: 'nylas-cancelled-event-card.scss',\n shadow: true,\n})\nexport class NylasCancelledEventCard {\n /\n The participant's name who booked the event / is logged in.\n /\n @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n /\n This event is fired when the close button is clicked on the cancelled event card.\n */\n @Event() readonly closeCancelEventCardClicked!: EventEmitter<void>;\n\n connectedCallback() {\n debug(`[nylas-cancelled-event-card] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancelled-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancelled-event-card] Component did load`);\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancelled-event-card] Component disconnected`);\n }\n\n private handleCloseClicked = () => {\n this.closeCancelEventCardClicked.emit();\n };\n\n @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancelled-event-card',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\n <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n Your booking has been cancelled successfully!\n </h3>\n <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n A cancellation email has been sent to the participants.\n </div>\n <div class=\"nylas-cancelled-event-card__cta\">\n <sp-button variant=\"secondary\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n Close\n </sp-button>\n </div>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-composer2.js CHANGED Viewed

@@ -138,7 +138,7 @@ const NylasComposer = proxyCustomElement(class NylasComposer extends HTMLElement
         this.editorEl.focus();
     }
     render() {
-        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")))));
+        return (h(Host, { key: '7537b7c56a1e609f88189c2c4deed986827eb193' }, h("sp-theme", { key: 'efa28f8ed5585ec21b44ae5ec174aa10a9c92aba', scale: "medium", color: "dark" }, h("div", { key: 'c7932bcedcb2b3cfa4e0900578cf2b749000125d', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '89c06c0e76d29ea6713dd44b2452e261d0d7d43b', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: 'beeb60448f03c8818925aeb13ab5231aa72f7526', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '4e37be81a28ac4355f9d0d6d6c71b7b78cf41456', slot: "icon" }, h("bold-icon", { key: '56cf047799a6a5713310d5b095ca91e6004d6107' })), h("div", { key: '2fe47f8f364f7fb1016990f2aecec655e2e6eb30', slot: "label" }, "Bold")), h("sp-button", { key: '0416d13b88ccefd5005f4b97f7dded2118d37f43', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: '6d20e215eafbb91a17ce452a6b64295ab4ef2bb9', slot: "icon" }, h("underline-icon", { key: 'b8d988fa168047ed213fbcceb53b24bf3f766d7a' })), h("div", { key: 'bd05639007b3ea849501b995137ceda70aed20da', slot: "label" }, "Underline")), h("sp-button", { key: '9775c4787363cd4d21778f4c848c7f5a7564b507', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'ca9d557028981c0fe209045e5d1748b19bbb5069', slot: "icon" }, h("italic-icon", { key: '1be5debba3572e83ab132a3e44d8fc1e799f6619' })), h("div", { key: 'cccb70309840e20f558158e6ef9edf8fe0e52eed', slot: "label" }, "Italic")))), h("div", { key: '502854e008886de49ec435c1ebd73b48f2cc4c70', class: 'buttons' }, h("sp-button", { key: '9663a709ca8794dc76dec379a39c52a6a754cb6e', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'b0c7637932f2659c9115e74f1244db04992a69aa', onClick: this.closeComposer, class: "close" }, "Close")))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -179,7 +179,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasComposer);
 export { NylasComposer as N, defineCustomElement as d };

package/dist/components/nylas-composer2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-composer2.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-composer/nylas-composer.scss?tag=nylas-composer&encapsulation=shadow","src/components/mailbox/nylas-composer/nylas-composer.tsx"],"sourcesContent":[":host {\n display: grid;\n color: var(--nylas-color-primary-900);\n}\n\n.editor {\n position: relative;\n display: block;\n max-height: 300px;\n overflow: auto;\n\n padding: 1rem;\n\n border: 1px solid var(--nylas-color-primary-300);\n\n blockquote {\n visibility: hidden;\n overflow: hidden;\n position: relative;\n transition: height 0.3s ease;\n margin: 0;\n }\n\n blockquote::before {\n content: '...';\n visibility: visible;\n opacity: 1;\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--nylas-color-primary-300);\n width: 20px;\n text-align: center;\n color: var(--nylas-color-primary-800);\n vertical-align: middle;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: center;\n cursor: pointer;\n }\n\n .collapsed {\n height: 20px;\n }\n\n .expanded {\n visibility: visible;\n opacity: 1;\n height: auto; /* Height to fit the content /\n margin: 0px 0px 0px 0.8ex;\n border-left: 1px solid var(--nylas-color-primary-300);\n padding-left: 1rem;\n }\n\n .expanded::before {\n display: none; / Hide the '...' when content is expanded /\n }\n}\n\n.buttons {\n display: flex;\n\n margin-top: 1rem;\n\n justify-content: space-between;\n\n sp-button {\n border-radius: var(--nylas-border-radius);\n background-color: var(--nylas-color-primary-400);\n color: var(--nylas-color-primary-900);\n fill: var(--nylas-color-primary-900);\n\n &:hover {\n background-color: var(--nylas-color-primary-500);\n }\n\n &:disabled {\n background-color: var(--nylas-color-primary-200);\n color: var(--nylas-color-primary-600);\n cursor: not-allowed;\n }\n\n & chevron-icon {\n display: inline-block;\n }\n }\n\n .close {\n justify-self: end;\n }\n}\n\n.toolbar {\n position: absolute;\n display: none;\n background-color: var(--nylas-color-primary-200);\n border-radius: var(--nylas-border-radius);\n z-index: 1;\n\n sp-button {\n border: 0;\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Element, Prop, Watch, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'nylas-composer',\n styleUrl: 'nylas-composer.scss',\n shadow: true,\n})\nexport class NylasComposer {\n /\n The host element\n /\n @Element() readonly host!: HTMLElement;\n\n /\n The message to reply to or forward\n /\n @Prop() readonly message?: Message;\n\n /\n The view email element\n /\n @Prop() readonly viewEmailElement?: HTMLNylasViewEmailElement \| null;\n\n /\n Fired when the composer is closed\n /\n @Event() readonly close!: EventEmitter<MouseEvent>;\n\n /\n Fired when the send button is clicked\n /\n @Event() readonly send!: EventEmitter<{\n message: Message;\n replyBody: string;\n }>;\n\n /\n The editor element\n /\n private editorEl?: HTMLDivElement;\n\n /\n The toolbar element\n /\n private toolbarEl?: HTMLDivElement;\n\n connectedCallback() {}\n\n disconnectedCallback() {\n if (this.editorEl) {\n this.editorEl.innerHTML = '';\n }\n }\n\n componentWillLoad() {}\n\n async componentDidLoad() {\n if (this.message) {\n this.watchBody(this.message);\n }\n\n if (!this.editorEl) {\n debug('[connectedCallback] no editor element');\n return;\n }\n\n if (!this.toolbarEl) {\n debug('[connectedCallback] no toolbar element');\n return;\n }\n\n const editorEl = this.editorEl;\n const toolbarEl = this.toolbarEl;\n\n // On highlight, show the toolbar\n editorEl.addEventListener('mouseup', _ => {\n interface ShadowRootWithSelection extends ShadowRoot {\n getSelection(): Selection \| null;\n }\n\n const selection: Selection \| null = (this.host.shadowRoot as ShadowRootWithSelection)?.getSelection();\n if (!selection) {\n debug('no selection');\n return;\n }\n\n // Get range\n const range = selection.getRangeAt(0);\n\n // Get text selection\n const text = selection.toString();\n if (!text) {\n toolbarEl.style.display = 'none';\n return;\n }\n\n // Find .message-body in the editor\n const messageBody = editorEl.querySelector('.message-body');\n if (!messageBody) {\n debug('no message body');\n return;\n }\n\n // Get commonAncestorContainer\n const foundNode = range.commonAncestorContainer;\n\n // Get rect\n const foundElement = foundNode.parentElement;\n\n // If we didn't find the text, then don't show the toolbar\n if (!foundElement) {\n return;\n }\n\n // Get the bounding rect of the message body\n const messageBodyRect = messageBody.getBoundingClientRect();\n debug('messageBodyRect', { messageBodyRect });\n\n const foundRect = foundElement.getBoundingClientRect();\n debug('foundRect', { foundRect });\n\n // Find the text position within the found node\n // without using document.createRange()\n\n // Get the text node\n const textNode = foundElement.childNodes[0];\n\n // Get the text content\n const textContent = textNode.textContent \|\| '';\n\n // Get the text position\n const textPosition = textContent.indexOf(text);\n\n // Calcualte the font width\n const fontSize = window.getComputedStyle(foundElement).fontSize;\n const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);\n\n // Top\n const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;\n const left = textPosition (1 / fontSizeNumber) * 100;\n\n // Position the toolbar\n toolbarEl.style.top = `${top}px`;\n toolbarEl.style.left = `${left}px`;\n toolbarEl.style.display = 'block';\n });\n }\n\n @Watch('message')\n watchBody(newMessage: Message) {\n if (!this.editorEl) {\n debug('no editor element');\n return;\n }\n\n // Find .message-body elements and remove them\n this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());\n\n // Create a container for the body of the reply\n const messageBody = document.createElement('div');\n messageBody.classList.add('message-body');\n\n // Add an empty paragraph to the reply body\n const emptyParagraph = document.createElement('p');\n emptyParagraph.innerHTML = ' ';\n messageBody.appendChild(emptyParagraph);\n\n // Also add a break to separate the reply from the rest of the email\n const br = document.createElement('br');\n messageBody.appendChild(br);\n\n // Append a reply header\n const replyText = document.createElement('div');\n replyText.classList.add('reply-text');\n replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from\n ?.map(from => from.name \|\| from.email)\n .join(', ')}> wrote:`;\n messageBody.appendChild(replyText);\n\n // If we have a reply body, separate the contents with a horizontal rule\n if (newMessage.body) {\n // For the reply HTML, we want to wrap the contents in a custom element\n // with a shadow root. This will allow us to style the contents of the\n // reply without affecting the rest of the page.\n\n // First convert the HTML string to a DOM element\n const replyElement = document.createElement('html');\n replyElement.innerHTML = newMessage.body;\n\n const replyContainer = document.createElement('blockquote');\n replyContainer.classList.add('collapsed');\n replyContainer.classList.add('gmail_quote');\n\n // Now add the reply element to the container\n replyContainer.innerHTML = replyElement.innerHTML;\n\n messageBody.appendChild(replyContainer);\n\n debug('replyContainer', { replyContainer });\n }\n\n // Add the message body to the editor\n this.editorEl.appendChild(messageBody);\n\n this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {\n blockquote.addEventListener(\n 'click',\n function (event) {\n event.preventDefault();\n const el = event.target as HTMLElement;\n el.classList.remove('collapsed');\n el.classList.add('expanded');\n },\n { once: true },\n );\n });\n\n // Focus the editor\n this.editorEl.focus();\n }\n\n private closeComposer = (event: MouseEvent) => {\n this.close.emit(event);\n };\n\n private sendComposer = (event: MouseEvent) => {\n if (!this.editorEl) {\n debug('no editor element');\n return;\n }\n\n const messageBody = this.editorEl.querySelector('.message-body');\n if (!messageBody) {\n debug('no message body');\n return;\n }\n\n // Send the message\n if (this.message) {\n this.send.emit({\n message: this.message,\n replyBody: messageBody.querySelector('.message-body')?.innerHTML \|\| '',\n });\n\n // Close the composer\n this.close.emit(event);\n\n // Clear the editor\n this.editorEl.innerHTML = '';\n }\n };\n\n render() {\n return (\n <Host>\n <sp-theme scale=\"medium\" color=\"dark\">\n <div class=\"editor\" contentEditable={true} ref={r => (this.editorEl = r)}>\n <div class=\"toolbar\" ref={r => (this.toolbarEl = r)} contentEditable={false}>\n <sp-button quiet onClick={() => document.execCommand('bold')}>\n <div slot=\"icon\">\n <bold-icon></bold-icon>\n </div>\n <div slot=\"label\">Bold</div>\n </sp-button>\n <sp-button quiet onClick={() => document.execCommand('underline')}>\n <div slot=\"icon\">\n <underline-icon></underline-icon>\n </div>\n <div slot=\"label\">Underline</div>\n </sp-button>\n <sp-button quiet onClick={() => document.execCommand('italic')}>\n <div slot=\"icon\">\n <italic-icon></italic-icon>\n </div>\n <div slot=\"label\">Italic</div>\n </sp-button>\n </div>\n </div>\n <div class={'buttons'}>\n <sp-button onClick={this.sendComposer} class=\"send\">\n Send\n </sp-button>\n <sp-button onClick={this.closeComposer} class=\"close\">\n Close\n </sp-button>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-composer2.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-composer/nylas-composer.scss?tag=nylas-composer&encapsulation=shadow","src/components/mailbox/nylas-composer/nylas-composer.tsx"],"sourcesContent":[":host {\n display: grid;\n color: var(--nylas-color-primary-900);\n}\n\n.editor {\n position: relative;\n display: block;\n max-height: 300px;\n overflow: auto;\n\n padding: 1rem;\n\n border: 1px solid var(--nylas-color-primary-300);\n\n blockquote {\n visibility: hidden;\n overflow: hidden;\n position: relative;\n transition: height 0.3s ease;\n margin: 0;\n }\n\n blockquote::before {\n content: '...';\n visibility: visible;\n opacity: 1;\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--nylas-color-primary-300);\n width: 20px;\n text-align: center;\n color: var(--nylas-color-primary-800);\n vertical-align: middle;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: center;\n cursor: pointer;\n }\n\n .collapsed {\n height: 20px;\n }\n\n .expanded {\n visibility: visible;\n opacity: 1;\n height: auto; /* Height to fit the content /\n margin: 0px 0px 0px 0.8ex;\n border-left: 1px solid var(--nylas-color-primary-300);\n padding-left: 1rem;\n }\n\n .expanded::before {\n display: none; / Hide the '...' when content is expanded /\n }\n}\n\n.buttons {\n display: flex;\n\n margin-top: 1rem;\n\n justify-content: space-between;\n\n sp-button {\n border-radius: var(--nylas-border-radius);\n background-color: var(--nylas-color-primary-400);\n color: var(--nylas-color-primary-900);\n fill: var(--nylas-color-primary-900);\n\n &:hover {\n background-color: var(--nylas-color-primary-500);\n }\n\n &:disabled {\n background-color: var(--nylas-color-primary-200);\n color: var(--nylas-color-primary-600);\n cursor: not-allowed;\n }\n\n & chevron-icon {\n display: inline-block;\n }\n }\n\n .close {\n justify-self: end;\n }\n}\n\n.toolbar {\n position: absolute;\n display: none;\n background-color: var(--nylas-color-primary-200);\n border-radius: var(--nylas-border-radius);\n z-index: 1;\n\n sp-button {\n border: 0;\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Element, Prop, Watch, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'nylas-composer',\n styleUrl: 'nylas-composer.scss',\n shadow: true,\n})\nexport class NylasComposer {\n /\n The host element\n /\n @Element() readonly host!: HTMLElement;\n\n /\n The message to reply to or forward\n /\n @Prop() readonly message?: Message;\n\n /\n The view email element\n /\n @Prop() readonly viewEmailElement?: HTMLNylasViewEmailElement \| null;\n\n /\n Fired when the composer is closed\n /\n @Event() readonly close!: EventEmitter<MouseEvent>;\n\n /\n Fired when the send button is clicked\n /\n @Event() readonly send!: EventEmitter<{\n message: Message;\n replyBody: string;\n }>;\n\n /\n The editor element\n /\n private editorEl?: HTMLDivElement;\n\n /\n The toolbar element\n /\n private toolbarEl?: HTMLDivElement;\n\n connectedCallback() {}\n\n disconnectedCallback() {\n if (this.editorEl) {\n this.editorEl.innerHTML = '';\n }\n }\n\n componentWillLoad() {}\n\n async componentDidLoad() {\n if (this.message) {\n this.watchBody(this.message);\n }\n\n if (!this.editorEl) {\n debug('[connectedCallback] no editor element');\n return;\n }\n\n if (!this.toolbarEl) {\n debug('[connectedCallback] no toolbar element');\n return;\n }\n\n const editorEl = this.editorEl;\n const toolbarEl = this.toolbarEl;\n\n // On highlight, show the toolbar\n editorEl.addEventListener('mouseup', _ => {\n interface ShadowRootWithSelection extends ShadowRoot {\n getSelection(): Selection \| null;\n }\n\n const selection: Selection \| null = (this.host.shadowRoot as ShadowRootWithSelection)?.getSelection();\n if (!selection) {\n debug('no selection');\n return;\n }\n\n // Get range\n const range = selection.getRangeAt(0);\n\n // Get text selection\n const text = selection.toString();\n if (!text) {\n toolbarEl.style.display = 'none';\n return;\n }\n\n // Find .message-body in the editor\n const messageBody = editorEl.querySelector('.message-body');\n if (!messageBody) {\n debug('no message body');\n return;\n }\n\n // Get commonAncestorContainer\n const foundNode = range.commonAncestorContainer;\n\n // Get rect\n const foundElement = foundNode.parentElement;\n\n // If we didn't find the text, then don't show the toolbar\n if (!foundElement) {\n return;\n }\n\n // Get the bounding rect of the message body\n const messageBodyRect = messageBody.getBoundingClientRect();\n debug('messageBodyRect', { messageBodyRect });\n\n const foundRect = foundElement.getBoundingClientRect();\n debug('foundRect', { foundRect });\n\n // Find the text position within the found node\n // without using document.createRange()\n\n // Get the text node\n const textNode = foundElement.childNodes[0];\n\n // Get the text content\n const textContent = textNode.textContent \|\| '';\n\n // Get the text position\n const textPosition = textContent.indexOf(text);\n\n // Calcualte the font width\n const fontSize = window.getComputedStyle(foundElement).fontSize;\n const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);\n\n // Top\n const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;\n const left = textPosition (1 / fontSizeNumber) * 100;\n\n // Position the toolbar\n toolbarEl.style.top = `${top}px`;\n toolbarEl.style.left = `${left}px`;\n toolbarEl.style.display = 'block';\n });\n }\n\n @Watch('message')\n watchBody(newMessage: Message) {\n if (!this.editorEl) {\n debug('no editor element');\n return;\n }\n\n // Find .message-body elements and remove them\n this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());\n\n // Create a container for the body of the reply\n const messageBody = document.createElement('div');\n messageBody.classList.add('message-body');\n\n // Add an empty paragraph to the reply body\n const emptyParagraph = document.createElement('p');\n emptyParagraph.innerHTML = ' ';\n messageBody.appendChild(emptyParagraph);\n\n // Also add a break to separate the reply from the rest of the email\n const br = document.createElement('br');\n messageBody.appendChild(br);\n\n // Append a reply header\n const replyText = document.createElement('div');\n replyText.classList.add('reply-text');\n replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from\n ?.map(from => from.name \|\| from.email)\n .join(', ')}> wrote:`;\n messageBody.appendChild(replyText);\n\n // If we have a reply body, separate the contents with a horizontal rule\n if (newMessage.body) {\n // For the reply HTML, we want to wrap the contents in a custom element\n // with a shadow root. This will allow us to style the contents of the\n // reply without affecting the rest of the page.\n\n // First convert the HTML string to a DOM element\n const replyElement = document.createElement('html');\n replyElement.innerHTML = newMessage.body;\n\n const replyContainer = document.createElement('blockquote');\n replyContainer.classList.add('collapsed');\n replyContainer.classList.add('gmail_quote');\n\n // Now add the reply element to the container\n replyContainer.innerHTML = replyElement.innerHTML;\n\n messageBody.appendChild(replyContainer);\n\n debug('replyContainer', { replyContainer });\n }\n\n // Add the message body to the editor\n this.editorEl.appendChild(messageBody);\n\n this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {\n blockquote.addEventListener(\n 'click',\n function (event) {\n event.preventDefault();\n const el = event.target as HTMLElement;\n el.classList.remove('collapsed');\n el.classList.add('expanded');\n },\n { once: true },\n );\n });\n\n // Focus the editor\n this.editorEl.focus();\n }\n\n private closeComposer = (event: MouseEvent) => {\n this.close.emit(event);\n };\n\n private sendComposer = (event: MouseEvent) => {\n if (!this.editorEl) {\n debug('no editor element');\n return;\n }\n\n const messageBody = this.editorEl.querySelector('.message-body');\n if (!messageBody) {\n debug('no message body');\n return;\n }\n\n // Send the message\n if (this.message) {\n this.send.emit({\n message: this.message,\n replyBody: messageBody.querySelector('.message-body')?.innerHTML \|\| '',\n });\n\n // Close the composer\n this.close.emit(event);\n\n // Clear the editor\n this.editorEl.innerHTML = '';\n }\n };\n\n render() {\n return (\n <Host>\n <sp-theme scale=\"medium\" color=\"dark\">\n <div class=\"editor\" contentEditable={true} ref={r => (this.editorEl = r)}>\n <div class=\"toolbar\" ref={r => (this.toolbarEl = r)} contentEditable={false}>\n <sp-button quiet onClick={() => document.execCommand('bold')}>\n <div slot=\"icon\">\n <bold-icon></bold-icon>\n </div>\n <div slot=\"label\">Bold</div>\n </sp-button>\n <sp-button quiet onClick={() => document.execCommand('underline')}>\n <div slot=\"icon\">\n <underline-icon></underline-icon>\n </div>\n <div slot=\"label\">Underline</div>\n </sp-button>\n <sp-button quiet onClick={() => document.execCommand('italic')}>\n <div slot=\"icon\">\n <italic-icon></italic-icon>\n </div>\n <div slot=\"label\">Italic</div>\n </sp-button>\n </div>\n </div>\n <div class={'buttons'}>\n <sp-button onClick={this.sendComposer} class=\"send\">\n Send\n </sp-button>\n <sp-button onClick={this.closeComposer} class=\"close\">\n Close\n </sp-button>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}