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

@nylas/web-elements 1.1.5 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (201) hide show

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

	@@ -1 +1 @@
1	- {"file":"nylas-cancel-booking-form2.js","mappings":"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","names":["i18next"],"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 @include default-css-variables;\n display: block;\n width: 400px;\n font-family: var(--nylas-font-family);\n}\n\n.nylas-cancel-booking-form {\n form {\n width: 100%;\n }\n\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 padding-bottom: 1.25rem;\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\n.footer {\n display: grid;\n grid-template-columns: 1fr 1fr;\n width: 100%;\n padding-top: 1.25rem;\n gap: 1rem;\n border-top: 1px solid var(--nylas-base-200);\n margin-top: 1.25rem;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { NylasEvent } from '@/common/types';\n\n/*\n The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request).\n * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided.\n \n @part ncbf - The cancel booking form container.\n * @part ncbf__icon - The calendar icon.\n * @part ncbf__title - The title of the cancel booking form.\n * @part ncbf__description - The description of the cancel booking form.\n * @part ncbf__reason-textarea - The reason textarea.\n * @part ncbf__button-cta - The cancel booking form CTA button.\n * @part ncbf__button-outline - The cancel booking form outline button.\n * @part ncbf__card - The cancel booking form card.\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 The booking ID to reject.\n /\n @Prop() readonly rejectBookingId?: string;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n @standalone\n * The config settings.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The event info.\n /\n @Prop() readonly eventInfo?: NylasEvent;\n\n /\n @standalone\n * The loading state.\n /\n @Prop() readonly isLoading?: boolean;\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<{\n bookingId: string;\n action: 'reject' \| 'cancel';\n reason: string;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /\n This event is only for triggering the validation on the text area for cancellation reason. This is for internal purposes only.\n /\n @Event() readonly triggerValidation!: EventEmitter<{}>;\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 @State() cancellationPolicy: string = this.configSettings?.scheduler?.cancellation_policy \|\| 'Your current timeslot will become available to others.';\n\n @Watch('configSettings')\n configSettingsChangedHandler(newValue: ConfigSettings) {\n this.cancellationPolicy = newValue?.scheduler?.cancellation_policy \|\| 'Your current timeslot will become available to others.';\n }\n\n connectedCallback() {\n debug(`[nylas-cancel-booking-form] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancel-booking-form] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancel-booking-form] Component did load`);\n if (!this.cancelBookingId) {\n console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n }\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancel-booking-form] Component disconnected`);\n }\n\n private handleGoBackClicked = () => {\n this.goBackButtonClicked.emit();\n };\n\n private handleSubmitCancelBooking = (event: Event) => {\n this.triggerValidation.emit({});\n event.preventDefault();\n if (!this.cancellationReason) {\n this.cancellationError = i18next.t('cancellationErrorMessage');\n this.cancelBookingFormError.emit({ title: i18next.t('cancelBokingFormError'), description: i18next.t('cancellationErrorMessage') });\n return;\n }\n\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n if (this.selectedTimeslot && minCancellationNotice) {\n const startTime = new Date(this.selectedTimeslot?.start_time);\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventError.emit({\n error: {\n title: i18next.t('cancellationErrorTitle'),\n message: i18next.t('minimumCancellationNoticeErrorMessage', { minCancellationNotice }),\n },\n });\n return;\n }\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 if (this.cancelBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, action: 'cancel', reason: this.cancellationReason, errorHandler });\n } else if (this.rejectBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.rejectBookingId, action: 'reject', reason: this.cancellationReason, errorHandler });\n }\n };\n\n @Listen('nylasFormInputChanged')\n handleNylasFormInputChanged(event: CustomEvent<{ value: string; name: string; error: string; label: string; type: string }>) {\n this.triggerValidation.emit({});\n if (event.detail.name === 'cancel-reason') {\n this.cancellationReason = event.detail.value;\n this.cancellationError = event.detail.error;\n }\n }\n\n @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancel-booking-form',\n stateToProps: new Map([\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.eventInfo', 'eventInfo'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.cancelBookingId', 'cancelBookingId'],\n ['scheduler.rejectBookingId', 'rejectBookingId'],\n ]),\n eventToProps: {\n cancelBookingFormSubmitted: async (\n event: CustomEvent<{ bookingId: string; action: 'reject' \| 'cancel'; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { action, errorHandler } = event.detail;\n if (action === 'cancel') {\n const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId, event.detail.reason);\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n } else if (action === 'reject') {\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'cancelled',\n reason: event.detail.reason,\n });\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n }\n },\n goBackButtonClicked: async (event: CustomEvent<void>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'goBackButtonClicked', event.detail);\n nylasSchedulerConnector.scheduler.goBack();\n },\n cancelBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookedEventError', event.detail);\n },\n cancelBookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncbf\">\n <div class=\"nylas-cancel-booking-form\" part=\"ncbf__card\">\n <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncbf__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncbf__title\">\n {i18next.t('cancelBookingTitle')}\n </h3>\n <div class=\"nylas-cancel-booking-form__description\" part=\"ncbf__description\">\n {!this.configSettings?.scheduler?.cancellation_policy ? `${i18next.t('cancelBookingMessage')}` : this.cancellationPolicy}\n </div>\n <form onSubmit={this.handleSubmitCancelBooking}>\n <textarea-component\n id=\"cancel-reason\"\n name=\"cancel-reason\"\n required={true}\n label={i18next.t('reasonForCancellation')}\n class={this.cancellationError ? 'error' : ''}\n part=\"ncbf__reason-textarea\"\n defaultValue={this.cancellationReason}\n ></textarea-component>\n <div class=\"footer\">\n <button-component variant={'destructive'} class=\"cancel\" type=\"submit\" part=\"ncbf__button-cta\" disabled={this.isLoading}>\n {i18next.t('cancelBookingButton')}\n </button-component>\n {!!this.eventInfo && (\n <button-component variant={'basic'} class=\"back\" part=\"ncbf__button-outline\" onClick={this.handleGoBackClicked}>\n {i18next.t('goBackButton')}\n </button-component>\n )}\n </div>\n </form>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-cancel-booking-form2.js","mappings":"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","names":["i18next"],"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 font-family: var(--nylas-font-family);\n}\n\n.nylas-cancel-booking-form {\n form {\n width: 100%;\n }\n\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: 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 padding-bottom: 1.25rem;\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\n.footer {\n display: grid;\n grid-template-columns: 1fr 1fr;\n width: 100%;\n padding-top: 1.25rem;\n gap: 1rem;\n border-top: 1px solid var(--nylas-base-200);\n margin-top: 1.25rem;\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse, ThemeConfig, Timeslot } from '@nylas/core';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { NylasEvent } from '@/common/types';\n\n/*\n The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request).\n * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided.\n \n @part ncbf - The cancel booking form container.\n * @part ncbf__icon - The calendar icon.\n * @part ncbf__title - The title of the cancel booking form.\n * @part ncbf__description - The description of the cancel booking form.\n * @part ncbf__reason-textarea - The reason textarea.\n * @part ncbf__button-cta - The cancel booking form CTA button.\n * @part ncbf__button-outline - The cancel booking form outline button.\n * @part ncbf__card - The cancel booking form card.\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 host element.\n * Used to manage the host element of the provider.\n /\n @Element() private host!: HTMLNylasCancelBookingFormElement;\n\n /\n The booking ID to cancel.\n /\n @Prop() readonly cancelBookingId?: string;\n\n /\n The booking ID to reject.\n /\n @Prop() readonly rejectBookingId?: string;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n @standalone\n * The config settings.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The event info.\n /\n @Prop() readonly eventInfo?: NylasEvent;\n\n /\n @standalone\n * The loading state.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /\n 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<{\n bookingId: string;\n action: 'reject' \| 'cancel';\n reason: string;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /\n This event is only for triggering the validation on the text area for cancellation reason. This is for internal purposes only.\n /\n @Event() readonly triggerValidation!: EventEmitter<{}>;\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 @State() cancellationPolicy: string = this.configSettings?.scheduler?.cancellation_policy \|\| 'Your current timeslot will become available to others.';\n\n @Watch('configSettings')\n configSettingsChangedHandler(newValue: ConfigSettings) {\n this.cancellationPolicy = newValue?.scheduler?.cancellation_policy \|\| 'Your current timeslot will become available to others.';\n }\n\n connectedCallback() {\n debug(`[nylas-cancel-booking-form] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancel-booking-form] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancel-booking-form] Component did load`);\n if (!this.cancelBookingId) {\n console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancel-booking-form] Component disconnected`);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleGoBackClicked = () => {\n this.goBackButtonClicked.emit();\n };\n\n private handleSubmitCancelBooking = (event: Event) => {\n this.triggerValidation.emit({});\n event.preventDefault();\n if (!this.cancellationReason) {\n this.cancellationError = i18next.t('cancellationErrorMessage');\n this.cancelBookingFormError.emit({ title: i18next.t('cancelBokingFormError'), description: i18next.t('cancellationErrorMessage') });\n return;\n }\n\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n if (this.selectedTimeslot && minCancellationNotice) {\n const startTime = new Date(this.selectedTimeslot?.start_time);\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventError.emit({\n error: {\n title: i18next.t('cancellationErrorTitle'),\n message: i18next.t('minimumCancellationNoticeErrorMessage', { minCancellationNotice }),\n },\n });\n return;\n }\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 if (this.cancelBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, action: 'cancel', reason: this.cancellationReason, errorHandler });\n } else if (this.rejectBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.rejectBookingId, action: 'reject', reason: this.cancellationReason, errorHandler });\n }\n };\n\n @Listen('nylasFormInputChanged')\n handleNylasFormInputChanged(event: CustomEvent<{ value: string; name: string; error: string; label: string; type: string }>) {\n this.triggerValidation.emit({});\n if (event.detail.name === 'cancel-reason') {\n this.cancellationReason = event.detail.value;\n this.cancellationError = event.detail.error;\n }\n }\n\n @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancel-booking-form',\n stateToProps: new Map([\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.eventInfo', 'eventInfo'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.cancelBookingId', 'cancelBookingId'],\n ['scheduler.rejectBookingId', 'rejectBookingId'],\n ]),\n eventToProps: {\n cancelBookingFormSubmitted: async (\n event: CustomEvent<{ bookingId: string; action: 'reject' \| 'cancel'; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { action, errorHandler } = event.detail;\n if (action === 'cancel') {\n const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId, event.detail.reason);\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n } else if (action === 'reject') {\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'cancelled',\n reason: event.detail.reason,\n });\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n }\n },\n goBackButtonClicked: async (event: CustomEvent<void>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'goBackButtonClicked', event.detail);\n nylasSchedulerConnector.scheduler.goBack();\n },\n cancelBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookedEventError', event.detail);\n },\n cancelBookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);\n },\n },\n localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncbf\">\n <div class=\"nylas-cancel-booking-form\" part=\"ncbf__card\">\n <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncbf__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncbf__title\">\n {i18next.t('cancelBookingTitle')}\n </h3>\n <div class=\"nylas-cancel-booking-form__description\" part=\"ncbf__description\">\n {!this.configSettings?.scheduler?.cancellation_policy ? `${i18next.t('cancelBookingMessage')}` : this.cancellationPolicy}\n </div>\n <form onSubmit={this.handleSubmitCancelBooking}>\n <textarea-component\n id=\"cancel-reason\"\n name=\"cancel-reason\"\n required={true}\n label={i18next.t('reasonForCancellation')}\n class={this.cancellationError ? 'error' : ''}\n part=\"ncbf__reason-textarea\"\n defaultValue={this.cancellationReason}\n ></textarea-component>\n <div class=\"footer\">\n <button-component variant={'destructive'} class=\"cancel\" type=\"submit\" part=\"ncbf__button-cta\" disabled={this.isLoading}>\n {i18next.t('cancelBookingButton')}\n </button-component>\n {!!this.eventInfo && (\n <button-component variant={'basic'} class=\"back\" part=\"ncbf__button-outline\" onClick={this.handleGoBackClicked}>\n {i18next.t('goBackButton')}\n </button-component>\n )}\n </div>\n </form>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './button-component2.js';
 import { d as defineCustomElement$2 } from './calendar-cancel.js';
 import { d as defineCustomElement$1 } from './loading.js';
-const nylasCancelledEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-cancelled-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-cancelled-event-card{width:inherit}}.nylas-cancelled-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-cancelled-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-cancelled-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-cancelled-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
+const nylasCancelledEventCardCss = ":host{display:block}.nylas-cancelled-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-cancelled-event-card{width:inherit}}.nylas-cancelled-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-cancelled-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-cancelled-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-cancelled-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -37,6 +37,7 @@ const NylasCancelledEventCard = proxyCustomElement(class NylasCancelledEventCard
             this.closeCancelEventCardClicked.emit({ errorHandler });
         };
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.cancelledEventInfo = undefined;
         this.isClosing = false;
     }
@@ -51,16 +52,26 @@ const NylasCancelledEventCard = proxyCustomElement(class NylasCancelledEventCard
         if (!this.cancelledEventInfo) {
             console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, "cancelledEventInfo" prop is required.`);
         }
+        this.applyThemeConfig(this.themeConfig);
     }
     disconnectedCallback() {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: 'e5e3ac32d965a7d9e9bc0bb8bbd774625ff07d7b', part: "ncec" }, h("div", { key: 'e4ef634f512035b0e36012009a49d4e3e9845973', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '8a739422bcf542b9b8c97c0a56032b4393755d5d', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'cd4aa557789c4487f6ce7ef70337a4af83e4d3be' })), h("h3", { key: '48aff2d9672f9d7e24b61ec5fa3b21ec63345f54', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, instance.t('bookingCancelledTitle'), "!"), h("div", { key: '0c861a46988ad3071850dbe61f8344b5da6cd6d6', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, instance.t('bookingCancelledMessage'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'd9801695af5953536439a188c7e1d8d324a2fdbd', class: "nylas-cancelled-event-card__cta" }, h("button-component", { key: 'b8c463a0ef0c36a4c28b46a3ad0aaa7f5b8f2efc', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
+        return (h(Host, { key: '4f1f7bf3b9d6376f5112b5f71b33bdce9bf59a19', part: "ncec" }, h("div", { key: 'f485f11c84c501c1d56cac844ccc39fe09b758fb', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '3ac26f67a660d1075b3d5f674b745db0c59125a2', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '4dc83661715f1525b3a5a45d69e336d7f0f9dbf1' })), h("h3", { key: '59446c3be2e213ca71124be2d33cae8c077b451d', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, instance.t('bookingCancelledTitle'), "!"), h("div", { key: '6486085d435d558816573e6d2aa3840030707af2', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, instance.t('bookingCancelledMessage'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'e7ebffeb313b39f860df4776fe802beddc9eb86b', class: "nylas-cancelled-event-card__cta" }, h("button-component", { key: '35593203c58b837db2b7ce98d8cf214658b2e8a0', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
     }
+    get host() { return this; }
     static get style() { return nylasCancelledEventCardCss; }
 }, [1, "nylas-cancelled-event-card", {
         "configSettings": [16],
+        "themeConfig": [8, "theme-config"],
         "cancelledEventInfo": [16],
         "isClosing": [32]
     }]);
@@ -80,6 +91,7 @@ __decorate([
                 debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

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,~~mvDAAmvD~~;;;;;;;;;;;;;;;;~~MCuBzwD~~,uBAAuB;;;;;;;~~QA8C1B~~,uBAAkB,GAAG;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB,CAAC;YACF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;SACzD,CAAC~~;;;yBAtC4B~~,KAAK;;IAYnC,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;QACzD,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,uGAAuG,CAAC,CAAC;SACvH;~~KACF~~;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;~~IA6BD~~,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,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,IAC7DA,QAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,MAChC,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,IAC1EA,QAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,OAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,kBAAkB,MAC9F,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,yEAAkB,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACrH,IAAI,CAAC,SAAS,GAAG,GAAGA,QAAO,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,GAAG,GAAGA,QAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CACnE,CACf,CACF,CACD,EACP;KACH~~;;;;;;;~~AArBD;~~IAlBC~~,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC,CAAC;QACvE,YAAY,EAAE;YACZ,2BAA2B,EAAE,OAAO,CAA+E,EAAE,uBAAgD;gBACnK,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;gBAErE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;YACD,uBAAuB,EAAE,OAAO,KAA+C,EAAE,wBAAiD;gBAChI,KAAK,CAAC,4BAA4B,EAAE,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC9E;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["i18next"],"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\n.nylas-cancelled-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n width: 400px;\n\n @media #{$mobile} {\n width: inherit;\n }\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\nbutton-component {\n width: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\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 @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n The participant's name who booked the event / is logged in.\n /\n @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n /\n Closing state of the cancelled event card button.\n /\n @State() isClosing: boolean = false;\n\n /\n This event is fired when the close button is clicked on the cancelled event card.\n /\n @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs.\n */\n @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\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 if (!this.cancelledEventInfo) {\n console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, \"cancelledEventInfo\" prop is required.`);\n }\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancelled-event-card] Component disconnected`);\n }\n\n private handleCloseClicked = () => {\n this.isClosing = true;\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.cancelledEventCardError.emit(error);\n this.isClosing = false;\n };\n this.closeCancelEventCardClicked.emit({ errorHandler });\n };\n\n @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancelled-event-card',\n stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n eventToProps: {\n closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n const result = await nylasschedulerconnector.scheduler.resetCancel();\n\n const { errorHandler } = _.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n cancelledEventCardError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasschedulerconnector: NylasSchedulerConnector) => {\n debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\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 {i18next.t('bookingCancelledTitle')}!\n </h3>\n <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n {i18next.t('bookingCancelledMessage')} {this.configSettings?.organizer?.name \|\| 'the participants'}.\n </div>\n <div class=\"nylas-cancelled-event-card__cta\">\n <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-cancelled-event-card2.js","mappings":"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","names":["i18next"],"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}\n\n.nylas-cancelled-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n width: 400px;\n\n @media #{$mobile} {\n width: inherit;\n }\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: 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\nbutton-component {\n width: 100%;\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\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 host element.\n * Used to manage the host element of the provider.\n /\n @Element() private host!: HTMLNylasCancelledEventCardElement;\n\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /\n The participant's name who booked the event / is logged in.\n /\n @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n /\n Closing state of the cancelled event card button.\n /\n @State() isClosing: boolean = false;\n\n /\n This event is fired when the close button is clicked on the cancelled event card.\n /\n @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs.\n */\n @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\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 if (!this.cancelledEventInfo) {\n console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, \"cancelledEventInfo\" prop is required.`);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancelled-event-card] Component disconnected`);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleCloseClicked = () => {\n this.isClosing = true;\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.cancelledEventCardError.emit(error);\n this.isClosing = false;\n };\n this.closeCancelEventCardClicked.emit({ errorHandler });\n };\n\n @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancelled-event-card',\n stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n eventToProps: {\n closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n const result = await nylasschedulerconnector.scheduler.resetCancel();\n\n const { errorHandler } = _.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n cancelledEventCardError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasschedulerconnector: NylasSchedulerConnector) => {\n debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);\n },\n },\n localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\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 {i18next.t('bookingCancelledTitle')}!\n </h3>\n <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n {i18next.t('bookingCancelledMessage')} {this.configSettings?.organizer?.name \|\| 'the participants'}.\n </div>\n <div class=\"nylas-cancelled-event-card__cta\">\n <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './button-component2.js';
 import { d as defineCustomElement$2 } from './calendar-cancel.js';
 import { d as defineCustomElement$1 } from './loading.js';
-const nylasConfirmedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
+const nylasConfirmedEventCardCss = ":host{display:block}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -37,6 +37,7 @@ const NylasConfirmedEventCard = proxyCustomElement(class NylasConfirmedEventCard
             this.closeConfirmEventCardClicked.emit({ errorHandler });
         };
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.confirmedEventInfo = undefined;
         this.isClosing = false;
     }
@@ -51,16 +52,26 @@ const NylasConfirmedEventCard = proxyCustomElement(class NylasConfirmedEventCard
         if (!this.confirmedEventInfo) {
             console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, "confirmedEventInfo" prop is required.`);
         }
+        this.applyThemeConfig(this.themeConfig);
     }
     disconnectedCallback() {
         debug(`[nylas-confirmed-event-card] Component disconnected`);
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: 'a5fbf79c6b7f27046b599c16d231226ff9c88f84', part: "ncec" }, h("div", { key: '06c6f5fa4e75d9ce01dc9145259bf4bfddf33624', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '11a58aa7dba6da706cd35791c58442b022f97939', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '752da0991cdcfa12dc9c7dc1020ea9388f11c30e' })), h("h3", { key: '238934bc1f8bcb137e6e33eb66afb5bee01749b7', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: '3a3d8ad8302ad54b528c37f0eb25d12590bb4f0d', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '49c69f2f9c01e4e775cb8caadbca213424e0a952', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: 'e6e75c57f294d688a108df09ffc9daf849ef6319', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
+        return (h(Host, { key: '089de1c1ba1b2319674b97aad4946fb8306ab4fe', part: "ncec" }, h("div", { key: '83c9b3f7904b7b74d38202c7d62891813754be93', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: 'e6ebbc07f8ea697f4e1f794bb8ddddc5166db33d', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'eb0eb353b63bc5a8b55644a17f16c8566f3a7b36' })), h("h3", { key: 'c05937028fd84a55b3b0b1de4cd36fb0b0c6b563', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: 'e9ca9f67f46785d40e769ff96695001d56386dad', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'bea8adea56d3dcdb2ce578ad25f08bc562b67ede', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '6bed94150369d92e129fe62c4b6c292e37e26a34', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
     }
+    get host() { return this; }
     static get style() { return nylasConfirmedEventCardCss; }
 }, [1, "nylas-confirmed-event-card", {
         "configSettings": [16],
+        "themeConfig": [8, "theme-config"],
         "confirmedEventInfo": [16],
         "isClosing": [32]
     }]);
@@ -77,6 +88,7 @@ __decorate([
                 }
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

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

	@@ -1 +1 @@
1	- {"file":"nylas-confirmed-event-card2.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,~~mvDAAmvD~~;;;;;;;;;;;;;;;;~~MCuBzwD~~,uBAAuB;;;;;;;~~QA8C1B~~,uBAAkB,GAAG;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB,CAAC;YACF,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;SAC1D,CAAC~~;;;yBAtC4B~~,KAAK;;IAYnC,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;QACzD,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,uGAAuG,CAAC,CAAC;SACvH;~~KACF~~;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;~~IA0BD~~,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,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,IAC7DA,QAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,MAClC,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,IAC1EA,QAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,OAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,kBAAkB,MACpG,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,yEAAkB,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACrH,IAAI,CAAC,SAAS,GAAG,GAAGA,QAAO,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,GAAG,GAAGA,QAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CACnE,CACf,CACF,CACD,EACP;KACH~~;;;;;;;~~AArBD;~~IAfC~~,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC,CAAC;QACvE,YAAY,EAAE;YACZ,4BAA4B,EAAE,OAAO,CAA+E,EAAE,uBAAgD;gBACpK,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;gBAEtE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClC,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;;;;qDAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n ~~@include default-css-variables;\n~~}\n\n.nylas-confirmed-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n width: 400px;\n\n @media #{$mobile} {\n width: inherit;\n }\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-confirmed-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-confirmed-event-description {\n font-size: 16px;\n font-weight: 500;\n color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-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-confirmed-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\nbutton-component {\n width: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\n\n/*\n The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n \n @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n /\n@Component({\n tag: 'nylas-confirmed-event-card',\n styleUrl: 'nylas-confirmed-event-card.scss',\n shadow: true,\n})\nexport class NylasConfirmedEventCard {\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n The participant's name who booked the event / is logged in.\n /\n @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n /\n Closing state of the confirmed event card button.\n /\n @State() isClosing: boolean = false;\n\n /\n This event is fired when the close button is clicked on the confirmed event card.\n /\n @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs.\n */\n @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n connectedCallback() {\n debug(`[nylas-confirmed-event-card] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-confirmed-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-confirmed-event-card] Component did load`);\n if (!this.confirmedEventInfo) {\n console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n }\n }\n\n disconnectedCallback() {\n debug(`[nylas-confirmed-event-card] Component disconnected`);\n }\n\n private handleCloseClicked = () => {\n this.isClosing = true;\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmedEventCardError.emit(error);\n this.isClosing = false;\n };\n this.closeConfirmEventCardClicked.emit({ errorHandler });\n };\n\n @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-confirmed-event-card',\n stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n eventToProps: {\n closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n const { errorHandler } = _.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 <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n {i18next.t('confirmedEventCardTitle')}!\n </h3>\n <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name \|\| 'the participants'}.\n </div>\n <div class=\"nylas-confirmed-event-card__cta\">\n <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-confirmed-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n}\n\n.nylas-confirmed-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n width: 400px;\n\n @media #{$mobile} {\n width: inherit;\n }\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: 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-confirmed-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-confirmed-event-description {\n font-size: 16px;\n font-weight: 500;\n color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-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-confirmed-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\nbutton-component {\n width: 100%;\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/*\n The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n \n @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n /\n@Component({\n tag: 'nylas-confirmed-event-card',\n styleUrl: 'nylas-confirmed-event-card.scss',\n shadow: true,\n})\nexport class NylasConfirmedEventCard {\n /\n The host element.\n * Used to manage the host element of the provider.\n /\n @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /\n The participant's name who booked the event / is logged in.\n /\n @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n /\n Closing state of the confirmed event card button.\n /\n @State() isClosing: boolean = false;\n\n /\n This event is fired when the close button is clicked on the confirmed event card.\n /\n @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs.\n */\n @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n connectedCallback() {\n debug(`[nylas-confirmed-event-card] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-confirmed-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-confirmed-event-card] Component did load`);\n if (!this.confirmedEventInfo) {\n console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n disconnectedCallback() {\n debug(`[nylas-confirmed-event-card] Component disconnected`);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleCloseClicked = () => {\n this.isClosing = true;\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmedEventCardError.emit(error);\n this.isClosing = false;\n };\n this.closeConfirmEventCardClicked.emit({ errorHandler });\n };\n\n @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-confirmed-event-card',\n stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n eventToProps: {\n closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n const { errorHandler } = _.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n },\n localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\n <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n {i18next.t('confirmedEventCardTitle')}!\n </h3>\n <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name \|\| 'the participants'}.\n </div>\n <div class=\"nylas-confirmed-event-card__cta\">\n <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-date-picker2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { u as addDaysToCurrentDate, n as instance, w as getLastDayOfMonth, x as getFirstDayOfMonth, y as isSameDay, z as convertMinutesToHoursAndMinutes, A as translateMonth, B as isSameMonth, a as debug } from './utils.js';
+import { u as addDaysToCurrentDate, n as instance, a as debug, w as getLastDayOfMonth, x as getFirstDayOfMonth, y as isSameDay, z as convertMinutesToHoursAndMinutes, A as translateMonth, B as isSameMonth } from './utils.js';
 import { d as defineCustomElement$3 } from './chevron.js';
 import { d as defineCustomElement$2 } from './clock.js';
 import { d as defineCustomElement$1 } from './person.js';
@@ -1741,7 +1741,7 @@ function ticker(year, month, week, day, hour, minute) {
 const [utcTicks, utcTickInterval] = ticker(utcYear, utcMonth, utcSunday, unixDay, utcHour, utcMinute);
 const [timeTicks, timeTickInterval] = ticker(timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute);
-const nylasDatePickerCss = ":host{display:block;min-height:444px;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
+const nylasDatePickerCss = ":host{display:block;min-height:444px}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1766,6 +1766,7 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
         this.monthChanged = createEvent(this, "monthChanged", 7);
         this.selectableDates = undefined;
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.selectedDate = undefined;
         this.selectedLanguage = undefined;
         this.isLoading = undefined;
@@ -1794,6 +1795,17 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
     connectedCallback() { }
     disconnectedCallback() { }
     componentWillLoad() { }
+    componentDidLoad() {
+        debug(`[nylas-date-picker] Component did load`);
+        this.applyThemeConfig(this.themeConfig);
+    }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     getDates() {
         const lastDayOfMonth = getLastDayOfMonth(this.month);
         const firstDayOfMonth = getFirstDayOfMonth(this.month);
@@ -1823,7 +1835,7 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: '06638094c3e21b094641e5adbf08762b346fc10e', part: "ndp" }, h("div", { key: '370143e471513ab59c49dc369208365e5dcd1865', class: "nylas-date-picker" }, h("div", { key: '9b84a00eada140f2f142dec17a8418854160be87', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'a64fee4f4c6886b31620cdc62de0769e3908b634' }, h("clock-icon", { key: 'e6c4d1cf6fd0b45e9824f26cb4f1a9fd828347d3' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '7568638d6af0fa03f84cf4b32b418c6b4f4df0de', class: 'header flex-row' }, h("h2", { key: '7b656957b240be95038151d5ca2089967b3704cd', part: 'ndp__month-header' }, h("strong", { key: 'cea1b1a9fc986885cb1425075364bb6b97b0d0e2' }, translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'daf2f52ae4ca9e381fefadf53b9bf9f7a2c47987', class: 'pagination' }, h("button", { key: 'e182f6af777a122aaaa323fbada73258fd8bcf90', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: 'a9703cc9a0cbfc72e800f72a56233467bff2e5f9' })), h("button", { key: 'bcafc749f794352746d64974e8e564a5db1125a4', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '5fc036471ed8f1caabe79e8489321070d9b6eae3' })))), h("div", { key: '701d99cc45475a8b9217893bfa56c0fa80f61520', class: 'dates' }, [
+        return (h(Host, { key: 'ffb13b5ab2b96a23232a0e4fce0166cc4e471bc3', part: "ndp" }, h("div", { key: 'd617e1e85082cda56f123b915460161003fba8ad', class: "nylas-date-picker" }, h("div", { key: '8b966e5cfa60ec08da307e7537170adcfc04944b', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'ec8dd18ff022b61ac574c1a0bb4c94c4bd51b643' }, h("clock-icon", { key: '8c0685800081b17f4b118938b106af1e291ded09' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '9c4e5f5aed7d3350f149115236b1be17ee1b77e7', class: 'header flex-row' }, h("h2", { key: 'b30d034da321b0e34e93f41fdeddcd5c6890fc9c', part: 'ndp__month-header' }, h("strong", { key: '2c45a29ba2d99856262c706e626c7dc43b05380b' }, translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'eb086cc81c029c3f2dc12a5c796f4e20e60fef2e', class: 'pagination' }, h("button", { key: 'aefca223118d1e0c4f908ab325743730a5633d0f', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '04e6c8e8dd6fa33805e19a97cc56aff0355bacd1' })), h("button", { key: '912568ecbc76504f9e917042edc7dd41ccfb51fa', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '25efda159f4cd761012ee2143690c37cf9247f66' })))), h("div", { key: '4c0d4d94cce9d758e8dd52d4e29ec27f21410772', class: 'dates' }, [
             instance.t('days.sunday'),
             instance.t('days.monday'),
             instance.t('days.tuesday'),
@@ -1849,6 +1861,7 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
                 }, "aria-lang": date.toLocaleDateString(undefined, { dateStyle: 'full' }), disabled: isDisabled, onClick: () => this.selectDate(date), part: `ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}` }, date.getDate()));
         })))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "configSettings": ["configSettingsChanged"],
         "selectedLanguage": ["selectedLanguageChanged"]
@@ -1857,6 +1870,7 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
 }, [1, "nylas-date-picker", {
         "selectableDates": [16],
         "configSettings": [16],
+        "themeConfig": [8, "theme-config"],
         "selectedDate": [16],
         "selectedLanguage": [1, "selected-language"],
         "isLoading": [4, "is-loading"],
@@ -1888,6 +1902,7 @@ __decorate([
                 debug('nylas-date-picker', 'monthChanged', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),