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

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

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

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

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

@@ -18,7 +18,8 @@ import { Host, h } from "@stencil/core";
 export class NylasBookingCalendarPicker {
     constructor() {
         this.calendars = undefined;
-        this.name = 'calendar';
+        this.currentUser = undefined;
+        this.name = 'booking-calendar';
         this.defaultBookingCalendar = '';
         this.selectedCalendar = '';
     }
@@ -34,10 +35,11 @@ export class NylasBookingCalendarPicker {
     }
     componentDidLoad() {
         debug('nylas-booking-calendar-picker', 'componentDidLoad');
+        this.defaultBookingCalendar = this.defaultBookingCalendar || this.currentUser?.email || '';
         if (typeof this.internals.setFormValue === 'function') {
             this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');
         }
-        this.selectedCalendar = this.defaultBookingCalendar;
+        this.selectedCalendar = this.defaultBookingCalendar || this.currentUser?.email || '';
     }
     componentWillUpdate() {
         debug('nylas-booking-calendar-picker', 'componentWillUpdate');
@@ -60,9 +62,9 @@ export class NylasBookingCalendarPicker {
         const valueChanged = (event) => {
             const { value } = event.detail;
             this.selectedCalendar = value;
-            this.internals.setFormValue(value.toString(), 'booking-calendar');
+            this.internals.setFormValue(value.toString(), this.name);
         };
-        this.valueChanged.emit({ ...event.detail, valueChanged });
+        this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });
     }
     render() {
         const calendarOptions = this.calendars?.map(calendar => {
@@ -109,6 +111,27 @@ export class NylasBookingCalendarPicker {
                     "text": "The calendars to choose from."
                 }
             },
+            "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current logged in user."
+                }
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -125,7 +148,7 @@ export class NylasBookingCalendarPicker {
                 },
                 "attribute": "name",
                 "reflect": false,
-                "defaultValue": "'calendar'"
+                "defaultValue": "'booking-calendar'"
             },
             "defaultBookingCalendar": {
                 "type": "string",
@@ -196,6 +219,10 @@ export class NylasBookingCalendarPicker {
 __decorate([
     RegisterComponent({
         name: 'nylas-booking-calendar-picker',
+        stateToProps: new Map([
+            ['schedulerConfig.calendars', 'calendars'],
+            ['schedulerConfig.currentUser', 'currentUser'],
+        ]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-booking-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-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-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: 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 valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-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-booking-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.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar;\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', '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.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\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 calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\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 </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__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-booking-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-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';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: 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 valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-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-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', '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.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-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; 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 calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\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 </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__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-calendar-picker/nylas-calendar-picker.js CHANGED Viewed

@@ -18,11 +18,15 @@ import { Host, h } from "@stencil/core";
 export class NylasCalendarPicker {
     constructor() {
         this.calendars = undefined;
-        this.organizerEmail = undefined;
+        this.currentUser = undefined;
         this.name = 'calendar';
         this.defaultSelectedCalendars = [];
         this.selectedCalendars = [];
     }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
     connectedCallback() {
         debug('nylas-calendar-picker', 'connectedCallback');
     }
@@ -51,10 +55,6 @@ export class NylasCalendarPicker {
     componentDidRender() {
         debug('nylas-calendar-picker', 'componentDidRender');
     }
-    elementNameChangedHandler(newValue) {
-        debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
-        this.host.setAttribute('name', newValue);
-    }
     selectedOptionsChangedHandler(event) {
         debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);
         const valueChangedHandler = (event) => {
@@ -69,7 +69,8 @@ export class NylasCalendarPicker {
             return {
                 value: calendar.id,
                 label: calendar.name,
-                selected: this.defaultSelectedCalendars?.includes(calendar.id) || (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),
+                selected: this.defaultSelectedCalendars?.includes(calendar.id) ||
+                    (this.defaultSelectedCalendars?.includes('primary') || this.defaultSelectedCalendars?.length === 0 ? calendar.id === this.currentUser?.email : false),
             };
         }) ?? [];
         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...")))))));
@@ -110,22 +111,26 @@ export class NylasCalendarPicker {
                     "text": "The calendars to choose from."
                 }
             },
-            "organizerEmail": {
-                "type": "string",
+            "currentUser": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "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"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The organizer's email."
-                },
-                "attribute": "organizer-email",
-                "reflect": false
+                }
             },
             "name": {
                 "type": "string",
@@ -212,6 +217,10 @@ export class NylasCalendarPicker {
 __decorate([
     RegisterComponent({
         name: 'nylas-calendar-picker',
+        stateToProps: new Map([
+            ['schedulerConfig.calendars', 'calendars'],
+            ['schedulerConfig.currentUser', 'currentUser'],
+        ]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChangedHandler } = event.detail;

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 * @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"]}
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';\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"]}

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

@@ -17,10 +17,25 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasCustomBookingFlow {
     constructor() {
+        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');
     }
@@ -33,10 +48,6 @@ export class NylasCustomBookingFlow {
     }
     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');
@@ -50,10 +61,6 @@ export class NylasCustomBookingFlow {
     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) => {
@@ -74,7 +81,7 @@ export class NylasCustomBookingFlow {
                 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 is() { return "nylas-custom-booking-flow"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +98,27 @@ export class NylasCustomBookingFlow {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -162,6 +190,9 @@ export class NylasCustomBookingFlow {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }];
     }
     static get listeners() {
@@ -178,6 +209,7 @@ export class NylasCustomBookingFlow {
 __decorate([
     RegisterComponent({
         name: 'nylas-custom-booking-flow',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;

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":"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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"]}
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';\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"]}