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

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

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

Files changed (1005) hide show

package/dist/collection/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.js.map CHANGED Viewed

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

package/dist/collection/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.css CHANGED Viewed

@@ -56,6 +56,9 @@
 }
 .nylas-calendar-picker .nylas-calendar-picker__loading {
   padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 .nylas-calendar-picker .nylas-calendar-picker__loading .label {
   display: flex;
@@ -91,6 +94,9 @@
 }
 .nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown) {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 .nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button) {
   width: 100%;

package/dist/collection/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.js CHANGED Viewed

@@ -72,7 +72,7 @@ export class NylasCalendarPicker {
                 selected: this.defaultSelectedCalendars?.includes(calendar.id) || (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),
             };
         }) ?? [];
-        return (h(Host, null, h("div", { class: "nylas-calendar-picker" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Calendar availability"), h("p", null, "Select calendars that you\u2019d like to use for checking your availability.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-calendar-picker__dropdown" }, h("multi-select-dropdown", { name: 'calendar', label: "Select calendars that will be checked for availability", options: calendarOptions }, h("span", { slot: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available. The default is your primary calendar if none are selected.")))))) : (h("div", { class: "nylas-calendar-picker__loading" }, h("span", { class: "label" }, "Select calendars that will be checked for availability ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, null, h("div", { class: "nylas-calendar-picker", part: "ncp" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Calendar availability"), h("p", null, "Select calendars that you\u2019d like to use for checking your availability.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-calendar-picker__dropdown" }, h("multi-select-dropdown", { name: 'calendar', label: "Select calendars that will be checked for availability", options: calendarOptions, exportparts: "msd__dropdown: ncp__dropdown, msd__dropdown-button: ncp__dropdown-button, msd__dropdown-content: ncp__dropdown-content" }, h("span", { slot: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available. The default is your primary calendar if none are selected.")))))) : (h("div", { class: "nylas-calendar-picker__loading" }, h("span", { class: "label" }, "Select calendars that will be checked for availability ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get is() { return "nylas-calendar-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-calendar-picker` component is a form input for selecting calendars.\n /\n@Component({\n tag: 'nylas-calendar-picker',\n styleUrl: 'nylas-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The organizer's email.\n /\n @Prop() organizerEmail?: string;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultSelectedCalendars: string[] = [];\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendars: string[] = [];\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string[];\n name: string;\n valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultSelectedCalendars.toString(), 'calendar');\n }\n }\n\n componentWillUpdate() {\n debug('nylas-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionsChanged')\n selectedOptionsChangedHandler(event: CustomEvent<{ value: string[]; name: string }>) {\n debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChangedHandler = (event: CustomEvent<{ value: string[]; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendars = [...value];\n this.internals.setFormValue(value.toString(), 'calendar');\n };\n this.valueChanged.emit({ ...event.detail, name: this.name, valueChangedHandler });\n }\n\n @RegisterComponent<NylasCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChangedHandler } = event.detail;\n // If a handler is passed, call it.\n if (valueChangedHandler) {\n valueChangedHandler(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n selected: this.defaultSelectedCalendars?.includes(calendar.id) \|\| (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-calendar-picker\">\n <div class=\"header\" part=\"ncp__header\">\n <h3>Calendar availability</h3>\n <p>Select calendars that you’d like to use for checking your availability.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-calendar-picker__dropdown\">\n <multi-select-dropdown name={'calendar'} label=\"Select calendars that will be checked for availability\" options={calendarOptions}>\n <span slot=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n The default is your primary calendar if none are selected.\n </span>\n </tooltip-component>\n </span>\n </multi-select-dropdown>\n </div>\n ) : (\n <div class=\"nylas-calendar-picker__loading\">\n <span class=\"label\">\n Select calendars that will be checked for availability <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js CHANGED Viewed

@@ -74,7 +74,7 @@ export class NylasCustomBookingFlow {
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: '8caff7b115db52f355185615eab1e5c0c3fe32db' }, h("div", { key: '9c43d51b15ceefa958560b8fbb0a684f77e58eb0', class: "nylas-custom-booking-flow" }, h("div", { key: '2d25054eef5b8208ad0e1b9ac165e023061cb85c', class: "header", part: "ncp__header" }, h("h3", { key: '63f570c5f8e6423123eaec621dacda10be0a33e6' }, "Customize booking flow"), h("p", { key: 'cf6b5cb225510a9bb6ba9cee1fa850caa331c9ea' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: 'fe9e837aba8f846a0b77a21eee365080d41b4e57' }, h("div", { key: '2405db5290bcd44a602fd9f91bb91e13a9d7ffc7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '2de829660fdba0da9e6cbcd6281c427b65414d90', class: "header", part: "ncbf__header" }, h("h3", { key: '13e3b9e450f54f04538c773ab2564513cdaf0fa5' }, "Customize booking flow"), h("p", { key: '9436439f81faf9aed4ff9029c5c0a08a268b5e59' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get is() { return "nylas-custom-booking-flow"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-custom-booking-flow.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAY9H~~,MAAM,OAAO,sBAAsB;;oBAKV,cAAc;2BAIP,EAAE;mCASO,EAAE;;IAYzC,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAC;IAC7D,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;QAExD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAC;QAEvD,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACtD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,kBAAkB,CAAC,CAAC;QAC/E,CAAC;QACD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9C,CAAC;IAED,mBAAmB;QACjB,KAAK,CAAC,2BAA2B,EAAE,qBAAqB,CAAC,CAAC;IAC5D,CAAC;IAED,kBAAkB;QAChB,KAAK,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC;IAC3D,CAAC;IAED,mBAAmB;QACjB,KAAK,CAAC,2BAA2B,EAAE,qBAAqB,CAAC,CAAC;IAC5D,CAAC;IAED,kBAAkB;QAChB,KAAK,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC;IAC3D,CAAC;IAQD,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,2BAA2B,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QAC1E,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAGD,4BAA4B,CAAC,KAAmD;QAC9E,KAAK,CAAC,2BAA2B,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAEjF,MAAM,YAAY,GAAG,CAAC,KAAmD,EAAE,EAAE;YAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAC/B,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,kBAAkB,CAAC,CAAC;QACpE,CAAC,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAC5D,CAAC;IAkBD,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,+BAA+B;gBACtC,KAAK,EAAE,SAAS;aACjB;YACD;gBACE,KAAK,EAAE,mCAAmC;gBAC1C,KAAK,EAAE,aAAa;aACrB;SACF,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,2BAA2B;~~gBACpC~~,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,~~aAAa~~;~~oBACpC~~,sFAA+B;oBAC/B,kIAA0E,CACtE;gBAEL,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,WAAK,KAAK,EAAC,qCAAqC;oBAC9C,YAAM,KAAK,EAAC,OAAO;;wBAEjB;4BACE,iBAAW,IAAI,EAAC,cAAc,GAAG;4BACjC,YAAM,IAAI,EAAC,iBAAiB,oLAGrB,CACW,CACf;oBACP,uBACE,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,cAAc,EACvB,UAAU,EAAE,KAAK,EACjB,qBAAqB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GACrG,CACE,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,oCAAoC;oBAC7C,YAAM,KAAK,EAAC,OAAO;;wBACqB,oBAAa,CAC9C;oBACP,WAAK,KAAK,EAAC,gBAAgB;wBACzB,6BAAuB,CACnB,CACF,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;~~AArDC~~;IAhBC,iBAAiB,CAA4G;QAC5H,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE;YACZ,YAAY,EAAE,KAAK,EACjB,KAAiI,EACjI,8BAA6D,EAC7D,EAAE;gBACF,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAEtC,IAAI,YAAY,EAAE,CAAC;oBACjB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;~~oDAqDD~~","sourcesContent":["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 /\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\">\n <div class=\"header\" part=\"~~ncp__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 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"]}
1	+ {"version":3,"file":"nylas-custom-booking-flow.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.css CHANGED Viewed

@@ -23,7 +23,6 @@
   --nylas-border-radius-2x: 0.5rem;
   --nylas-border-radius-3x: 0.75rem;
   --nylas-font-family: "Inter", sans-serif;
-  width: inherit;
 }
 .scheduler-editor {
@@ -74,7 +73,8 @@
 .scheduler-editor .form-contents .tab-content {
   max-width: 692px;
 }
-.scheduler-editor .form-contents .tab-content nylas-event-info div[slot=inputs] {
+.scheduler-editor .form-contents .tab-content nylas-event-info div[slot=inputs],
+.scheduler-editor .form-contents .tab-content nylas-event-limits div[slot=inputs] {
   display: flex;
   flex-direction: column;
   gap: 1rem;

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js CHANGED Viewed

@@ -13,8 +13,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
         return Reflect.metadata(k, v);
 };
 import { RegisterComponent } from "../../../common/register-component";
-import { Host, h } from "@stencil/core";
 import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+import TabContents from "./tab-contents";
 export class NylasEditorTabs {
     constructor() {
         this.formSubmissionHandler = async (event) => {
@@ -22,23 +23,27 @@ export class NylasEditorTabs {
             this.isLoading = true;
             this.hasUnsavedChanges = false;
             this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer } = this.formState;
+            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 configObject = {
+                ...(this.config?.id && { id: this.config.id }),
+                version: this.config?.version ?? '1.0.0',
                 availability: {
-                    duration_minutes: parseInt(duration),
+                    duration_minutes: duration ? parseInt(duration) : 0,
                     availability_rules: {
                         availability_method: this.config?.availability?.availability_rules?.availability_method ?? 'collective',
-                        buffer,
+                        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 ?? '',
                     },
                 },
                 participants: [
                     {
-                        name: organizer?.name ?? '',
-                        email: organizer?.email ?? '',
+                        name: organizer?.name ?? organizer?.email ?? this.currentUser?.name ?? this.currentUser?.email ?? '',
+                        email: organizer?.email ?? this.currentUser?.email ?? '',
                         is_organizer: true,
                         availability: {
-                            calendar_ids: calendarIds.length ? calendarIds : ['primary'],
+                            calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
                             open_hours: availability ?? [],
                         },
                         booking: {
@@ -52,6 +57,10 @@ export class NylasEditorTabs {
                     location: location?.toString() ?? '',
                     booking_type: bookingType?.toString() ?? 'booking',
                 },
+                scheduler: {
+                    available_days_in_future: availableDaysInFuture ?? 30,
+                    min_cancellation_notice: minCancellationNotice ?? 0,
+                },
             };
             const resetLoadingState = (_e) => {
                 this.isLoading = false;
@@ -60,50 +69,63 @@ export class NylasEditorTabs {
                     this.changesSaved = false;
                 }, 5000);
             };
-            this.schedulerConfigChanged.emit({ ...configObject, resetLoadingState });
+            this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, action: this.action });
         };
         this.calendars = undefined;
         this.config = undefined;
+        this.currentUser = undefined;
+        this.action = 'create';
         this.activeTab = 'eventInfo';
         this.isLoading = false;
         this.hasUnsavedChanges = false;
         this.changesSaved = false;
-        this.formState = this.getFormStateFromConfig();
+        this.formState = {};
     }
     configChangedHandler(newConfig) {
-        debug('nylas-editor-tabs', 'configChangedHandler', newConfig);
-        this.formState = this.getFormStateFromConfig();
+        debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.config);
+        this.formState = {
+            ...this.getFormStateFromConfig(newConfig),
+        };
+        if (newConfig.id) {
+            this.action = 'update';
+        }
+        else {
+            this.action = 'create';
+        }
     }
     connectedCallback() {
-        debug('nylas-editor-tabs', 'connectedCallback');
+        debug('[nylas-editor-tabs]', 'connectedCallback');
     }
     componentWillLoad() {
-        debug('nylas-editor-tabs', 'componentWillLoad');
+        debug('[nylas-editor-tabs]', 'componentWillLoad');
+        this.formState = this.getFormStateFromConfig(this.config);
     }
     componentDidLoad() {
-        debug('nylas-editor-tabs', 'componentDidLoad');
+        debug('[nylas-editor-tabs]', 'componentDidLoad');
     }
     disconnectedCallback() {
-        debug('nylas-editor-tabs', 'disconnectedCallback');
+        debug('[nylas-editor-tabs]', 'disconnectedCallback');
     }
     handleValueChanged(event) {
-        debug('nylas-editor-tabs', 'handleValueChanged', event);
+        debug('[nylas-editor-tabs]', 'handleValueChanged', event);
         this.formState = { ...this.formState, [event.detail.name]: event.detail.value };
         this.hasUnsavedChanges = true;
     }
-    getFormStateFromConfig() {
-        const organizerParticipant = this.config?.participants?.find(p => p.is_organizer);
+    getFormStateFromConfig(config) {
+        const organizerParticipant = config?.participants?.find(p => p.is_organizer);
         return {
-            title: this.config?.event_booking?.title ?? '',
-            description: this.config?.event_booking?.description ?? '',
-            duration: this.config?.availability?.duration_minutes?.toString() ?? '10',
+            title: config?.event_booking?.title ?? '',
+            description: config?.event_booking?.description ?? '',
+            duration: config?.availability?.duration_minutes?.toString() ?? '10',
             availability: organizerParticipant?.availability?.open_hours ?? undefined,
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
-            participants: this.config?.participants ?? [],
+            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,
         };
     }
     updateFormState() {
@@ -140,6 +162,12 @@ export class NylasEditorTabs {
                 case 'buffer-time':
                     this.formState.buffer = JSON.parse(value.toString());
                     break;
+                case 'limit-future-bookings':
+                    this.formState.availableDaysInFuture = parseInt(value.toString());
+                    break;
+                case 'min-cancellation-notice':
+                    this.formState.minCancellationNotice = parseInt(value.toString());
+                    break;
             }
         });
         this.formState = { ...this.formState };
@@ -149,34 +177,15 @@ export class NylasEditorTabs {
         this.updateFormState();
         this.activeTab = tabName;
     }
-    renderTabContent(formState) {
-        switch (this.activeTab) {
-            case 'eventInfo':
-                const eventTitle = formState.title;
-                const eventDescription = formState.description;
-                const eventDuration = parseInt(formState.duration);
-                const location = formState.location;
-                return (h("div", null, h("nylas-event-info", null, h("div", { slot: "inputs" }, h("nylas-event-title", { name: "title", eventTitle: eventTitle }), h("nylas-event-duration", { name: "duration", eventDurationMinutes: eventDuration }), h("nylas-location-component", { name: "location", eventLocation: location }), h("nylas-event-description", { name: "description", eventDescription: eventDescription })))));
-            case 'availability':
-                const openHours = formState.availability;
-                const timezone = openHours?.[0]?.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", null, h("nylas-booking-calendar-picker", { name: "booking-calendar", calendars: this.calendars ?? [], defaultBookingCalendar: bookingCalendar }), h("nylas-calendar-picker", { name: "calendars", calendars: this.calendars ?? [], defaultSelectedCalendars: selectedCalendars, organizerEmail: organizerEmail }), h("nylas-availability-picker", { name: "availability", openHours: openHours, defaultTimezone: timezone })));
-            case 'bookingOptions':
-                return (h("div", null, h("nylas-buffer-time", { name: "buffer-time", buffer: formState.buffer }), h("nylas-custom-booking-flow", { name: "booking-type", bookingType: formState.bookingType })));
-        }
-    }
     render() {
-        return (h(Host, { key: '19e6c127b0c0f18c9be2418964677ff58328ed41' }, h("form", { key: 'bd613b593967617376d5da7999efe4afeacfa02c', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el) }, h("div", { key: '8fa38579a290e364608b9cdb98f7d56882d36554', class: "form-contents" }, h("div", { key: 'f1df27ef2066f4c5c2f3bdbb461d50b5d4907735', class: "tabs" }, h("button", { key: '08712b407a4d7010390b2c21b8be5ec574dbbb25', class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { key: '2b7bb89183aff870d09a6a6d7d4163e0d134da1d', width: "16", height: "16" }), "Event Info"), h("button", { key: '91039f8205c1dc42eb7bc9ecad4f712919a41456', class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { key: 'd6d54b4a2c281db5a2a0e5cf2d41788ca81411a0', width: "16", height: "16" }), "Availability"), h("button", { key: '5744f63795f0c791bb4eeacfb07355b9dc47bad1', class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { key: 'ed3f6bbbf5e2a867a1c8803bc1e19ab344c492c4', width: "16", height: "16" }), "Booking Options")), h("div", { key: '4e703aa0c814b7e4f322cc3df7546d52dc9da866', class: "tab-content" }, this.renderTabContent(this.formState))), h("div", { key: '17b58229c11d08bae176a06f1f46247b32e14115', class: "footer" }, h("p", { key: '0cdfe2e1990a2ff0ab8ba9a2b965fdcaef02994e', class: {
+        debug('[nylas-editor-tabs]', 'render', this.formState);
+        return (h(Host, { key: 'e26c05a424e53163d97bd14723151c73a870b8be' }, h("form", { key: 'e5c3af66eebb0d133e8a6931d84aa12b5e07d329', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el) }, h("div", { key: 'd24109dc87e9b18fb62bf684c25c08dfa58334ed', class: "form-contents" }, h("div", { key: 'b74f053cbd15654c1d3d43af8a765607fdcd28d3', class: "tabs" }, h("button", { key: 'ccf9034c5bf0194ad5db7ad29ddd46eb6846cfbb', class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { key: '6527d78a3d54f54baa6f7c4552937dbfe992ec96', width: "16", height: "16" }), "Event Info"), h("button", { key: 'e561f4f7ab01629860f13812a14d0bdf92ad7d6b', class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { key: 'dde4d0f70cdf0aad66e25e7b683372a0c9035398', width: "16", height: "16" }), "Availability"), h("button", { key: '8a8131ed4f2f07b6f9d228d9bc86667718f5766f', class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { key: '1cc07a769eca6090749bc0c04ca3aa283864d925', width: "16", height: "16" }), "Booking Options")), h("div", { key: '2802d58acf7965856f6802b17794dc34cec424e7', class: "tab-content" }, h(TabContents, { key: 'c965af9cecdd91977c8b036f504e33620443b7af', formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.config?.id ?? 'new' }))), h("div", { key: '2faed468348afb67f0fc867de91c901c5c1546f5', class: "footer" }, h("p", { key: 'd79a6e1562cd3ced4b84a01f8939d8d5c047979c', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
-            } }, this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''), h("button", { key: '8d22df55b55d23caced2939821fa027653a26c2b', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : ('Save changes'))))));
+            } }, this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '1e77a73ef49c9a17a3cdd7d9adcf49515765de7c', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes'))))));
     }
     static get is() { return "nylas-editor-tabs"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["nylas-editor-tabs.scss"]
@@ -214,13 +223,34 @@ export class NylasEditorTabs {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SchedulerConfig",
-                    "resolved": "undefined | { id?: string | undefined; version: string; availability: { duration_minutes: number; availability_rules?: { availability_method: string; buffer?: { before: number; after: number; } | undefined; } | undefined; }; participants: { name: string; email: string; is_organizer: boolean; availability: { calendar_ids: string[]; open_hours: any[]; }; booking?: { calendar_id: string; } | undefined; }[]; event_booking: { title: string; description: string; location?: string | undefined; booking_type?: string | undefined; }; }",
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
                     "references": {
-                        "SchedulerConfig": {
+                        "Configuration": {
                             "location": "import",
                             "path": "@nylas/core",
-                            "id": "../nylas-js-core/dist/index.d.ts::Config"
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "currentUser": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "User",
+                    "resolved": "undefined | { id: string; email: string; name?: string | undefined; }",
+                    "references": {
+                        "User": {
+                            "location": "import",
+                            "path": "@/common/nylas-api-request",
+                            "id": "src/common/nylas-api-request.ts::User"
                         }
                     }
                 },
@@ -235,6 +265,7 @@ export class NylasEditorTabs {
     }
     static get states() {
         return {
+            "action": {},
             "activeTab": {},
             "isLoading": {},
             "hasUnsavedChanges": {},
@@ -255,7 +286,7 @@ export class NylasEditorTabs {
                 },
                 "complexType": {
                     "original": "SchedulerEventDetail",
-                    "resolved": "Partial<Config> & { resetLoadingState?: ((e: CustomEvent<any>) => void) | undefined; }",
+                    "resolved": "{ config: Partial<Configuration>; action: \"create\" | \"update\"; resetLoadingState?: ((e: CustomEvent<any>) => void) | undefined; }",
                     "references": {
                         "SchedulerEventDetail": {
                             "location": "global",
@@ -287,13 +318,20 @@ __decorate([
         stateToProps: new Map([
             ['schedulerConfig.calendars', 'calendars'],
             ['schedulerConfig.config', 'config'],
+            ['schedulerConfig.currentUser', 'currentUser'],
         ]),
         eventToProps: {
-            schedulerConfigChanged: async (event, _nylasSchedulerConfigConnector) => {
-                const { resetLoadingState } = event.detail;
+            schedulerConfigChanged: async (event, nylasSchedulerConfigConnector) => {
+                const { resetLoadingState, action, config } = event.detail;
                 if (resetLoadingState) {
                     resetLoadingState(event);
                 }
+                if (action === 'update') {
+                    await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);
+                }
+                else {
+                    await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);
+                }
             },
         },
         fireRegisterEvent: true,