npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.19.c → 1.1.0-canary.19.d - Mend

@nylas/web-elements 1.1.0-canary.19.c → 1.1.0-canary.19.d

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

package/dist/components/nylas-additional-participants2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-additional-participants2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n margin: 1rem;\n @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n color: var(--nylas-base-nylas-base-900-aaa, #101323);\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; /* 125% /\n margin: 0;\n text-align: left;\n}\n.nylas-additional-participants__subtitle {\n color: var(--nylas-base-600);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; / 142.857% /\n margin: 0.25rem 0px 0px;\n text-align: left;\n}\n.nylas-additional-participants__content {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n padding-top: 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n }\n}\n.nylas-additional-participants__input_wrapper {\n display: flex;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-300);\n button {\n padding: 12px;\n border: none;\n border-left: 1px solid var(--nylas-base-300);\n background: none;\n cursor: pointer;\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n flex: 1;\n display: flex;\n justify-content: space-between;\n &.organizer {\n padding: 12px 16px;\n }\n input {\n border: none;\n outline: none;\n background: none;\n width: 100%;\n }\n input-dropdown {\n width: 100%;\n }\n input-dropdown::part(id_dropdown) {\n width: 100%;\n height: 100%;\n }\n input-dropdown::part(id_dropdown-input) {\n height: 100%;\n border-radius: var(--nylas-border-radius-2x);\n border: none;\n border-top-right-radius: initial;\n border-bottom-right-radius: initial;\n padding-left: 16px;\n }\n}\n\n.nylas-additional-participants__add {\n padding: 12px;\n display: flex;\n align-items: center;\n border: none;\n background: none;\n cursor: pointer;\n span {\n padding: 0 8px;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n }\n &:hover,\n &:active {\n color: var(--nylas-primary);\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, Host, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\n\ntype Participant = {\n name?: string;\n email: string;\n is_valid?: boolean;\n is_organizer: boolean;\n availability?: Availability;\n booking?: Booking;\n};\ntype Availability = {\n calendar_ids: string[];\n};\ntype Booking = {\n calendar_id: string;\n};\n\n/\n The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n \n @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n \n /\n@Component({\n tag: 'nylas-additional-participants',\n styleUrl: 'nylas-additional-participants.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n @Element() host!: HTMLNylasAdditionalParticipantsElement;\n @Prop() name: string = 'participants';\n @Prop() eventParticipants?: Participant[];\n @Prop() participantOptions?: Participant[];\n @AttachInternals() internals!: ElementInternals;\n\n /*\n This event is fired when the selected participants change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\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-additional-participants', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @State() participants: Participant[] = this.eventParticipants ?? [];\n @State() participantsValid: boolean = true;\n connectedCallback() {\n debug('nylas-additional-participants', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-additional-participants', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-additional-participants', 'componentDidLoad');\n this.updateFormValue();\n }\n\n disconnectedCallback() {\n debug('nylas-additional-participants', 'disconnectedCallback');\n }\n\n @Listen('inputOptionChanged')\n onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-additional-participants', 'onInputOptionChanged');\n const index = event.detail.name;\n this.participants[index].email = event.detail.value;\n const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;\n this.participants[index].name = participant?.name \|\| event.detail.value;\n this.participants = [...this.participants];\n this.updateFormValue();\n }\n onParticipantChange(event, index) {\n debug('nylas-additional-participants', 'onParticipantChange');\n this.participants[index].email = event.target.value;\n this.updateFormValue();\n }\n addParticipant() {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n this.updateFormValue();\n }\n removeParticipant(index: number) {\n debug('nylas-additional-participants', 'removeParticipant');\n this.participants = this.participants.filter((_, i) => i !== index);\n this.updateFormValue();\n }\n validate(email, index) {\n debug('nylas-additional-participants', 'validate');\n const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+))\|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])\|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n const valid = regex.test(String(email).toLowerCase());\n this.participants[index].is_valid = valid;\n this.updateFormValue();\n }\n\n updateFormValue() {\n debug('nylas-additional-participants', 'updateFormValue');\n this.internals.setFormValue(JSON.stringify(this.participants), this.name);\n this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });\n }\n\n // Filter out the participants that are already added\n getArrayDifference(array1: Participant[], array2: Participant[]) {\n const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n return filtered.map(participant => {\n return { value: participant.email, label: participant.email };\n });\n }\n\n @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-additional-participants',\n stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <nylas-form-card>\n <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n Additional participants\n </h3>\n <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n Add anyone else who would be joining for this event.\n </p>\n <div slot=\"content\" class=\"nylas-additional-participants__content\">\n <div>\n {this.participants.map((participant, index) => {\n return (\n <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n <div\n part=\"nap__input_wrapper\"\n class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n >\n <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n {participant.is_organizer ? (\n <input\n type=\"text\"\n value={participant.email}\n onInput={e => {\n this.onParticipantChange(e, index);\n }}\n readOnly={participant.is_organizer}\n onBlur={() => this.validate(participant.email, index)}\n />\n ) : (\n <input-dropdown\n name={`${index}`}\n filterable={true}\n inputValue={participant.email}\n options={this.getArrayDifference(this.participantOptions \|\| [], this.participants)}\n />\n )}\n {!participant.is_organizer && (\n <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n <close-icon />\n </button>\n )}\n </div>\n </div>\n </div>\n );\n })}\n </div>\n <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n </button>\n </div>\n </nylas-form-card>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-additional-participants2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n margin: 1rem;\n @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n color: var(--nylas-base-nylas-base-900-aaa, #101323);\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n /* 125% /\n margin: 0;\n text-align: left;\n}\n\n.nylas-additional-participants__subtitle {\n color: var(--nylas-base-600);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n / 142.857% /\n margin: 0.25rem 0px 0px;\n text-align: left;\n}\n\n.nylas-additional-participants__content {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n padding-top: 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n }\n\n .nylas-additional-participants__error {\n color: var(--nylas-error);\n font-size: 14px;\n font-family: var(--nylas-font-family);\n font-weight: 400;\n line-height: 16px;\n margin: 0;\n text-align: left;\n }\n}\n\n.nylas-additional-participants__input_wrapper {\n display: flex;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-300);\n\n &.error {\n border-color: var(--nylas-error);\n }\n\n button {\n padding: 12px;\n border: none;\n border-left: 1px solid var(--nylas-base-300);\n background: none;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n }\n}\n\n.nylas-additional-participants__input_wrapper_organizer {\n background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n flex: 1;\n display: flex;\n justify-content: space-between;\n\n &.organizer {\n padding: 12px 16px;\n }\n\n input {\n border: none;\n outline: none;\n background: none;\n width: 100%;\n }\n\n input-dropdown {\n width: 100%;\n }\n\n input-dropdown::part(id_dropdown) {\n width: 100%;\n height: 100%;\n }\n\n input-dropdown::part(id_dropdown-input) {\n height: 100%;\n border-radius: var(--nylas-border-radius-2x);\n border: none;\n border-top-right-radius: initial;\n border-bottom-right-radius: initial;\n padding-left: 16px;\n }\n}\n\n.nylas-additional-participants__add {\n padding: 12px;\n display: flex;\n align-items: center;\n border: none;\n background: none;\n cursor: pointer;\n\n span {\n padding: 0 8px;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n }\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n}","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\nimport { AdditionalParticipant } from '@nylas/core';\n\ntype Participant = {\n name?: string;\n email: string;\n is_valid?: boolean;\n is_organizer: boolean;\n availability?: Availability;\n booking?: Booking;\n};\ntype Availability = {\n calendar_ids: string[];\n};\ntype Booking = {\n calendar_id: string;\n};\n\n/\n The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n \n @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n \n /\n@Component({\n tag: 'nylas-additional-participants',\n styleUrl: 'nylas-additional-participants.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n @Element() host!: HTMLNylasAdditionalParticipantsElement;\n @Prop() name: string = 'participants';\n @Prop() eventParticipants?: Participant[];\n @Prop() participantOptions?: AdditionalParticipant[];\n @AttachInternals() internals!: ElementInternals;\n @State() participants: Participant[] = this.eventParticipants ?? [];\n @State() participantErrors: { [key: string]: string } = {};\n\n /*\n This event is fired when the selected participants change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\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-additional-participants', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n connectedCallback() {\n debug('nylas-additional-participants', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-additional-participants', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-additional-participants', 'componentDidLoad');\n this.updateFormValue();\n }\n\n disconnectedCallback() {\n debug('nylas-additional-participants', 'disconnectedCallback');\n }\n\n @Listen('inputOptionChanged')\n onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-additional-participants', 'onInputOptionChanged');\n const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/;\n const index = event.detail.name;\n const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n if (!participant && !EMAIL_REGEX.test(event.detail.value)) {\n this.internals.setValidity({ customError: true }, 'Please enter a valid email address');\n this.participantErrors[index] = 'Please enter a valid email address';\n this.participants[index].is_valid = false;\n this.participants = [...this.participants];\n return;\n } else {\n this.participantErrors[index] = '';\n this.participants[index].is_valid = true;\n this.internals.setValidity({});\n }\n this.participants[index].email = event.detail.value;\n this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;\n this.participants[index].name = participant?.name \|\| event.detail.value;\n this.participants = [...this.participants];\n this.updateFormValue();\n }\n onParticipantChange(event, index) {\n debug('nylas-additional-participants', 'onParticipantChange');\n this.participants[index].email = event.target.value;\n this.updateFormValue();\n }\n addParticipant() {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n this.updateFormValue();\n }\n removeParticipant(index: number) {\n debug('nylas-additional-participants', 'removeParticipant');\n this.participants = this.participants.filter((_, i) => i !== index);\n this.updateFormValue();\n }\n validate(email, index) {\n debug('nylas-additional-participants', 'validate');\n const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+))\|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])\|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n const valid = regex.test(String(email).toLowerCase());\n this.participants[index].is_valid = valid;\n this.updateFormValue();\n }\n\n updateFormValue() {\n debug('nylas-additional-participants', 'updateFormValue');\n this.internals.setFormValue(JSON.stringify(this.participants), this.name);\n this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });\n }\n\n // Filter out the participants that are already added\n getArrayDifference(array1: AdditionalParticipant[], array2: Participant[]) {\n const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n return filtered.map(participant => {\n return { value: participant.email, label: participant.email };\n });\n }\n\n @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-additional-participants',\n stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <nylas-form-card>\n <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n Participants\n </h3>\n <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n Add people in your team or organization to join the event.\n </p>\n <div slot=\"content\" class=\"nylas-additional-participants__content\">\n <div>\n {this.participants.map((participant, index) => {\n return (\n <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n <div\n part=\"nap__input_wrapper\"\n class={{\n 'nylas-additional-participants__input_wrapper': true,\n 'nylas-additional-participants__input_wrapper_organizer': participant.is_organizer,\n 'nylas-additional-participants__input_wrapper_invalid': participant.is_valid === false,\n 'error': participant.is_valid === false,\n }}\n >\n <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n {participant.is_organizer ? (\n <input\n type=\"text\"\n value={participant.email}\n onInput={e => {\n this.onParticipantChange(e, index);\n }}\n readOnly={participant.is_organizer}\n onBlur={() => this.validate(participant.email, index)}\n />\n ) : (\n <input-dropdown\n name={`${index}`}\n filterable={true}\n inputValue={participant.email}\n options={this.getArrayDifference(this.participantOptions \|\| [], this.participants)}\n />\n )}\n {!participant.is_organizer && (\n <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n <close-icon />\n </button>\n )}\n </div>\n </div>\n {!participant.is_valid && (\n <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n {this.participantErrors[index]}\n </p>\n )}\n </div>\n );\n })}\n </div>\n <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n </button>\n </div>\n </nylas-form-card>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-api-request.js CHANGED Viewed

@@ -46,6 +46,7 @@ class NylasIdentityRequestWrapper {
             id: idToken.sub,
             email: idToken.email,
             name: idToken.name,
+            provider: idToken.provider,
         };
     }
     async authenticationUrl(authArgs) {

package/dist/components/nylas-api-request.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-api-request.js","mappings":";;~~MAsFa~~,2BAA2B;IAqBtC,YAAY,OAAsB;QAN1B,oBAAe,GAAe,EAAE,CAAC;QAOvC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;KACxB;IAQD,gBAAgB,CAAC,OAAe;QAC9B,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;IAWD,MAAM,OAAO,CAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAoB;QAChE,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,IAAI,EAAE,EAAE;gBAC7D,MAAM;gBACN,OAAO,EAAE,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,SAAS;gBACnD,IAAI;gBACJ,IAAI,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,aAAa,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC;aACjG,CAAC,CAAC;YAIH,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;gBACnC,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;aAC1C;YAED,OAAO,YAAY,CAAC,QAAa,CAAC,CAAC;SACpC;QAAC,OAAO,KAAU,EAAE;YACnB,IAAI,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,wBAAwB,CAAC,EAAE;gBACpD,YAAY,GAAG,sDAAsD,CAAC;gBACtE,UAAU,CAAC;oBACT,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;oBACjC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;oBAChC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;iBAC1B,EAAE,IAAI,CAAC,CAAC;aACV;YACD,OAAO,YAAY,CAAC,IAAS,EAAE;gBAC7B,OAAO,EAAE,YAAY;aACtB,CAAC,CAAC;SACJ;KACF;IAOD,MAAM,WAAW;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAC/E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC;SACb;QAED,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,GAAG;YACf,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,IAAI,EAAE,OAAO,CAAC,IAAI;~~SACnB~~,CAAC;KACH;IAOD,MAAM,iBAAiB,CAAC,QAAmB;QACzC,MAAM,QAAQ,GAAG,QAAQ,EAAE,QAAQ,IAAI,QAAQ,CAAC;QAChD,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;QAClF,IAAI,IAAI,GAAG,WAAW,IAAI,EAAE,CAAC;QAE7B,IAAI,QAAQ,EAAE;YACZ,IAAI,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,EAAE,CAAC;SACjC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;IAMD,kBAAkB,CAAC,QAAoB;QACrC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;KACjC;;;;;","names":[],"sources":["src/common/nylas-api-request.ts"],"sourcesContent":["import { dataResponse } from '@/utils/utils';\nimport type { NylasSessions } from '@nylas/identity';\nimport { DataResponseReturnType } from './types';\n\n/*\n Arguments for making a request to the Nylas API.\n /\nexport type NylasRequestArgs = {\n method: 'GET' \| 'POST' \| 'PUT' \| 'DELETE' \| 'PATCH';\n path: string;\n body?: any;\n headers?: Record<string, string>;\n};\n\n/\n A model representing a user in the Nylas Identity system.\n /\nexport type User = {\n id: string;\n email: string;\n name?: string;\n};\n\n/\n Arguments for authenticating a user with the Nylas Identity system.\n /\nexport type AuthArgs = {\n /\n The provider of the user's email address.\n /\n provider?: string;\n /\n A list of permission scopes for the provider.\n /\n scope?: Array<string>;\n /\n The login hint associated with the user.\n /\n loginHint?: string;\n /\n Whether to include grant scopes in the auth exchange.\n /\n includeGrantScopes?: boolean;\n prompt?: string;\n metadata?: string;\n state?: string;\n};\n\n/\n Interface for making requests to the Nylas API.\n \n This is an abstract class that is meant to be implemented by customers to provide their own\n * implementation of making requests to the Nylas API. This allows customers to use their own\n * authentication mechanism, or to use a different HTTP client library.\n /\nexport abstract class NylasApiRequest {\n /\n This method should make an authenticated request to the Nylas API.\n * Note: It should not throw an error if the request fails, but should return an object with the error\n * information as part of the tuple returned.\n * @param args NylasRequestArgs\n /\n abstract request<T = any>(args: NylasRequestArgs): Promise<DataResponseReturnType<T>>;\n\n /\n This method should return the current user's information.\n /\n\n abstract currentUser(): Promise<User \| null>;\n\n /\n This method should set the default authentication arguments to use when authenticating the user.\n /\n abstract setDefaultAuthArgs(authArgs: AuthArgs[]): void;\n\n /\n This method should return the URL to redirect the user to for authentication.\n /\n abstract authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined>;\n}\n\n/\n A wrapper around the Nylas Identity session that implements the NylasApiRequest interface.\n * This class is used by the Nylas Web Elements to make requests to the Nylas API if no custom\n * implementation of NylasApiRequest is provided.\n /\nexport class NylasIdentityRequestWrapper implements NylasApiRequest {\n /\n The Nylas Identity session instance.\n /\n private session: NylasSessions;\n\n /\n The grant_id to use for requests, if there is multi-account support\n * enabled in the Nylas Identity settings.\n /\n private activeGrantId?: string;\n\n /\n The default authentication arguments to use when authenticating the user.\n /\n private defaultAuthArgs: AuthArgs[] = [];\n\n /\n Constructor for the NylasIdentityRequestWrapper class.\n * @param session The Nylas Identity session instance.\n /\n constructor(session: NylasSessions) {\n this.session = session;\n }\n\n /\n This method sets the grant_id to use for requests.\n * This is used when there is multi-account support enabled in the Nylas Identity settings.\n \n @param grantId\n /\n setActiveGrantId(grantId: string) {\n this.activeGrantId = grantId;\n }\n\n /\n This method makes a request to the Nylas API, using the Nylas Identity's fetch method.\n \n The `grants/me/` prefix is added because all requests made from the browser to the Nylas API\n * must be made on behalf of the currently logged in user with a valid access token.\n \n @param NylasRequestArgs\n * @returns Promise<[T \| null, NylasErrorResponse['error'] \| null]>\n /\n async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<DataResponseReturnType<T>> {\n try {\n const response = await this.session.fetch(`grants/me/${path}`, {\n method,\n headers: headers ? new Headers(headers) : undefined,\n body,\n ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n });\n\n // Sometimes the Nylas identity session fetch method returns undefined.\n // Possibly due to CORS issues. In this case, we throw an error.\n if (typeof response === 'undefined') {\n throw new Error('Response is undefined');\n }\n\n return dataResponse(response as T);\n } catch (error: any) {\n let errorMessage = String(error);\n if (String(error).includes('Access token not found')) {\n errorMessage = 'Session expired, please log in again. Redirecting...';\n setTimeout(() => {\n localStorage.removeItem('grant');\n localStorage.removeItem('user');\n window.location.reload();\n }, 1000);\n }\n return dataResponse(null as T, {\n message: errorMessage,\n });\n }\n }\n\n /\n This method returns the current (logged in) user's information.\n * If the user is not logged in, it returns null.\n * @returns Promise<User \| null>\n /\n async currentUser(): Promise<User \| null> {\n const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;\n const idToken = await this.session.getProfile(grantId);\n if (!idToken) {\n return null;\n }\n\n return {\n id: idToken.sub,\n email: idToken.email,\n name: idToken.name,\n };\n }\n\n /\n This method returns the URL to redirect the user to for authentication.\n * @param authConfig authArgs\n * @returns Promise<string \| undefined>\n /\n async authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined> {\n const provider = authArgs?.provider \|\| 'google';\n const defaultArgs = this.defaultAuthArgs.find(args => args.provider === provider);\n let args = defaultArgs \|\| {};\n\n if (authArgs) {\n args = { ...args, ...authArgs };\n }\n return this.session.auth(args);\n }\n\n /\n This method sets the default authentication arguments to use when authenticating the user.\n * @param authArgs authArgs\n */\n setDefaultAuthArgs(authArgs: AuthArgs[]) {\n this.defaultAuthArgs = authArgs;\n }\n}\n"],"version":3}
1	+ {"file":"nylas-api-request.js","mappings":";;MAuFa,2BAA2B;IAqBtC,YAAY,OAAsB;QAN1B,oBAAe,GAAe,EAAE,CAAC;QAOvC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;KACxB;IAQD,gBAAgB,CAAC,OAAe;QAC9B,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;IAWD,MAAM,OAAO,CAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAoB;QAChE,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,IAAI,EAAE,EAAE;gBAC7D,MAAM;gBACN,OAAO,EAAE,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,SAAS;gBACnD,IAAI;gBACJ,IAAI,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,aAAa,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC;aACjG,CAAC,CAAC;YAIH,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;gBACnC,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;aAC1C;YAED,OAAO,YAAY,CAAC,QAAa,CAAC,CAAC;SACpC;QAAC,OAAO,KAAU,EAAE;YACnB,IAAI,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,wBAAwB,CAAC,EAAE;gBACpD,YAAY,GAAG,sDAAsD,CAAC;gBACtE,UAAU,CAAC;oBACT,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;oBACjC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;oBAChC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;iBAC1B,EAAE,IAAI,CAAC,CAAC;aACV;YACD,OAAO,YAAY,CAAC,IAAS,EAAE;gBAC7B,OAAO,EAAE,YAAY;aACtB,CAAC,CAAC;SACJ;KACF;IAOD,MAAM,WAAW;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAC/E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC;SACb;QAED,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,GAAG;YACf,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ;SAC3B,CAAC;KACH;IAOD,MAAM,iBAAiB,CAAC,QAAmB;QACzC,MAAM,QAAQ,GAAG,QAAQ,EAAE,QAAQ,IAAI,QAAQ,CAAC;QAChD,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;QAClF,IAAI,IAAI,GAAG,WAAW,IAAI,EAAE,CAAC;QAE7B,IAAI,QAAQ,EAAE;YACZ,IAAI,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,EAAE,CAAC;SACjC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;IAMD,kBAAkB,CAAC,QAAoB;QACrC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;KACjC;;;;;","names":[],"sources":["src/common/nylas-api-request.ts"],"sourcesContent":["import { dataResponse } from '@/utils/utils';\nimport type { NylasSessions } from '@nylas/identity';\nimport { DataResponseReturnType } from './types';\n\n/*\n Arguments for making a request to the Nylas API.\n /\nexport type NylasRequestArgs = {\n method: 'GET' \| 'POST' \| 'PUT' \| 'DELETE' \| 'PATCH';\n path: string;\n body?: any;\n headers?: Record<string, string>;\n};\n\n/\n A model representing a user in the Nylas Identity system.\n /\nexport type User = {\n id: string;\n email: string;\n name?: string;\n provider?: string;\n};\n\n/\n Arguments for authenticating a user with the Nylas Identity system.\n /\nexport type AuthArgs = {\n /\n The provider of the user's email address.\n /\n provider?: string;\n /\n A list of permission scopes for the provider.\n /\n scope?: Array<string>;\n /\n The login hint associated with the user.\n /\n loginHint?: string;\n /\n Whether to include grant scopes in the auth exchange.\n /\n includeGrantScopes?: boolean;\n prompt?: string;\n metadata?: string;\n state?: string;\n};\n\n/\n Interface for making requests to the Nylas API.\n \n This is an abstract class that is meant to be implemented by customers to provide their own\n * implementation of making requests to the Nylas API. This allows customers to use their own\n * authentication mechanism, or to use a different HTTP client library.\n /\nexport abstract class NylasApiRequest {\n /\n This method should make an authenticated request to the Nylas API.\n * Note: It should not throw an error if the request fails, but should return an object with the error\n * information as part of the tuple returned.\n * @param args NylasRequestArgs\n /\n abstract request<T = any>(args: NylasRequestArgs): Promise<DataResponseReturnType<T>>;\n\n /\n This method should return the current user's information.\n /\n\n abstract currentUser(): Promise<User \| null>;\n\n /\n This method should set the default authentication arguments to use when authenticating the user.\n /\n abstract setDefaultAuthArgs(authArgs: AuthArgs[]): void;\n\n /\n This method should return the URL to redirect the user to for authentication.\n /\n abstract authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined>;\n}\n\n/\n A wrapper around the Nylas Identity session that implements the NylasApiRequest interface.\n * This class is used by the Nylas Web Elements to make requests to the Nylas API if no custom\n * implementation of NylasApiRequest is provided.\n /\nexport class NylasIdentityRequestWrapper implements NylasApiRequest {\n /\n The Nylas Identity session instance.\n /\n private session: NylasSessions;\n\n /\n The grant_id to use for requests, if there is multi-account support\n * enabled in the Nylas Identity settings.\n /\n private activeGrantId?: string;\n\n /\n The default authentication arguments to use when authenticating the user.\n /\n private defaultAuthArgs: AuthArgs[] = [];\n\n /\n Constructor for the NylasIdentityRequestWrapper class.\n * @param session The Nylas Identity session instance.\n /\n constructor(session: NylasSessions) {\n this.session = session;\n }\n\n /\n This method sets the grant_id to use for requests.\n * This is used when there is multi-account support enabled in the Nylas Identity settings.\n \n @param grantId\n /\n setActiveGrantId(grantId: string) {\n this.activeGrantId = grantId;\n }\n\n /\n This method makes a request to the Nylas API, using the Nylas Identity's fetch method.\n \n The `grants/me/` prefix is added because all requests made from the browser to the Nylas API\n * must be made on behalf of the currently logged in user with a valid access token.\n \n @param NylasRequestArgs\n * @returns Promise<[T \| null, NylasErrorResponse['error'] \| null]>\n /\n async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<DataResponseReturnType<T>> {\n try {\n const response = await this.session.fetch(`grants/me/${path}`, {\n method,\n headers: headers ? new Headers(headers) : undefined,\n body,\n ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n });\n\n // Sometimes the Nylas identity session fetch method returns undefined.\n // Possibly due to CORS issues. In this case, we throw an error.\n if (typeof response === 'undefined') {\n throw new Error('Response is undefined');\n }\n\n return dataResponse(response as T);\n } catch (error: any) {\n let errorMessage = String(error);\n if (String(error).includes('Access token not found')) {\n errorMessage = 'Session expired, please log in again. Redirecting...';\n setTimeout(() => {\n localStorage.removeItem('grant');\n localStorage.removeItem('user');\n window.location.reload();\n }, 1000);\n }\n return dataResponse(null as T, {\n message: errorMessage,\n });\n }\n }\n\n /\n This method returns the current (logged in) user's information.\n * If the user is not logged in, it returns null.\n * @returns Promise<User \| null>\n /\n async currentUser(): Promise<User \| null> {\n const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;\n const idToken = await this.session.getProfile(grantId);\n if (!idToken) {\n return null;\n }\n\n return {\n id: idToken.sub,\n email: idToken.email,\n name: idToken.name,\n provider: idToken.provider,\n };\n }\n\n /\n This method returns the URL to redirect the user to for authentication.\n * @param authConfig authArgs\n * @returns Promise<string \| undefined>\n /\n async authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined> {\n const provider = authArgs?.provider \|\| 'google';\n const defaultArgs = this.defaultAuthArgs.find(args => args.provider === provider);\n let args = defaultArgs \|\| {};\n\n if (authArgs) {\n args = { ...args, ...authArgs };\n }\n return this.session.auth(args);\n }\n\n /\n This method sets the default authentication arguments to use when authenticating the user.\n * @param authArgs authArgs\n */\n setDefaultAuthArgs(authArgs: AuthArgs[]) {\n this.defaultAuthArgs = authArgs;\n }\n}\n"],"version":3}

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

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './search.js';
 import { d as defineCustomElement$2 } from './select-dropdown2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
-const nylasAvailabilityPickerCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-availability-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-availability-picker .header{padding:1rem}.nylas-availability-picker .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-availability-picker .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-availability-picker .content{padding:1rem;color:var(--nylas-base-900);font-size:16px;font-family:var(--nylas-font-family);border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 504px){.nylas-availability-picker .content{font-size:15px}}.nylas-availability-picker .content .select-timezone{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nylas-base-200);padding-bottom:1rem;gap:1rem}.nylas-availability-picker .content .select-timezone h4{display:flex;gap:0.5rem;align-items:center;margin:0;font-size:16px;font-weight:500;line-height:20px}@media screen and (max-width: 504px){.nylas-availability-picker .content .select-timezone h4{font-size:15px}}.nylas-availability-picker .content .availability{display:flex;flex-direction:column;gap:1rem;padding:0 0.5rem;margin:1rem 0}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability{gap:0.5rem;padding:0}}.nylas-availability-picker .content .availability .availability-day{display:grid;grid-template-columns:minmax(auto, 65px) 1fr minmax(auto, 40px);gap:1rem;align-items:baseline}@media screen and (max-width: 768px){.nylas-availability-picker .content .availability .availability-day{grid-template-columns:78px 1fr auto}}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day{display:inline-grid;gap:8px;grid-template-columns:60px 1fr auto}}.nylas-availability-picker .content .availability .availability-day .day{display:flex;gap:0.5rem;align-items:center}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .day{gap:0.25rem}}.nylas-availability-picker .content .availability .availability-day .day input[type=checkbox]{transform:scale(1.3)}.nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable{height:48px;display:flex;align-items:center;justify-content:center}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{justify-content:unset;gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{display:flex;gap:1rem}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span{margin-top:0.75rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range:not(:last-of-type){margin-bottom:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges p.error{color:var(--nylas-error)}.nylas-availability-picker .content .availability .availability-day button{border:none;background:transparent;height:40px;cursor:pointer;color:var(--nylas-base-800)}.nylas-availability-picker .content .availability .availability-day button:hover,.nylas-availability-picker .content .availability .availability-day button:active{color:var(--nylas-primary)}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){justify-content:initial}";
+const nylasAvailabilityPickerCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-availability-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-availability-picker .header{padding:1rem}.nylas-availability-picker .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-availability-picker .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left;display:flex;align-items:center;gap:4px}.nylas-availability-picker .content{padding:1rem;color:var(--nylas-base-900);font-size:16px;font-family:var(--nylas-font-family);border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 504px){.nylas-availability-picker .content{font-size:15px}}.nylas-availability-picker .content .select-timezone{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nylas-base-200);padding-bottom:1rem;gap:1rem}.nylas-availability-picker .content .select-timezone h4{display:flex;gap:0.5rem;align-items:center;margin:0;font-size:16px;font-weight:500;line-height:20px}@media screen and (max-width: 504px){.nylas-availability-picker .content .select-timezone h4{font-size:15px}}.nylas-availability-picker .content .availability{display:flex;flex-direction:column;gap:1rem;padding:0 0.5rem;margin:1rem 0}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability{gap:0.5rem;padding:0}}.nylas-availability-picker .content .availability .availability-day{display:grid;grid-template-columns:minmax(auto, 65px) 1fr minmax(auto, 40px);gap:1rem;align-items:baseline}@media screen and (max-width: 768px){.nylas-availability-picker .content .availability .availability-day{grid-template-columns:78px 1fr auto}}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day{display:inline-grid;gap:8px;grid-template-columns:60px 1fr auto}}.nylas-availability-picker .content .availability .availability-day .day{display:flex;gap:0.5rem;align-items:center}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .day{gap:0.25rem}}.nylas-availability-picker .content .availability .availability-day .day input[type=checkbox]{transform:scale(1.3)}.nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable{height:48px;display:flex;align-items:center;justify-content:center}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{justify-content:unset;gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{display:flex;gap:1rem}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span{margin-top:0.75rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range:not(:last-of-type){margin-bottom:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges p.error{color:var(--nylas-error)}.nylas-availability-picker .content .availability .availability-day button{border:none;background:transparent;height:40px;cursor:pointer;color:var(--nylas-base-800)}.nylas-availability-picker .content .availability .availability-day button:hover,.nylas-availability-picker .content .availability .availability-day button:active{color:var(--nylas-primary)}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){justify-content:initial}";
 const NylasAvailabilityPickerStyle0 = nylasAvailabilityPickerCss;
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -316,7 +316,7 @@ const NylasAvailabilityPicker = proxyCustomElement(class NylasAvailabilityPicker
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: 'bb0a4148b2d9728d7a2a9fdab8359382dd1ae5d5' }, h("div", { key: '27c5e85931d318e6ec66a155faa78e021b570f70', class: "nylas-availability-picker", part: "nap" }, !this.hideHeader && (h("div", { class: "header", part: "nap__header" }, h("h3", null, "General availability"), h("p", null, "Set your availability for scheduling meetings."))), h("div", { key: 'f2b3434dc127fc19fe6fe915cdc5f4a9d12ba6e7', class: "content" }, h("div", { key: 'bd75cb0749168b32c6366aea6f4df5920d098ec7', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '0c74924a291afaa07ff5b06781720a8cbadeea4d', class: "sub-header" }, "Select timezone", h("span", { key: '64933b3f6623f2d0b13559406db3d14afa99e0b6', class: "icon" }, h("tooltip-component", { key: '09c42633826e0ad358b4877f7d48bb70ce7ca518' }, h("info-icon", { key: '9ea9340b193710d759e71081e59ad6ccf762e4a8', slot: "tooltip-icon" }), h("span", { key: '83e596171dc8fb74543b21e957855f9cd32423b1', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: 'd65b32234b1669a5e7bef4b88024f50548011b98', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: '3387e2d39b7a052557d7668d5a7822fda1440da7', slot: "select-icon" }, h("globe-icon", { key: 'e92459b2ce063e199d8685f5a422a88e7a50fbd6', width: "20", height: "20" })))), h("div", { key: 'd510d9538189898f52e56388d661158e243fc8dd', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: 'd6ebb0ac834c059d38d5c3062315d0a6ff7e7606' }, h("div", { key: '0e8ec0786d293d3a1295021cdcc1a0966084cd74', class: "nylas-availability-picker", part: "nap" }, !this.hideHeader && (h("div", { class: "header", part: "nap__header" }, h("h3", null, "General availability"), h("p", null, "Set when you're regularly available for event bookings.", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "This is the default availability for participants who don\u2019t have availability set on the Participants tab."))))), h("div", { key: '20167bda51a9dc039bcef3a491a0433038af94f3', class: "content" }, h("div", { key: 'd33de054ff0b04614e34ad4b8bb0f15110f722f1', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '35bad46d4e78e08c75acf41b95ab2809e59d3c5c', class: "sub-header" }, "Select timezone"), h("select-dropdown", { key: '63193f9d7c3479affe9a5c99b199b32678d4c8c7', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'ed8101d5acc86458413f771edbd3cc4c016d3d5f', slot: "select-icon" }, h("globe-icon", { key: '637d5652a53679bfd0052ec8348fb9c2ab9b4c89', width: "20", height: "20" })))), h("div", { key: '0023ea0d976234b85cf88a3c057dd2d3982d2f3d', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {

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

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

@@ -34,9 +34,9 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         this.cancelBookedEventValidationError = createEvent(this, "cancelBookedEventValidationError", 7);
         this.handleCancelBookingButtonClicked = () => {
             const startTime = new Date(this.selectedTimeslot.start_time);
-            const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;
+            const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;
             const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;
-            if (startTime.getTime() < dateTillCancellation) {
+            if (dateTillCancellation < new Date().getTime()) {
                 this.cancelBookedEventValidationError.emit({
                     error: {
                         title: 'Cancellation Error',
@@ -74,6 +74,7 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         this.selectedTimeslot = undefined;
         this.configSettings = undefined;
+        this.isLoading = undefined;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -90,7 +91,7 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         }
     }
     render() {
-        return (h(Host, { key: '25f461e554d352c8b62341f77c84d61521a40472', part: "nbec" }, h("sp-theme", { key: 'fa7ae9d97b3c334d71a64076bd6c5787b48b124b', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '731d9d89bfc2f63b8a1095ea671f39d1a99dc4a4', class: "booked-event-timezone" }, h("globe-icon", { key: 'e7a7d73d7c9461f34145ddf3e99bf5640b39ab56' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'dbb07cac45a1528a2633119af6050a630f8df173', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '79b6b636707f8e867358da1b4340e6f0bfeb386e', class: "calendar-icon" }, h("calendar-check-icon", { key: 'a268b01ecbf64976dc61c9e3c66a67cade9d2227' })), h("div", { key: '52c4c97407582b05bfb87e1379930f7cf149c013', class: "booked-event-header" }, h("h2", { key: 'ed4631c601b4920b20c27d158063dcbef92084d4', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: 'f5e93f73c4828764cb7e27cc3d5ab2b761e66fdc', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: 'd9f14eeb24c4935f131edebb3102ffd69d2bde43' }), h("div", { key: '57f6f7877162eb8de8898d6523dac452b3c841e9', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '5bd672ae7c70b0102d6a14e2761b8ecc222ce488' }), h("h3", { key: '5e8ca582a26a51f790ca111648381a10f8ef917c' }, "Booking date and time"), h("p", { key: '0b98f73c94add678003f63cd1e59352f7acd29b3' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: 'cc2a50917760651ca2e015fa22f264740b545a58' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '5ccf1dbc6002c9eaf60b3bd9211e590ab9135d68', class: "booking-participants" }), h("sp-divider", { key: '7ff9b9f4fa4bfc19da47d358ddda325b13b1a465' }), h("div", { key: '2c3d69854b255864cca3782a9ad87175a18d8cf9', class: {
+        return (h(Host, { key: '64a71090c3bb639b725195733562ad0e25a10eba', part: "nbec" }, h("sp-theme", { key: '6c8b9a6502507836aba5d3a358681b4fb55178a5', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'f49b01cfe925800eafd90eb1d31f5585fc43b595', class: "booked-event-timezone" }, h("globe-icon", { key: 'a222a15cfeaccfc969c51eecff485bfcce18f611' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '490c2bdea9b10c878a1746ae47e444c5ef32e07e', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'd6e61e4633441e3d13f9560afc43622322b79e9f', class: "calendar-icon" }, h("calendar-check-icon", { key: 'e761a870d25ef7c965b9c4520c44c37f55111e5d' })), h("div", { key: '0dbed416d1fcd1678fa2935c25ed96cc2e1a1c26', class: "booked-event-header" }, h("h2", { key: '7c485fa82b8cd30f6e589783b03413785b9597dc', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId && !this.isLoading ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '17c4d9ad8338947d9c3e30043f0882d141576e88', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: 'c6adc37a2d0b96a4ae5f6922aadcabaa67cc10b6' }), h("div", { key: 'c453be3d82ddad511771d7fd6944f0f772b7993c', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '2ce7f0be037e54193904ea02c839dce1690de8d3' }), h("h3", { key: '8dad8e71df17003b3989a77fee4b03d5d6c10a54' }, "Booking date and time"), h("p", { key: '8bca1fab69c83e87e22a683ee248c9dd8864efb5' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '56e5d95797fedd1169943b8af1c119290a90a75e' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '58b916f387d02bb74a39ae6d9775ad2db131e9b7', class: "booking-participants" }), h("sp-divider", { key: 'be8f4ca081787cd2856a92672668f4f80dd18a74' }), h("div", { key: '09d6315a3d1ff768f03f1dea70c7de630ce2e5f6', class: {
                 'footer': true,
                 'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,
                 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
@@ -103,7 +104,8 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         "bookingInfo": [8, "booking-info"],
         "selectedTimezone": [1, "selected-timezone"],
         "selectedTimeslot": [16],
-        "configSettings": [8, "config-settings"]
+        "configSettings": [8, "config-settings"],
+        "isLoading": [4, "is-loading"]
     }]);
 __decorate([
     RegisterComponent({
@@ -113,6 +115,7 @@ __decorate([
             ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],
             ['scheduler.selectedTimezone', 'selectedTimezone'],
             ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.isLoading', 'isLoading'],
             ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {

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

	@@ -1 +1 @@
1	- {"file":"nylas-booked-event-card2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\nsp-theme {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n margin-bottom: 2rem;\n width: 424px;\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 1rem;\n font-weight: 400;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n}\n\n.booking-date-time,\n.booking-participants {\n padding: 0 1rem;\n margin-top: 1.5rem;\n margin-left: 3rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-self: flex-start;\n position: relative;\n\n svg {\n color: var(--nylas-base-700);\n position: absolute;\n left: -10px;\n }\n\n .block {\n display: block;\n }\n\n h3 {\n color: var(--nylas-base-600);\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.25rem;\n text-align: justify;\n margin-bottom: 4px;\n }\n p {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n text-align: justify;\n color: var(--nylas-base-800);\n }\n}\n\n.booking-participants {\n margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n display: flex;\n color: var(--nylas-base-600);\n margin-bottom: 1.5rem;\n gap: 4px;\n margin: 2rem;\n align-items: center;\n align-self: flex-end;\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n &.no-footer {\n display: none;\n }\n}\n\nsp-button {\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-700);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n padding: 8px;\n font-family: var(--nylas-font-family);\n font-weight: 600;\n height: 48px;\n line-height: 24px;\n &.cancel {\n color: var(--nylas-error);\n &:hover,\n &:focus {\n border-color: var(--nylas-error);\n }\n &:active {\n color: var(--nylas-error-pressed);\n border-color: var(--nylas-error-pressed);\n }\n }\n &.reschedule {\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n Cancel booking button clicked event.\n /\n @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n /\n @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n error: {\n title: string;\n message: string;\n };\n }>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-booked-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-booked-event-card] Component did load`);\n if (!this.eventInfo) {\n console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n }\n if (!this.bookingInfo) {\n console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n }\n }\n\n private handleCancelBookingButtonClicked = () => {\n const startTime = new Date(this.selectedTimeslot.start_time);\n const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n if (startTime.getTime() < dateTillCancellation) {\n this.cancelBookedEventValidationError.emit({\n error: {\n title: 'Cancellation Error',\n message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n },\n });\n } else {\n this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n }\n };\n\n private handleRescheduleButtonClicked = () => {\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.rescheduleBookedEventError.emit(error);\n };\n this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n };\n\n private getOrganizer = (eventInfo: NylasEvent) => {\n const organizer = eventInfo?.organizer;\n return organizer;\n };\n\n getPaticipantType = (type: string) => {\n switch (type) {\n case 'host':\n return 'Host';\n case 'you':\n return 'You';\n default:\n return '';\n }\n };\n\n @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booked-event-card',\n stateToProps: new Map([\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.configSettings', 'configSettings'],\n ]),\n eventToProps: {\n cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n },\n rescheduleButtonClicked: async (\n event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nbec\">\n <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n <div class=\"booked-event-timezone\">\n <globe-icon></globe-icon>\n {TIMEZONE_MAP[this.selectedTimezone]}\n </div>\n <div class=\"event-card-wrapper\" part=\"nbec__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nbec__title\">\n Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n </h2>\n <div part=\"nbec__description\">\n {this.getOrganizer(this.eventInfo)?.name \|\| this.getOrganizer(this.eventInfo)?.email} & \n {this.bookingInfo?.primaryParticipant?.name \|\| this.bookingInfo?.primaryParticipant?.email}\n </div>\n </div>\n <sp-divider></sp-divider>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>Booking date and time</h3>\n <p>\n {new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n {new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n {new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n </p>\n </div>\n <div class=\"booking-participants\">\n {/* <people-icon></people-icon>\n <h3>All participants</h3>\n {this.eventInfo?.participants && (\n <p>\n {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n return (\n <span class=\"block\">\n {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n </span>\n );\n })}\n </p>\n )} */}\n </div>\n <sp-divider></sp-divider>\n <div\n class={{\n 'footer': true,\n 'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,\n 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options \|\| this.configSettings?.scheduler?.hide_rescheduling_options,\n }}\n >\n {!this.configSettings?.scheduler?.hide_cancellation_options && (\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n Cancel booking\n </sp-button>\n )}\n {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n Reschedule\n </sp-button>\n )}\n </div>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booked-event-card2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\nsp-theme {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n margin-bottom: 2rem;\n width: 424px;\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 1rem;\n font-weight: 400;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n}\n\n.booking-date-time,\n.booking-participants {\n padding: 0 1rem;\n margin-top: 1.5rem;\n margin-left: 3rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-self: flex-start;\n position: relative;\n\n svg {\n color: var(--nylas-base-700);\n position: absolute;\n left: -10px;\n }\n\n .block {\n display: block;\n }\n\n h3 {\n color: var(--nylas-base-600);\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.25rem;\n text-align: justify;\n margin-bottom: 4px;\n }\n p {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n text-align: justify;\n color: var(--nylas-base-800);\n }\n}\n\n.booking-participants {\n margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n display: flex;\n color: var(--nylas-base-600);\n margin-bottom: 1.5rem;\n gap: 4px;\n margin: 2rem;\n align-items: center;\n align-self: flex-end;\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n &.no-footer {\n display: none;\n }\n}\n\nsp-button {\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-700);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n padding: 8px;\n font-family: var(--nylas-font-family);\n font-weight: 600;\n height: 48px;\n line-height: 24px;\n &.cancel {\n color: var(--nylas-error);\n &:hover,\n &:focus {\n border-color: var(--nylas-error);\n }\n &:active {\n color: var(--nylas-error-pressed);\n border-color: var(--nylas-error-pressed);\n }\n }\n &.reschedule {\n &:hover,\n &:focus {\n border-color: var(--nylas-primary);\n }\n &:active {\n border-color: var(--nylas-base-600);\n }\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n Cancel booking button clicked event.\n /\n @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n /\n @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n error: {\n title: string;\n message: string;\n };\n }>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-booked-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-booked-event-card] Component did load`);\n if (!this.eventInfo) {\n console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n }\n if (!this.bookingInfo) {\n console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n }\n }\n\n private handleCancelBookingButtonClicked = () => {\n const startTime = new Date(this.selectedTimeslot.start_time);\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventValidationError.emit({\n error: {\n title: 'Cancellation Error',\n message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n },\n });\n } else {\n this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n }\n };\n\n private handleRescheduleButtonClicked = () => {\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.rescheduleBookedEventError.emit(error);\n };\n this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n };\n\n private getOrganizer = (eventInfo: NylasEvent) => {\n const organizer = eventInfo?.organizer;\n return organizer;\n };\n\n getPaticipantType = (type: string) => {\n switch (type) {\n case 'host':\n return 'Host';\n case 'you':\n return 'You';\n default:\n return '';\n }\n };\n\n @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booked-event-card',\n stateToProps: new Map([\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.configSettings', 'configSettings'],\n ]),\n eventToProps: {\n cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n },\n rescheduleButtonClicked: async (\n event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nbec\">\n <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n <div class=\"booked-event-timezone\">\n <globe-icon></globe-icon>\n {TIMEZONE_MAP[this.selectedTimezone]}\n </div>\n <div class=\"event-card-wrapper\" part=\"nbec__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nbec__title\">\n Booking {!!this.rescheduleBookingId && !this.isLoading ? 'rescheduled' : 'confirmed'}!\n </h2>\n <div part=\"nbec__description\">\n {this.getOrganizer(this.eventInfo)?.name \|\| this.getOrganizer(this.eventInfo)?.email} & \n {this.bookingInfo?.primaryParticipant?.name \|\| this.bookingInfo?.primaryParticipant?.email}\n </div>\n </div>\n <sp-divider></sp-divider>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>Booking date and time</h3>\n <p>\n {new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n {new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n {new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n </p>\n </div>\n <div class=\"booking-participants\">\n {/* <people-icon></people-icon>\n <h3>All participants</h3>\n {this.eventInfo?.participants && (\n <p>\n {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n return (\n <span class=\"block\">\n {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n </span>\n );\n })}\n </p>\n )} */}\n </div>\n <sp-divider></sp-divider>\n <div\n class={{\n 'footer': true,\n 'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,\n 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options \|\| this.configSettings?.scheduler?.hide_rescheduling_options,\n }}\n >\n {!this.configSettings?.scheduler?.hide_cancellation_options && (\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n Cancel booking\n </sp-button>\n )}\n {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n Reschedule\n </sp-button>\n )}\n </div>\n </div>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}