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

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

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

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

	@@ -1 +1 @@
1	- {"file":"nylas-calendar-picker.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.scss?tag=nylas-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-calendar-picker__dropdown {\n padding: 1rem;\n multi-select-dropdown::part(msd_dropdown) {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n multi-select-dropdown::part(msd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n multi-select-dropdown::part(msd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n multi-select-dropdown::part(msd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-calendar-picker` component is a form input for selecting calendars.\n * @part ncp - The calendar picker container\n * @part ncp__header - The header of the calendar picker\n * @part ncp__dropdown - The dropdown container\n * @part ncp__dropdown-button - The dropdown button\n * @part ncp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-calendar-picker',\n styleUrl: 'nylas-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The organizer's email.\n /\n @Prop() organizerEmail?: string;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultSelectedCalendars: string[] = [];\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendars: string[] = [];\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string[];\n name: string;\n valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultSelectedCalendars.toString(), 'calendar');\n }\n }\n\n componentWillUpdate() {\n debug('nylas-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionsChanged')\n selectedOptionsChangedHandler(event: CustomEvent<{ value: string[]; name: string }>) {\n debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChangedHandler = (event: CustomEvent<{ value: string[]; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendars = [...value];\n this.internals.setFormValue(value.toString(), 'calendar');\n };\n this.valueChanged.emit({ ...event.detail, name: this.name, valueChangedHandler });\n }\n\n @RegisterComponent<NylasCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChangedHandler } = event.detail;\n // If a handler is passed, call it.\n if (valueChangedHandler) {\n valueChangedHandler(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n selected: this.defaultSelectedCalendars?.includes(calendar.id) \|\| (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-calendar-picker\" part=\"ncp\">\n <div class=\"header\" part=\"ncp__header\">\n <h3>Calendar availability</h3>\n <p>Select calendars that you’d like to use for checking your availability.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-calendar-picker__dropdown\">\n <multi-select-dropdown\n name={'calendar'}\n label=\"Select calendars that will be checked for availability\"\n options={calendarOptions}\n exportparts=\"msd__dropdown: ncp__dropdown, msd__dropdown-button: ncp__dropdown-button, msd__dropdown-content: ncp__dropdown-content\"\n >\n <span slot=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n The default is your primary calendar if none are selected.\n </span>\n </tooltip-component>\n </span>\n </multi-select-dropdown>\n </div>\n ) : (\n <div class=\"nylas-calendar-picker__loading\">\n <span class=\"label\">\n Select calendars that will be checked for availability <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-calendar-picker.entry.esm.js","mappings":";;;;;AAAA,MAAM,sBAAsB,GAAG,0wFAA0wF;;;;;;;;;;;;;;;;MCsB5xF,mBAAmB;;;;;;;;;;;;;oBAaP,UAAU;wCAIY,EAAE;iCASR,EAAE;;IAiBzC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,uBAAuB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACtE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,iBAAiB;QACf,KAAK,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;KACrD;IAED,oBAAoB;QAClB,KAAK,CAAC,uBAAuB,EAAE,sBAAsB,CAAC,CAAC;KACxD;IAED,iBAAiB;QACf,KAAK,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;QAEpD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,CAAC;QAEnD,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;SACnF;KACF;IAED,mBAAmB;QACjB,KAAK,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CAAC;KACvD;IAED,kBAAkB;QAChB,KAAK,CAAC,uBAAuB,EAAE,oBAAoB,CAAC,CAAC;KACtD;IAED,mBAAmB;QACjB,KAAK,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CAAC;KACvD;IAED,kBAAkB;QAChB,KAAK,CAAC,uBAAuB,EAAE,oBAAoB,CAAC,CAAC;KACtD;IAGD,6BAA6B,CAAC,KAAqD;QACjF,KAAK,CAAC,uBAAuB,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAE7E,MAAM,mBAAmB,GAAG,CAAC,KAAqD;YAChF,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAC/B,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;SAC3D,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;KACnF;IAsBD,MAAM;QACJ,MAAM,eAAe,GACnB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ;YAC1B,OAAO;gBACL,KAAK,EAAE,QAAQ,CAAC,EAAE;gBAClB,KAAK,EAAE,QAAQ,CAAC,IAAI;gBACpB,QAAQ,EACN,IAAI,CAAC,wBAAwB,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;qBACnD,IAAI,CAAC,wBAAwB,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,wBAAwB,EAAE,MAAM,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,KAAK,CAAC;aACxJ,CAAC;SACH,CAAC,IAAI,EAAE,CAAC;QAEX,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,KAAK,IAC3C,WAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,aAAa,IACpC,sCAA8B,EAC9B,4FAA8E,CAC1E,EAEL,eAAe,CAAC,MAAM,GAAG,CAAC,IACzB,WAAK,KAAK,EAAC,iCAAiC,IAC1C,6BACE,IAAI,EAAE,UAAU,EAChB,KAAK,EAAC,wDAAwD,EAC9D,OAAO,EAAE,eAAe,EACxB,WAAW,EAAC,wHAAwH,IAEpI,YAAM,IAAI,EAAC,YAAY,IACrB,6BACE,iBAAW,IAAI,EAAC,cAAc,GAAG,EACjC,YAAM,IAAI,EAAC,iBAAiB,+NAGrB,CACW,CACf,CACe,CACpB,KAEN,WAAK,KAAK,EAAC,gCAAgC,IACzC,YAAM,KAAK,EAAC,OAAO,+DACsC,oBAAa,CAC/D,EACP,WAAK,KAAK,EAAC,gBAAgB,IACzB,6BAAuB,CACnB,CACF,CACP,CACG,CACD,EACP;KACH;;;;;;;AApDD;IApBC,iBAAiB,CAAyG;QACzH,IAAI,EAAE,uBAAuB;QAC7B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,2BAA2B,EAAE,WAAW,CAAC;YAC1C,CAAC,6BAA6B,EAAE,aAAa,CAAC;SAC/C,CAAC;QACF,YAAY,EAAE;YACZ,YAAY,EAAE,OACZ,KAA4I,EAC5I,8BAA6D;gBAE7D,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAE7C,IAAI,mBAAmB,EAAE;oBACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC5B;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;iDAqDD;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.scss?tag=nylas-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-calendar-picker__dropdown {\n padding: 1rem;\n multi-select-dropdown::part(msd_dropdown) {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n multi-select-dropdown::part(msd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n multi-select-dropdown::part(msd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n multi-select-dropdown::part(msd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-calendar-picker` component is a form input for selecting calendars.\n * @part ncp - The calendar picker container\n * @part ncp__header - The header of the calendar picker\n * @part ncp__dropdown - The dropdown container\n * @part ncp__dropdown-button - The dropdown button\n * @part ncp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-calendar-picker',\n styleUrl: 'nylas-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The organizer's email.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultSelectedCalendars: string[] = [];\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendars: string[] = [];\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string[];\n name: string;\n valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;\n }>;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultSelectedCalendars.toString(), 'calendar');\n }\n }\n\n componentWillUpdate() {\n debug('nylas-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-calendar-picker', 'componentDidRender');\n }\n\n @Listen('selectedOptionsChanged')\n selectedOptionsChangedHandler(event: CustomEvent<{ value: string[]; name: string }>) {\n debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChangedHandler = (event: CustomEvent<{ value: string[]; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendars = [...value];\n this.internals.setFormValue(value.toString(), 'calendar');\n };\n this.valueChanged.emit({ ...event.detail, name: this.name, valueChangedHandler });\n }\n\n @RegisterComponent<NylasCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChangedHandler } = event.detail;\n // If a handler is passed, call it.\n if (valueChangedHandler) {\n valueChangedHandler(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n selected:\n this.defaultSelectedCalendars?.includes(calendar.id) \|\|\n (this.defaultSelectedCalendars?.includes('primary') \|\| this.defaultSelectedCalendars?.length === 0 ? calendar.id === this.currentUser?.email : false),\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-calendar-picker\" part=\"ncp\">\n <div class=\"header\" part=\"ncp__header\">\n <h3>Calendar availability</h3>\n <p>Select calendars that you’d like to use for checking your availability.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-calendar-picker__dropdown\">\n <multi-select-dropdown\n name={'calendar'}\n label=\"Select calendars that will be checked for availability\"\n options={calendarOptions}\n exportparts=\"msd__dropdown: ncp__dropdown, msd__dropdown-button: ncp__dropdown-button, msd__dropdown-content: ncp__dropdown-content\"\n >\n <span slot=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n The default is your primary calendar if none are selected.\n </span>\n </tooltip-component>\n </span>\n </multi-select-dropdown>\n </div>\n ) : (\n <div class=\"nylas-calendar-picker__loading\">\n <span class=\"label\">\n Select calendars that will be checked for availability <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasCancelBookingFormCss = ":host{display:block;width:400px;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600)}.nylas-cancel-booking-form__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;width:100%;height:48px;padding:8px;line-height:24px;font-family:var(--nylas-font-family)}sp-button.cancel{margin-top:1.25rem;background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.cancel:hover,sp-button.cancel:focus{background-color:var(--nylas-base-600)}sp-button.cancel:active{background-color:var(--nylas-base-800)}sp-button.back{margin-top:0.5rem}sp-button.back:hover,sp-button.back:focus{border-color:var(--nylas-primary)}sp-button.back:active{border-color:var(--nylas-base-600)}sp-field-label{margin-top:1rem;display:flex;color:var(--nylas-base-800);font-size:14px}sp-field-label.error{color:var(--nylas-error)}sp-field-label span.required{color:var(--nylas-error)}sp-textfield{--spectrum-textfield-border-color:var(--nylas-base-300);--spectrum-textfield-icon-color-invalid:var(--nylas-error);position:relative;width:100%;height:48px;margin-bottom:16px;background-color:var(--nylas-base-0);color:var(--nylas-base-500)}sp-textfield.error{--spectrum-textfield-border-color:var(--nylas-error)}sp-help-text{margin:0.25rem 0 1rem 0;color:var(--nylas-error)}";
@@ -63,7 +63,7 @@ const NylasCancelBookingForm = class {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: 'cd458abc8be3fea5d194bf0795e5ea6f8cd4ae1d', part: "ncec" }, h("sp-theme", { key: '4ea58339902d42d06f9860c905420afe514d8ce6', theme: "spectrum", scale: "medium" }, h("div", { key: '8e22168fb288c4d8a7103fcdc474fff39ab675d7', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '160c99846c244a28c1e84276994c0ac2443edcc7', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '4fe4d83d698aeb3ca1340e985736e0b0e5ae4767' })), h("h3", { key: '4a1f3159bd17eaeae75796fdc6d264a388edc54c', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '5f12df75b97ecaa5d5083658a9b9f9fa4af3ac7f', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: '1dc6db16c39ca4b023eaf21708abf30eb4f2fffd', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'b8bb55e85cc824ec11c4e0b594dbb5ac9834b827', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: 'e2f2b8f856aba5c13bad5634eb594202a0f15d37', class: "required" }, "*")), h("sp-textfield", { key: 'ff201494cd1f96fe08db14f443cc407cc95f68ca', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: '6101a1942260b69c3ba09ff6d139d4f777c6d1ba', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: '67a9ecde3bf3e6ce7f66499709f3f5f2b9b2cdf3', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'eeac156906a10f13541f62924f136f23ebc4be4a', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
+        return (h(Host, { key: '98dc29d53d8a05beb16dea271cab5c574df4dfd0', part: "ncec" }, h("sp-theme", { key: '04feb774090fb57270a3d3c05576687ec78c230d', theme: "spectrum", scale: "medium" }, h("div", { key: '024a947c805b9f2ab6204a8548e9c775078fa969', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '93295919797719199fbbe6eccdef4e42045c330d', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'b8da092aa626ebdef64dd3f2f54ca2df5082d1f3' })), h("h3", { key: '8e33cc23c5bc26aa8e5c979814fa5a398c798237', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '2c8cd37241e6cfe38bb012be4d700ae03c33876e', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: 'be720382bd84086cd8a25279dd4ec58dbfc113e6', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'fadd2793a898975b8ba8da0549bcbb37879a68bf', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '0748781625ea7ec8332b4ca20eae8986ad9e8efb', class: "required" }, "*")), h("sp-textfield", { key: 'e8daf40a5c26b1e6b9b59ab42bbe613da72c987a', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: 'f876e2f41098845a235fe2b563e85891843d5351', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'a05211715fda7fa75935c974bd20ce6c6ef4206a', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: '3dd7832e698181eaca4df52835d64c09b664f5f9', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
     }
 };
 __decorate([

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.nylas-cancelled-event-card{display:flex;align-items:center;flex-direction:column;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%}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:1rem;height:48px;padding:8px;line-height:24px;width:100%}sp-button:hover,sp-button:focus{border-color:var(--nylas-primary)}sp-button:active{border-color:var(--nylas-base-600)}";
@@ -41,7 +41,7 @@ const NylasCancelledEventCard = class {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '1d10c839e557abfc03115780d11ac2dd0777c7cb', part: "ncec" }, h("sp-theme", { key: '88b5a9ece7ffc99a870217c96e756ed2a2fe4f85', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '287a45fc86df89719461be7104c7e1b3cafe4c0c', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '078ca3fc5474dae97cb1439727360b5ce23ae98b', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'e9d1df069e34cb7c0d16139db8fe98964ab2ad1c' })), h("h3", { key: '2ce714e14dbffcd74adc5f1c3c313ec8f3176e07', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '503c4b443dda028e829270cf4b984e2b647ecaae', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '2f7313a894344052b3397c2d8e58a35cf81fc5eb', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '5d099b201c419f93d839c34a3cf3351cb524ee61', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+        return (h(Host, { key: '656dd5537bf436780d779e06362974295b6cf552', part: "ncec" }, h("sp-theme", { key: 'e6aa25eb233fd0bca7006fd9bf63c9fb54738a66', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '005da251e2cad861ca1cb2bc276b01990618995f', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'b30f8abc7dede57b909d69beb11a7da0015bf044', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9cc6e10a041979ff5a2a76c9d3e04446fdbfa27f' })), h("h3", { key: '0419fbe2aad08be631618146b77869307832f752', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: 'c3fb84c05112e0a4055f6eaaf878ad7afda8726e', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '0409b5465346ffea4c43789fa027f9b5a853d263', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '1d2efade3b5cd5ff48f3924c6b1e8248d2e478a3', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
     }
 };
 __decorate([

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { a as debug } from './utils-73d8a928.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasComposerCss = ":host{display:grid;color:var(--nylas-color-primary-900)}.editor{position:relative;display:block;max-height:300px;overflow:auto;padding:1rem;border:1px solid var(--nylas-color-primary-300)}.editor blockquote{visibility:hidden;overflow:hidden;position:relative;transition:height 0.3s ease;margin:0}.editor blockquote::before{content:\"...\";visibility:visible;opacity:1;position:absolute;top:0;left:0;background-color:var(--nylas-color-primary-300);width:20px;text-align:center;color:var(--nylas-color-primary-800);vertical-align:middle;display:flex;justify-content:center;align-items:center;align-self:center;cursor:pointer}.editor .collapsed{height:20px}.editor .expanded{visibility:visible;opacity:1;height:auto;margin:0px 0px 0px 0.8ex;border-left:1px solid var(--nylas-color-primary-300);padding-left:1rem}.editor .expanded::before{display:none;}.buttons{display:flex;margin-top:1rem;justify-content:space-between}.buttons sp-button{border-radius:var(--nylas-border-radius);background-color:var(--nylas-color-primary-400);color:var(--nylas-color-primary-900);fill:var(--nylas-color-primary-900)}.buttons sp-button:hover{background-color:var(--nylas-color-primary-500)}.buttons sp-button:disabled{background-color:var(--nylas-color-primary-200);color:var(--nylas-color-primary-600);cursor:not-allowed}.buttons sp-button chevron-icon{display:inline-block}.buttons .close{justify-self:end}.toolbar{position:absolute;display:none;background-color:var(--nylas-color-primary-200);border-radius:var(--nylas-border-radius);z-index:1}.toolbar sp-button{border:0}";
@@ -134,7 +134,7 @@ const NylasComposer = class {
         this.editorEl.focus();
     }
     render() {
-        return (h(Host, { key: '7537b7c56a1e609f88189c2c4deed986827eb193' }, h("sp-theme", { key: 'efa28f8ed5585ec21b44ae5ec174aa10a9c92aba', scale: "medium", color: "dark" }, h("div", { key: 'c7932bcedcb2b3cfa4e0900578cf2b749000125d', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '89c06c0e76d29ea6713dd44b2452e261d0d7d43b', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: 'beeb60448f03c8818925aeb13ab5231aa72f7526', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '4e37be81a28ac4355f9d0d6d6c71b7b78cf41456', slot: "icon" }, h("bold-icon", { key: '56cf047799a6a5713310d5b095ca91e6004d6107' })), h("div", { key: '2fe47f8f364f7fb1016990f2aecec655e2e6eb30', slot: "label" }, "Bold")), h("sp-button", { key: '0416d13b88ccefd5005f4b97f7dded2118d37f43', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: '6d20e215eafbb91a17ce452a6b64295ab4ef2bb9', slot: "icon" }, h("underline-icon", { key: 'b8d988fa168047ed213fbcceb53b24bf3f766d7a' })), h("div", { key: 'bd05639007b3ea849501b995137ceda70aed20da', slot: "label" }, "Underline")), h("sp-button", { key: '9775c4787363cd4d21778f4c848c7f5a7564b507', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'ca9d557028981c0fe209045e5d1748b19bbb5069', slot: "icon" }, h("italic-icon", { key: '1be5debba3572e83ab132a3e44d8fc1e799f6619' })), h("div", { key: 'cccb70309840e20f558158e6ef9edf8fe0e52eed', slot: "label" }, "Italic")))), h("div", { key: '502854e008886de49ec435c1ebd73b48f2cc4c70', class: 'buttons' }, h("sp-button", { key: '9663a709ca8794dc76dec379a39c52a6a754cb6e', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'b0c7637932f2659c9115e74f1244db04992a69aa', onClick: this.closeComposer, class: "close" }, "Close")))));
+        return (h(Host, { key: '8d7f9c145099757c2a8dc48f1d2a223831f82cda' }, h("sp-theme", { key: 'e92e457e86701838f55d97b3f2c1c0f70f14bf59', scale: "medium", color: "dark" }, h("div", { key: '50eba2b6ee0c84d8eeb392385872604b74b11025', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '38bdd2ec58e62699e2c604b1b2c586cb5ecf105a', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '6415e5f9910a2d9798e7c85162329f359e500aeb', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: 'e03cfe0f5736836f64aa350165fa519508e212f7', slot: "icon" }, h("bold-icon", { key: '1ad03230cff2f0843d6da22153716c3818ed04f7' })), h("div", { key: 'd90c50aff88b9ac7774d6792b91ea3ced21f4419', slot: "label" }, "Bold")), h("sp-button", { key: '466621fcdf2e8e1e85b613bba82b948ed2177a88', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: '6be0737cf685b02f3ee8ef7c34fd18674793af00', slot: "icon" }, h("underline-icon", { key: '278b1b79d3aec25ab2c2181c3e5c631063b04e29' })), h("div", { key: '169d3039815082e208eb476b4490181f7eb54ee6', slot: "label" }, "Underline")), h("sp-button", { key: '92c20b2d03b709f08c63af3a1e88b10e407243d7', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: '67eb3d5b5a2118d90bfb81c7b51d52c41b5ab2a2', slot: "icon" }, h("italic-icon", { key: '35ac96f9ff3f3f0c38c7e486092f42dc9451eb63' })), h("div", { key: 'f29fe84363cca6e178a3651a1c8e56929ebb3e32', slot: "label" }, "Italic")))), h("div", { key: '3d89b191642ab291fc338ffd66be16fe999950b1', class: 'buttons' }, h("sp-button", { key: 'f78c122acf4c69c788d411d2dcfd49649c99919e', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'b46873c911cb796e9af22eb7d19bf6e1cd2cd1be', onClick: this.closeComposer, class: "close" }, "Close")))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasCustomBookingFlowCss = ":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-custom-booking-flow{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-custom-booking-flow .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-custom-booking-flow .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-custom-booking-flow .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-custom-booking-flow .nylas-custom-booking-flow__loading{padding-bottom:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .loading-button span{padding:0 1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown{padding:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown span.label tooltip-component{display:flex}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
@@ -30,10 +30,25 @@ const NylasCustomBookingFlow = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this.selectedConfiguration = undefined;
         this.name = 'booking-type';
         this.bookingType = '';
         this.selectedBookingType = '';
     }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        if (newValue?.event_booking?.booking_type) {
+            this.bookingType = newValue?.event_booking?.booking_type;
+        }
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');
+        }
+        this.selectedBookingType = this.bookingType;
+    }
     connectedCallback() {
         debug('nylas-custom-booking-flow', 'connectedCallback');
     }
@@ -46,10 +61,6 @@ const NylasCustomBookingFlow = class {
     }
     componentDidLoad() {
         debug('nylas-custom-booking-flow', 'componentDidLoad');
-        if (typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');
-        }
-        this.selectedBookingType = this.bookingType;
     }
     componentWillUpdate() {
         debug('nylas-custom-booking-flow', 'componentWillUpdate');
@@ -63,10 +74,6 @@ const NylasCustomBookingFlow = class {
     componentDidRender() {
         debug('nylas-custom-booking-flow', 'componentDidRender');
     }
-    elementNameChangedHandler(newValue) {
-        debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);
-        this.host.setAttribute('name', newValue);
-    }
     selectedOptionChangedHandler(event) {
         debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);
         const valueChanged = (event) => {
@@ -87,17 +94,19 @@ const NylasCustomBookingFlow = class {
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: 'a4f8162f7964925b34c256d88fa8cd3f0e684e7e' }, h("div", { key: '3b5c6077ad57d232f9c25c17b117b4ad31cf3cfa', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '4ecafa38be03812b2b6188d4858018d5cd94be8e', class: "header", part: "ncbf__header" }, h("h3", { key: 'd0eccafc6133ff24de9fbab11737e08862aad835' }, "Customize booking flow"), h("p", { key: '0e75183824a878b6df83f92467aba58072d2ac6f' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: '7f019073e242dce64522e27262298e480b0fb346' }, h("div", { key: '47bd77bcd4c4a1a9a845581bb6ad77b6dd7d65e7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '17386ac59d7680789dda85e832c84061225b6b04', class: "header", part: "ncbf__header" }, h("h3", { key: '5368e8f321140f2bfaf60f6ca3f732f584824301' }, "Customize booking flow"), h("p", { key: '65a0d4d41804f41f7c01a682e4b8b97ebc2c4ef2' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "name": ["elementNameChangedHandler"]
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }; }
 };
 __decorate([
     RegisterComponent({
         name: 'nylas-custom-booking-flow',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;

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

	@@ -1 +1 @@
1	- {"file":"nylas-custom-booking-flow.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.scss?tag=nylas-custom-booking-flow&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-custom-booking-flow {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-custom-booking-flow__loading {\n padding-bottom: 1rem;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-custom-booking-flow__dropdown {\n padding: 1rem;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-custom-booking-flow',\n styleUrl: 'nylas-custom-booking-flow.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n @Element() host!: HTMLNylasCustomBookingFlowElement;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-type';\n /\n The booking type.\n /\n @Prop() bookingType: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected bookingType.\n /\n @State() selectedBookingType: string = '';\n\n /\n This event is fired when the selected bookingType changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-custom-booking-flow', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-custom-booking-flow', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-custom-booking-flow', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-custom-booking-flow', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n }\n this.selectedBookingType = this.bookingType;\n }\n\n componentWillUpdate() {\n debug('nylas-custom-booking-flow', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-custom-booking-flow', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-custom-booking-flow', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-custom-booking-flow', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedBookingType = value;\n this.internals.setFormValue(value.toString(), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-custom-booking-flow',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingOptions = [\n {\n label: 'Automatically accept bookings',\n value: 'booking',\n },\n {\n label: 'Manually confirm/decline bookings',\n value: 'pre-booking',\n },\n ];\n\n return (\n <Host>\n <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n <div class=\"header\" part=\"ncbf__header\">\n <h3>Customize booking flow</h3>\n <p>Customize how new bookings are handled when a booking is completed.</p>\n </div>\n\n {bookingOptions.length > 0 ? (\n <div class=\"nylas-custom-booking-flow__dropdown\">\n <span class=\"label\">\n After a booking is confirmed\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n request.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-type\"\n options={bookingOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-custom-booking-flow__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-custom-booking-flow.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.scss?tag=nylas-custom-booking-flow&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-custom-booking-flow {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-custom-booking-flow__loading {\n padding-bottom: 1rem;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-custom-booking-flow__dropdown {\n padding: 1rem;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-custom-booking-flow',\n styleUrl: 'nylas-custom-booking-flow.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n @Element() host!: HTMLNylasCustomBookingFlowElement;\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-type';\n /\n The booking type.\n /\n @Prop() bookingType: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected bookingType.\n /\n @State() selectedBookingType: string = '';\n\n /\n This event is fired when the selected bookingType changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\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-custom-booking-flow', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n if (newValue?.event_booking?.booking_type) {\n this.bookingType = newValue?.event_booking?.booking_type;\n }\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n }\n this.selectedBookingType = this.bookingType;\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-custom-booking-flow', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-custom-booking-flow', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-custom-booking-flow', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-custom-booking-flow', 'componentDidLoad');\n }\n\n componentWillUpdate() {\n debug('nylas-custom-booking-flow', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-custom-booking-flow', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-custom-booking-flow', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-custom-booking-flow', 'componentDidRender');\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedBookingType = value;\n this.internals.setFormValue(value.toString(), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-custom-booking-flow',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingOptions = [\n {\n label: 'Automatically accept bookings',\n value: 'booking',\n },\n {\n label: 'Manually confirm/decline bookings',\n value: 'pre-booking',\n },\n ];\n\n return (\n <Host>\n <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n <div class=\"header\" part=\"ncbf__header\">\n <h3>Customize booking flow</h3>\n <p>Customize how new bookings are handled when a booking is completed.</p>\n </div>\n\n {bookingOptions.length > 0 ? (\n <div class=\"nylas-custom-booking-flow__dropdown\">\n <span class=\"label\">\n After a booking is confirmed\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n request.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-type\"\n options={bookingOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-custom-booking-flow__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { j as getLastDayOfMonth, k as getFirstDayOfMonth, l as isSameDay, m as isSameMonth } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { j as getLastDayOfMonth, k as getFirstDayOfMonth, l as isSameDay, m as isSameMonth } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const t0 = new Date, t1 = new Date;

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

@@ -1,6 +1,7 @@
 import { h, r as registerInstance, i as createEvent, a as Host, e as getElement } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug, p as parsePreviewLink } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug, p as parsePreviewLink } from './utils-3e18e0b2.js';
+import { D as DEFAULT_OPEN_HOURS } from './constants-bf39e913.js';
 import './_commonjsHelpers-7c16df4a.js';
 function TabContents({ id, formState, activeTab, calendars }) {
@@ -18,19 +19,18 @@ function TabContents({ id, formState, activeTab, calendars }) {
                         h("nylas-location-component", { name: "location", eventLocation: location, exportparts: "nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content" }),
                         h("nylas-event-description", { name: "description", eventDescription: eventDescription, exportparts: "nedesc, nedesc__textarea" })))));
         case 'availability':
-            const openHours = formState.availability;
-            const timezone = openHours?.[0]?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+            const openHours = formState.availability.openHours;
+            const timezone = formState.availability.timezone ? formState.availability.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
             const organizer = formState.participants?.find(p => p.is_organizer);
             const organizerEmail = organizer?.email ?? 'primary';
             const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];
             const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;
             return (h("div", { key: id },
                 h("nylas-booking-calendar-picker", { name: "booking-calendar", calendars: calendars ?? [], defaultBookingCalendar: bookingCalendar, exportparts: 'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content' }),
-                h("nylas-calendar-picker", { name: "calendars", calendars: calendars ?? [], defaultSelectedCalendars: selectedCalendars, organizerEmail: organizerEmail, exportparts: 'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content' }),
+                h("nylas-calendar-picker", { name: "calendars", calendars: calendars ?? [], defaultSelectedCalendars: selectedCalendars, exportparts: 'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content' }),
                 h("nylas-availability-picker", { name: "availability", openHours: openHours, defaultTimezone: timezone, exportparts: 'nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times' })));
         case 'bookingOptions':
             return (h("div", { key: id },
-                id == 'new' && h("p", null, "Config"),
                 h("nylas-buffer-time", { name: "buffer-time", buffer: formState.buffer, exportparts: 'nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview' }),
                 h("nylas-custom-booking-flow", { name: "booking-type", bookingType: formState.bookingType, exportparts: 'ncbf, ncbf__header, ncbf__dropdown, ncbf__dropdown-button, ncbf__dropdown-content' }),
                 h("nylas-event-limits", null,
@@ -40,7 +40,7 @@ function TabContents({ id, formState, activeTab, calendars }) {
     }
 }
-const nylasEditorTabsCss = ".sc-nylas-editor-tabs-h{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}.scheduler-editor.sc-nylas-editor-tabs{display:flex;flex-direction:column}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:grid;grid-template-columns:minmax(224px, 25%) 1fr}@media screen and (max-width: 768px){.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:table-column-group}}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs{display:flex;flex-direction:column;border-right:1px solid var(--nylas-base-200);background-color:var(--nylas-base-25)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--nylas-base-900);background:var(--nylas-base-0);border:none;height:56px;font-family:var(--nylas-font-family);font-size:16px;font-weight:500;line-height:24px;cursor:pointer}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs:not(:first-of-type){margin-top:0.25rem}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.active.sc-nylas-editor-tabs{font-weight:600;background:var(--nylas-base-0);color:var(--nylas-primary);border-left:4px solid var(--nylas-primary);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.0588235294);box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs{max-width:692px}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs{display:flex;flex-direction:column;gap:1rem}.footer.sc-nylas-editor-tabs{display:flex;justify-content:space-between;align-items:center;gap:1rem;height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{display:flex;justify-content:flex-end;align-items:center;justify-self:flex-end;gap:1rem}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs .unsaved-changes.sc-nylas-editor-tabs{color:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs .saved-changes.sc-nylas-editor-tabs{color:var(--nylas-success)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;width:148px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:hover{background:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:active{background:var(--nylas-base-800)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs span.sc-nylas-editor-tabs{display:flex;align-items:center;justify-content:center;gap:0.5rem}";
+const nylasEditorTabsCss = ".sc-nylas-editor-tabs-h{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}.scheduler-editor.sc-nylas-editor-tabs{display:flex;flex-direction:column}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:grid;grid-template-columns:minmax(224px, 25%) 1fr}@media screen and (max-width: 768px){.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:table-column-group}}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs{display:flex;flex-direction:column;border-right:1px solid var(--nylas-base-200);background-color:var(--nylas-base-25)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--nylas-base-900);background:var(--nylas-base-0);border:none;height:56px;font-family:var(--nylas-font-family);font-size:16px;font-weight:500;line-height:24px;cursor:pointer}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs:not(:first-of-type){margin-top:0.25rem}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.active.sc-nylas-editor-tabs{font-weight:600;background:var(--nylas-base-0);color:var(--nylas-primary);border-left:4px solid var(--nylas-primary);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.0588235294);box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs{max-width:692px}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs{display:flex;flex-direction:column;gap:1rem}.footer.sc-nylas-editor-tabs{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs{flex-direction:column;height:auto}}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .preview.sc-nylas-editor-tabs{margin-top:1rem;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{display:flex;justify-content:flex-end;align-items:center;justify-self:flex-end;gap:1rem}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{flex-direction:column-reverse;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.sc-nylas-editor-tabs{max-width:524px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.unsaved-changes.sc-nylas-editor-tabs{color:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.saved-changes.sc-nylas-editor-tabs{color:var(--nylas-success)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error.sc-nylas-editor-tabs{color:var(--nylas-error)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error-full-width.sc-nylas-editor-tabs{max-width:660px}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button-component.sc-nylas-editor-tabs{width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;width:148px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:hover{background:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:active{background:var(--nylas-base-800)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs span.sc-nylas-editor-tabs{display:flex;align-items:center;justify-content:center;gap:0.5rem}";
 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;
@@ -61,24 +61,33 @@ const NylasEditorTabs = class {
         registerInstance(this, hostRef);
         this.schedulerConfigChanged = createEvent(this, "schedulerConfigChanged", 7);
         this.cancelButtonClick = createEvent(this, "cancelButtonClick", 7);
+        this.formSubmitted = createEvent(this, "formSubmitted", 7);
         this.previewButtonClicked = createEvent(this, "previewButtonClicked", 7);
+        this.setError = (error) => {
+            this.error = error.message;
+        };
         this.formSubmissionHandler = async (event) => {
             event.preventDefault();
+            this.formSubmitted.emit();
+            const valid = this.formRef.checkValidity();
+            if (!valid) {
+                return;
+            }
             this.isLoading = true;
             this.hasUnsavedChanges = false;
-            this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice } = this.formState;
-            const organizer = this.config?.participants?.find(p => p.is_organizer);
+            const formState = this.updateFormState();
+            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice } = formState;
+            const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);
             const configObject = {
-                ...(this.config?.id && { id: this.config.id }),
-                version: this.config?.version ?? '1.0.0',
+                ...this.selectedConfiguration,
+                version: this.selectedConfiguration?.version ?? '1.0.0',
                 availability: {
                     duration_minutes: duration ? parseInt(duration) : 0,
                     availability_rules: {
-                        availability_method: this.config?.availability?.availability_rules?.availability_method ?? 'collective',
+                        availability_method: this.selectedConfiguration?.availability?.availability_rules?.availability_method ?? 'collective',
                         buffer: buffer || { before: 0, after: 0 },
-                        default_open_hours: this.config?.availability?.availability_rules?.default_open_hours ?? [],
-                        round_robin_group_id: this.config?.availability?.availability_rules?.round_robin_group_id ?? '',
+                        default_open_hours: this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
+                        round_robin_group_id: this.selectedConfiguration?.availability?.availability_rules?.round_robin_group_id ?? '',
                     },
                 },
                 participants: [
@@ -88,7 +97,7 @@ const NylasEditorTabs = class {
                         is_organizer: true,
                         availability: {
                             calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
-                            open_hours: availability ?? [],
+                            open_hours: availability?.openHours ?? [],
                         },
                         booking: {
                             calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
@@ -100,6 +109,7 @@ const NylasEditorTabs = class {
                     description: description?.toString() ?? '',
                     location: location?.toString() ?? '',
                     booking_type: bookingType?.toString() ?? 'booking',
+                    timezone: availability?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
                 },
                 scheduler: {
                     available_days_in_future: availableDaysInFuture ?? 30,
@@ -113,21 +123,23 @@ const NylasEditorTabs = class {
                     this.changesSaved = false;
                 }, 5000);
             };
-            this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, action: this.action });
+            this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, setError: this.setError, action: this.action });
         };
         this.calendars = undefined;
-        this.config = undefined;
+        this.selectedConfiguration = undefined;
         this.currentUser = undefined;
         this.schedulerPreviewLink = '';
         this.action = 'create';
+        this.mode = 'app';
         this.activeTab = 'eventInfo';
         this.isLoading = false;
         this.hasUnsavedChanges = false;
         this.changesSaved = false;
         this.formState = {};
+        this.error = '';
     }
     configChangedHandler(newConfig) {
-        debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.config);
+        debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.selectedConfiguration);
         this.formState = {
             ...this.getFormStateFromConfig(newConfig),
         };
@@ -143,7 +155,7 @@ const NylasEditorTabs = class {
     }
     componentWillLoad() {
         debug('[nylas-editor-tabs]', 'componentWillLoad');
-        this.formState = this.getFormStateFromConfig(this.config);
+        this.formState = this.getFormStateFromConfig(this.selectedConfiguration);
     }
     componentDidLoad() {
         debug('[nylas-editor-tabs]', 'componentDidLoad');
@@ -153,8 +165,10 @@ const NylasEditorTabs = class {
     }
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
-        this.formState = { ...this.formState, [event.detail.name]: event.detail.value };
+        const { name, value } = event.detail;
+        this.formState = { ...this.formState, [name]: value };
         this.hasUnsavedChanges = true;
+        this.error = '';
     }
     getFormStateFromConfig(config) {
         const organizerParticipant = config?.participants?.find(p => p.is_organizer);
@@ -162,15 +176,18 @@ const NylasEditorTabs = class {
             title: config?.event_booking?.title ?? '',
             description: config?.event_booking?.description ?? '',
             duration: config?.availability?.duration_minutes?.toString() ?? '10',
-            availability: organizerParticipant?.availability?.open_hours ?? undefined,
+            availability: {
+                timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+                open_hours: organizerParticipant?.availability?.open_hours ?? undefined,
+            },
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
             bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',
-            location: this.config?.event_booking?.location ?? '',
-            bookingType: this.config?.event_booking?.booking_type ?? 'booking',
-            buffer: this.config?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },
-            availableDaysInFuture: this.config?.scheduler?.available_days_in_future ?? 30,
-            minCancellationNotice: this.config?.scheduler?.min_cancellation_notice ?? 0,
+            location: this.selectedConfiguration?.event_booking?.location ?? '',
+            bookingType: this.selectedConfiguration?.event_booking?.booking_type ?? 'booking',
+            buffer: this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },
+            availableDaysInFuture: this.selectedConfiguration?.scheduler?.available_days_in_future ?? 30,
+            minCancellationNotice: this.selectedConfiguration?.scheduler?.min_cancellation_notice ?? 0,
         };
     }
     updateFormState() {
@@ -216,6 +233,7 @@ const NylasEditorTabs = class {
             }
         });
         this.formState = { ...this.formState };
+        return this.formState;
     }
     setActiveTab(e, tabName) {
         e.preventDefault();
@@ -224,23 +242,26 @@ const NylasEditorTabs = class {
     }
     render() {
         debug('[nylas-editor-tabs]', 'render', this.formState);
-        return (h(Host, { key: '5a1e8ee246d47626dce5515c3ec4df3e6ae893a4' }, h("form", { key: 'f49d1fa60f2724c5cae8c1328dfee945ae24f1e2', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el) }, h("div", { key: 'f0b678836e12c3878128e4b810e5541f00ddee29', class: "form-contents" }, h("div", { key: '910dc155a6b7b01e300084fe405da0d0b0801847', class: "tabs" }, h("button", { key: '80ca54ac98ae0d3b2298ae62253ffcb9d3ae539d', class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { key: '842e45f308921afa7948f8408b84f95d7b802850', width: "16", height: "16" }), "Event Info"), h("button", { key: '7b79207240cbae5dcd554d448f68dc544f2e6c80', class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { key: '47b3d8cf7ee50eac7d377ab3faf35c27f1215e96', width: "16", height: "16" }), "Availability"), h("button", { key: 'ffb175caa6ccc4ba377ee4947759d0561ebb089b', class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { key: 'fc3bec08bd5080e7b2ec7816bb3c021876c20d7c', width: "16", height: "16" }), "Booking Options")), h("div", { key: '80802e1388eb767bcea718907e75d5b4a2de3701', class: "tab-content" }, h(TabContents, { key: '5c5618341227447d2a41061f415e54d83efc354a', formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.config?.id ?? 'new' }))), h("div", { key: 'd315bad7ea2efe6699557a5e07b55053926a7517', class: "footer" }, h("div", { key: '4c92a480ee6d2f04d9fa36f3e870d414835406e1', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        return (h(Host, { key: 'c1e6e9d2cfe242e407a909281063767a0985245e' }, h("form", { key: '4baaac0129e8a357b78980636bd32b3818ec0820', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options")), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: '38bdcdd7283d98ea54c7594a52cc16b85b3b776a', class: "footer" }, h("div", { key: '5543e3f7eb2fa9f2f3bbe6053fde7d0ea13c3bc0', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
-                    window.open(parsePreviewLink(this.schedulerPreviewLink, this.config), '_blank');
+                    window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), h("div", { key: '22fdd2183dcc2c299d2fdacf0db8922a95a5692e', class: "buttons" }, h("p", { key: '63ea7b4d8362f409caec467a7bce22142ccc1b20', class: {
+            }, variant: 'basic' }, "Preview"))), h("div", { key: '62470cdbc7c4670e6ff03e9979ca803f81482b15', class: "buttons" }, h("p", { key: '5ecdfa1082650aab2f8fef8ed7beeb11fedb381c', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
-            } }, this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '6ceded872ee5510234ff79bff3f0173a72314714', type: "button", disabled: this.isLoading, clickHandler: event => {
+                'error': this.error !== '',
+                'error-full-width': this.error !== '' && this.action === 'create',
+            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '1bb3af5cc04c49e311267fb43ac326267acdaa1d', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
-            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '4f33ad6071f503837395d900b67fafc8605d8043', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+                this.error = '';
+            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '28c9725c69104d1849b2ab3068b61a269370f016', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "config": ["configChangedHandler"]
+        "selectedConfiguration": ["configChangedHandler"]
     }; }
 };
 __decorate([
@@ -248,20 +269,28 @@ __decorate([
         name: 'nylas-editor-tabs',
         stateToProps: new Map([
             ['schedulerConfig.calendars', 'calendars'],
-            ['schedulerConfig.config', 'config'],
+            ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
             ['schedulerConfig.currentUser', 'currentUser'],
         ]),
         eventToProps: {
             schedulerConfigChanged: async (event, nylasSchedulerConfigConnector) => {
-                const { resetLoadingState, action, config } = event.detail;
-                if (resetLoadingState) {
-                    resetLoadingState(event);
-                }
+                const { resetLoadingState, setError, action, config } = event.detail;
+                const checkForErrors = (response) => {
+                    const [data, error] = response;
+                    if (!data && error && setError) {
+                        setError(error);
+                    }
+                    if (resetLoadingState) {
+                        resetLoadingState(event);
+                    }
+                };
                 if (action === 'edit') {
-                    await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);
+                    const response = await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);
+                    checkForErrors(response);
                 }
                 else {
-                    await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);
+                    const response = await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);
+                    checkForErrors(response);
                 }
             },
             cancelButtonClick: async (_, nylasSchedulerConfigConnector) => {