@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/scheduler/nylas-scheduler/nylas-scheduler.js

@@ -0,0 +1,533 @@
+import { NylasBaseProvider } from "../../../common/abstract-provider";
+import { NylasSchedulerConnector } from "../../../connector/nylas-scheduler-connector/index";
+import { CreateNylasSchedulerStore } from "../../../stores/scheduler-store";
+import { NotificationType } from "@nylas/core";
+import { Host, h } from "@stencil/core";
+import { debug } from "../../../utils/utils";
+import { SchedulerView } from "./scheduler-view";
+const genericError = { title: 'Something went wrong...', type: NotificationType.Error, category: 'internal' };
+export class NylasScheduler {
+    constructor() {
+        this.mode = 'app';
+        this.defaultSchedulerStoreState = undefined;
+        this.sessionId = undefined;
+        this.schedulerApiUrl = 'https://elements-staging.us.nylas.com';
+        this.bookingInfo = undefined;
+        this.rescheduleId = undefined;
+        this.eventOverrides = {};
+        this.loadingState = undefined;
+        this.themeConfig = undefined;
+        this.automaticComponentRegistration = true;
+        this.selectedDateLabel = new Date().toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';
+    }
+    connectedCallback() {
+        debug(`[nylas-scheduler] connectedCallback`);
+    }
+    async componentWillLoad() {
+        debug(`[nylas-scheduler] Component will load`, { eventOverrides: this.eventOverrides });
+        if (!this.sessionId) {
+            throw new Error('The page slug or session Id is required');
+        }
+        this.stores = {
+            scheduler: CreateNylasSchedulerStore({
+                bookingInfo: this.bookingInfo,
+                ...this.defaultSchedulerStoreState,
+            }),
+        };
+        this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);
+        const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
+        this.nylasSchedulerConnector = new NylasSchedulerConnector({
+            schedulerAPIURL: this.schedulerApiUrl,
+            sessionId: this.sessionId,
+            nylasSchedulerStore,
+        });
+        this.init.emit(this.host);
+        this.baseProvider?.componentWillLoad(this.nylasSchedulerConnector);
+        if (this.themeConfig) {
+            for (const [key, value] of Object.entries(this.themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
+    async componentDidLoad() {
+        this.baseProvider?.componentDidLoad();
+        let result;
+        const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
+        const selectedDate = nylasSchedulerStore?.get('selectedDate');
+        if (!selectedDate) {
+            result = await this.nylasSchedulerConnector?.scheduler.getAvailability();
+        }
+        else {
+            const startTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1).getTime() / 1000;
+            const endTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 1).getTime() / 1000;
+            result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);
+        }
+        if (!result || 'error' in result) {
+            this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+        }
+        const firstAvailableDate = nylasSchedulerStore?.get('availability').find((timeslot) => new Date(timeslot.start_time) > new Date());
+        let _selectedDate = new Date();
+        if (firstAvailableDate)
+            _selectedDate = firstAvailableDate.start_time;
+        nylasSchedulerStore?.set('selectedDate', _selectedDate);
+        this.selectedDateLabel = _selectedDate.toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';
+    }
+    componentDisconnected() {
+        this.baseProvider?.componentDisconnected();
+    }
+    bookingInfoChanged(newVal) {
+        this.stores?.scheduler.set('bookingInfo', newVal);
+    }
+    async registerComponentHandler(event) {
+        this.baseProvider?.registerComponent(event.detail);
+    }
+    async unregisterComponentHandler(event) {
+        this.baseProvider?.unregisterComponent(event.detail);
+    }
+    async monthChangedHandler(event) {
+        const date = event.detail;
+        const startTime = new Date(date.getFullYear(), date.getMonth(), 1).getTime() / 1000;
+        const endTime = new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() / 1000;
+        const result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);
+        if (!result || 'error' in result) {
+            this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+        }
+    }
+    async bookButtonClickedHandler(event) {
+        if (this.rescheduleId) {
+            const result = await this.nylasSchedulerConnector?.scheduler.rescheduleBooking(this.rescheduleId, event.detail);
+            if (!result || 'error' in result) {
+                this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+            }
+            else {
+                this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);
+            }
+            return;
+        }
+        const result = await this.nylasSchedulerConnector?.scheduler.bookTimeslot(event.detail);
+        if (!result || 'error' in result) {
+            this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+        }
+        else {
+            this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);
+        }
+    }
+    async cancelButtonClickedHandler() {
+        this.baseProvider?.getStore('scheduler').set('bookedEventLoading', false);
+        this.baseProvider?.getStore('scheduler').set('bookedEventError', null);
+    }
+    selectedDateChanged(event) {
+        const date = event.detail;
+        this.selectedDateLabel = date ? date.toLocaleDateString(undefined, { dateStyle: 'full' }) : 'No date selected';
+    }
+    async getNylasSchedulerStore() {
+        return this.baseProvider?.getStore('scheduler');
+    }
+    async getNylasSchedulerConnector() {
+        return this.nylasSchedulerConnector;
+    }
+    async getRef() {
+        return this.host;
+    }
+    getErrorObject(error) {
+        return {
+            title: error?.title || genericError.title,
+            category: error?.type || genericError.category,
+            type: NotificationType.Error,
+            description: error?.message || '',
+            id: new Date().getTime().toString(),
+        };
+    }
+    render() {
+        const showDefaultScheduler = this.mode === 'app';
+        const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
+        const eventInfo = nylasSchedulerStore?.get('eventInfo');
+        const showThankYouMessage = nylasSchedulerStore?.get('showThankYouMessage');
+        const showBookingForm = nylasSchedulerStore?.get('showBookingForm');
+        const cancelledEvent = nylasSchedulerStore?.get('cancelledEvent');
+        if (showDefaultScheduler && cancelledEvent) {
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, h("nylas-cancelled-event-card", { cancelledEvent: cancelledEvent, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" })))));
+        }
+        if (showDefaultScheduler && showThankYouMessage && eventInfo) {
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "booked-event-page", part: "booked-event-page" }, h("nylas-booked-event-card", { eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" })))));
+        }
+        if (showDefaultScheduler && !showThankYouMessage && !showBookingForm) {
+            const timeslotPickerCTALabel = this.host.querySelector('[slot="timeslot-picker-cta-label"]');
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "select-date-page", part: "select-date-page" }, h("div", { class: "left-panel" }, h("nylas-date-picker", { exportparts: "ndp, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--selected, ndp__date--current-day, ndp__date--current-month" }), h("div", { class: "border" }), h("nylas-locale-switch", null)), h("div", { class: "right-panel" }, h("div", { class: "wrapper" }, h("h2", null, h("calendar-icon", null), h("span", { id: "selectedDate" }, this.selectedDateLabel)), h("nylas-timeslot-picker", { exportparts: "ntp, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary" }, timeslotPickerCTALabel && (h("span", { slot: "timeslot-picker-cta-label" }, h("slot", { name: "timeslot-picker-cta-label" }))))))))));
+        }
+        if (showDefaultScheduler && !showThankYouMessage && showBookingForm) {
+            const customTemplateSlot = this.host.querySelector('[slot="custom-booking-form"]');
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "additional-data-page", part: "additional-data-page" }, h("div", { class: "left-panel" }, h("div", { class: "wrapper" }, h("nylas-selected-event-card", { exportparts: "nsec, nsec__card, nsec__icon, nsec__date, nsec__time" }))), h("div", { class: "right-panel" }, h("div", { class: "wrapper" }, h("nylas-booking-form", { exportparts: "nbf, nbf__input-label, nbf__input-textfield, nbf__button-ghost, nbf__button-primary, nbf__button-outline" }, customTemplateSlot && (h("div", { slot: "custom-booking-form" }, h("slot", { name: "custom-booking-form" }))))))))));
+        }
+        return (h(Host, null, h("slot", null)));
+    }
+    static get is() { return "nylas-scheduler"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-scheduler.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-scheduler.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'app' | 'composable'",
+                    "resolved": "\"app\" | \"composable\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This is used to set the mode for the Nylas Scheduler.\nThe mode can be either `app` or `composable`. The default mode is `app`.\n- `app`: This mode is used to show the default Nylas Scheduler UI.\n- `composable`: This mode is used to show the composable Nylas Scheduler UI\n   by passing the individual scheduler components as children."
+                },
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'app'"
+            },
+            "defaultSchedulerStoreState": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasSchedulerStoreState",
+                    "resolved": "NylasSchedulerStoreState | undefined",
+                    "references": {
+                        "NylasSchedulerStoreState": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::NylasSchedulerStoreState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The default scheduler store state.\nUsed to set the initial state of the scheduler store."
+                }
+            },
+            "sessionId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The session ID for the Nylas Scheduler.\nThis is used to authenticate the user."
+                },
+                "attribute": "session-id",
+                "reflect": false
+            },
+            "schedulerApiUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL for the Nylas Scheduler API. (staging or production URL)"
+                },
+                "attribute": "scheduler-api-url",
+                "reflect": false,
+                "defaultValue": "'https://elements-staging.us.nylas.com'"
+            },
+            "bookingInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasSchedulerBookingData",
+                    "resolved": "undefined | { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date | undefined; endTime?: Date | undefined; timezone?: string | undefined; guests?: NylasSchedulerBookingParticipant[] | undefined; additionalFields?: { [key: string]: any; } | undefined; }",
+                    "references": {
+                        "NylasSchedulerBookingData": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::NylasSchedulerBookingData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This enables passing the bookingInfo object to the Scheduler UI for direct booking event creation.\nWhen used with timeslotConfirmedHandler, it bypasses the additional data page and immediately\ninvokes the handler after booking."
+                }
+            },
+            "rescheduleId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Booking Id required for rescheduling flow."
+                },
+                "attribute": "reschedule-id",
+                "reflect": false
+            },
+            "eventOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SchedulerEventOverride",
+                    "resolved": "Partial<{ timeslotSelected: (event: CustomEvent<Timeslot>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; timeslotConfirmed: (event: CustomEvent<Timeslot>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; loadingState: (event: CustomEvent<unknown>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; dateSelected: (event: CustomEvent<Date>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; monthChanged: (event: CustomEvent<Date>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; timezoneChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; languageChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; openHoursChanged: (event: CustomEvent<OpenHour[]>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; bookedEventError: (event: CustomEvent<unknown>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; bookingInfo: (event: CustomEvent<unknown>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; nameChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; emailChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; backButtonClicked: (event: CustomEvent<boolean>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; detailsConfirmed: (event: CustomEvent<NylasSchedulerBookingData>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelBookingButtonClicked: (event: CustomEvent<{ bookingId: string; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; rescheduleButtonClicked: (event: CustomEvent<{ bookingId: string; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; }> & EventOverride<NylasSchedulerConnectorInterface>",
+                    "references": {
+                        "SchedulerEventOverride": {
+                            "location": "import",
+                            "path": "@/common/component-types",
+                            "id": "src/common/component-types.ts::SchedulerEventOverride"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This provides an easy way to override the default function of the event emitter.\nAn example of this is the `timeslotConfirmed` event. By default, this event will set the scheduler store state for `showBookingForm` to `true` which will\nshow the booking form. However, if you want to override this behavior, you can pass in the prop `eventOverride` like:\n```html\n<nylas-scheduler eventOverride={{\"timeslotConfirmed\": (event, nylasConnector) => { console.log(\"Timeslot confirmed event fired!\"); } }} />\n```"
+                },
+                "defaultValue": "{}"
+            },
+            "loadingState": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingState",
+                    "resolved": "undefined | { api: \"availability\" | \"createBooking\" | \"cancelBooking\" | \"rescheduleBooking\"; }",
+                    "references": {
+                        "LoadingState": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::LoadingState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data.\nFor example, when fetching availability, the loading state can be set to:\n```js\n loadingState={ api: 'availability' }\n```"
+                }
+            },
+            "themeConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeConfig",
+                    "resolved": "undefined | { '--nylas-primary'?: string | undefined; '--nylas-info'?: string | undefined; '--nylas-success'?: string | undefined; '--nylas-warning'?: string | undefined; '--nylas-error'?: string | undefined; '--nylas-error-pressed'?: string | undefined; '--nylas-base-0'?: string | undefined; '--nylas-base-25'?: string | undefined; '--nylas-base-50'?: string | undefined; '--nylas-base-100'?: string | undefined; '--nylas-base-200'?: string | undefined; '--nylas-base-300'?: string | undefined; '--nylas-base-400'?: string | undefined; '--nylas-base-500'?: string | undefined; '--nylas-base-600'?: string | undefined; '--nylas-base-700'?: string | undefined; '--nylas-base-800'?: string | undefined; '--nylas-base-900'?: string | undefined; '--nylas-base-950'?: string | undefined; '--nylas-font-family'?: string | undefined; '--nylas-font-size'?: string | undefined; '--nylas-border-radius'?: string | undefined; '--nylas-border-radius-2x'?: string | undefined; '--nylas-border-radius-3x'?: string | undefined; }",
+                    "references": {
+                        "ThemeConfig": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::ThemeConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme config, used to automatically generate a theme with color palette and\nCSS variables to customize the look and feel of the Nylas Scheduler."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "automaticComponentRegistration": {},
+            "selectedDateLabel": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "init",
+                "name": "init",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the provider is initialized.\nIt can be used to set the initial state of the provider,\nor to prevent the provider from firing some default behavior."
+                },
+                "complexType": {
+                    "original": "HTMLNylasSchedulerElement",
+                    "resolved": "HTMLNylasSchedulerElement",
+                    "references": {
+                        "HTMLNylasSchedulerElement": {
+                            "location": "global",
+                            "id": "global::HTMLNylasSchedulerElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "nylasSchedulerError",
+                "name": "nylasSchedulerError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Notification",
+                    "resolved": "{ id: string; type: NotificationType; title: string; code?: number | undefined; category: string; description?: string | undefined; }",
+                    "references": {
+                        "Notification": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Notification"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getNylasSchedulerStore": {
+                "complexType": {
+                    "signature": "() => Promise<NylasSchedulerStoreType | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NylasSchedulerStoreState": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::NylasSchedulerStoreState"
+                        },
+                        "NylasSchedulerStoreType": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::NylasSchedulerStoreType"
+                        }
+                    },
+                    "return": "Promise<ObservableMap<NylasSchedulerStoreState> | undefined>"
+                },
+                "docs": {
+                    "text": "This method is used to retrieve the NylasScheduler instance",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The NylasScheduler instance"
+                        }]
+                }
+            },
+            "getNylasSchedulerConnector": {
+                "complexType": {
+                    "signature": "() => Promise<NylasSchedulerConnector | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NylasSchedulerConnector": {
+                            "location": "import",
+                            "path": "@/connector/nylas-scheduler-connector",
+                            "id": "src/connector/nylas-scheduler-connector/index.ts::NylasSchedulerConnector"
+                        }
+                    },
+                    "return": "Promise<NylasSchedulerConnector | undefined>"
+                },
+                "docs": {
+                    "text": "This method is used to retrieve the NylasConnector instance",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The NylasConnector instance"
+                        }]
+                }
+            },
+            "getRef": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLNylasSchedulerElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLNylasSchedulerElement": {
+                            "location": "global",
+                            "id": "global::HTMLNylasSchedulerElement"
+                        }
+                    },
+                    "return": "Promise<HTMLNylasSchedulerElement>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "bookingInfo",
+                "methodName": "bookingInfoChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "registerComponent",
+                "method": "registerComponentHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "unregisterComponent",
+                "method": "unregisterComponentHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "monthChanged",
+                "method": "monthChangedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "detailsConfirmed",
+                "method": "bookButtonClickedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cancelButtonClicked",
+                "method": "cancelButtonClickedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dateSelected",
+                "method": "selectedDateChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nylas-scheduler.js.map

package/dist/collection/components/scheduler/nylas-scheduler/nylas-scheduler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-scheduler.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-scheduler/nylas-scheduler.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { RegisteredComponent } from '@/common/register-component';\nimport type { SchedulerEventOverride } from '@/common/component-types';\nimport { NylasSchedulerConnector } from '@/connector/nylas-scheduler-connector';\nimport { CreateNylasSchedulerStore, LoadingState, NylasSchedulerStoreState, NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { NylasSchedulerBookingData, ThemeConfig, Notification, NotificationType, NylasErrorResponse } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { debug } from '@/utils/utils';\nimport { SchedulerView } from './scheduler-view';\n\nconst genericError = { title: 'Something went wrong...', type: NotificationType.Error, category: 'internal' };\n\n/**\n * The Nylas Scheduler component is used to show the Nylas Scheduler UI.\n *\n * @slot custom-booking-form - This slot is used to pass a custom booking form to the Nylas Scheduler.\n * @slot timeslot-picker-cta-label - This slot is used to pass a custom label to the timeslot picker CTA. The default label is \"Next\".\n *\n * @part ndp - [nylas-date-picker] The date picker host.\n * @part ndp__month-header - [nylas-date-picker] The month header.\n * @part ndp__month-button - [nylas-date-picker] The month button.\n * @part ndp__day - [nylas-date-picker] The day.\n * @part ndp__date - [nylas-date-picker] The date.\n * @part ndp__date--selected - [nylas-date-picker] The selected date.\n * @part ndp__date--current-day - [nylas-date-picker] The current day.\n * @part ndp__date--current-month - [nylas-date-picker] The dates in the current month.\n * @part ntp - [nylas-timeslot-picker] The timeslot picker component.\n * @part ntp__timeslot - [nylas-timeslot-picker] The timeslot button.\n * @part ntp__timeslot--selected - [nylas-timeslot-picker] The selected timeslot button.\n * @part ntp__button-primary - [nylas-timeslot-picker] The timeslot picker CTA.\n * @part nsec - [nylas-selected-event-card] The selected event card component.\n * @part nsec__card - [nylas-selected-event-card] The card component.\n * @part nsec__icon - [nylas-selected-event-card] The calendar icon.\n * @part nsec__date - [nylas-selected-event-card] The date selected.\n * @part nsec__time - [nylas-selected-event-card] The timeslot selected.\n * @part nbf - [nylas-booking-form] The booking form host.\n * @part nbf__input-label - [nylas-booking-form] The input label.\n * @part nbf__input-textfield - [nylas-booking-form] The input textfield.\n * @part nbf__button-ghost - [nylas-booking-form] The ghost button for adding guests.\n * @part nbf__button-primary - [nylas-booking-form] The primary button for booking.\n * @part nbf__button-outline - [nylas-booking-form] The outline button for canceling.\n * @part ncec - [nylas-cancelled-event-card] The cancelled event card host.\n * @part ncec__icon - [nylas-cancelled-event-card] The calendar icon.\n * @part ncec__title - [nylas-cancelled-event-card] The title of the cancelled event card.\n * @part ncec__description - [nylas-cancelled-event-card] The description of the cancelled event card.\n * @part ncec__button-outline - [nylas-cancelled-event-card] The close button CTA.\n * @part ncec__card - [nylas-cancelled-event-card] The cancelled event card.\n * @part nbec - [nylas-booked-event-card] The booked event card host.\n * @part nbec__card - [nylas-booked-event-card] The booked event card.\n * @part nbec__title - [nylas-booked-event-card] The title of the booked event card.\n * @part nbec__description - [nylas-booked-event-card] The description of the booked event card.\n * @part nbec__button-outline - [nylas-booked-event-card] The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - [nylas-booked-event-card] The cancel button CTA.\n * @part nbec__reschedule-cta - [nylas-booked-event-card] The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-scheduler',\n  styleUrl: 'nylas-scheduler.scss',\n  shadow: true,\n})\nexport class NylasScheduler {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: { scheduler: NylasSchedulerStoreType };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Scheduler Connector instance.\n   * The branins of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasSchedulerConnector?: NylasSchedulerConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSchedulerElement;\n\n  /**\n   * This is used to set the mode for the Nylas Scheduler.\n   * The mode can be either `app` or `composable`. The default mode is `app`.\n   * - `app`: This mode is used to show the default Nylas Scheduler UI.\n   * - `composable`: This mode is used to show the composable Nylas Scheduler UI\n   *    by passing the individual scheduler components as children.\n   */\n  @Prop() readonly mode: 'app' | 'composable' = 'app';\n\n  /**\n   * The default scheduler store state.\n   * Used to set the initial state of the scheduler store.\n   */\n  @Prop({ attribute: 'default-scheduler-store-state' }) readonly defaultSchedulerStoreState?: NylasSchedulerStoreState;\n\n  /**\n   * The session ID for the Nylas Scheduler.\n   * This is used to authenticate the user.\n   */\n  @Prop() readonly sessionId?: string;\n\n  /**\n   * The URL for the Nylas Scheduler API. (staging or production URL)\n   */\n  @Prop() readonly schedulerApiUrl: string = 'https://elements-staging.us.nylas.com';\n\n  /**\n   * This enables passing the bookingInfo object to the Scheduler UI for direct booking event creation.\n   * When used with timeslotConfirmedHandler, it bypasses the additional data page and immediately\n   * invokes the handler after booking.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * Booking Id required for rescheduling flow.\n   */\n  @Prop() readonly rescheduleId?: string;\n\n  /**\n   * This provides an easy way to override the default function of the event emitter.\n   * An example of this is the `timeslotConfirmed` event. By default, this event will set the scheduler store state for `showBookingForm` to `true` which will\n   * show the booking form. However, if you want to override this behavior, you can pass in the prop `eventOverride` like:\n   * ```html\n   * <nylas-scheduler eventOverride={{\"timeslotConfirmed\": (event, nylasConnector) => { console.log(\"Timeslot confirmed event fired!\"); } }} />\n   * ```\n   */\n  @Prop({ attribute: 'event-overrides' }) readonly eventOverrides: SchedulerEventOverride = {};\n\n  /**\n   * The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data.\n   * For example, when fetching availability, the loading state can be set to:\n   * ```js\n   *  loadingState={ api: 'availability' }\n   * ```\n   */\n  @Prop() readonly loadingState?: LoadingState;\n\n  /**\n   * Theme config, used to automatically generate a theme with color palette and\n   * CSS variables to customize the look and feel of the Nylas Scheduler.\n   */\n  @Prop() readonly themeConfig?: ThemeConfig;\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @State() automaticComponentRegistration: boolean = true;\n\n  /**\n   * The selected date label for the Nylas Scheduler.\n   * This is used to set the initial date label for the Nylas Scheduler.\n   */\n  @State() selectedDateLabel: string = new Date().toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';\n\n  /**\n   * This event is fired when the provider is initialized.\n   * It can be used to set the initial state of the provider,\n   * or to prevent the provider from firing some default behavior.\n   */\n  @Event({ cancelable: true }) init!: EventEmitter<HTMLNylasSchedulerElement>;\n\n  @Event({\n    eventName: 'nylasSchedulerError',\n  })\n  nylasSchedulerError!: EventEmitter<Notification>;\n\n  /**\n   * This function is called when the component is connected to the DOM.\n   * At this point in the component lifecycle, the base provider has not yet\n   * been initialized. So avoid using the base provider in this method or stores\n   * in this method.\n   */\n  connectedCallback() {\n    debug(`[nylas-scheduler] connectedCallback`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-scheduler] Component will load`, { eventOverrides: this.eventOverrides });\n\n    // Throw an error if the page slug is not set\n    // TODO: We should not throw errors like this, the end user cannot handle them if we do that.\n    if (!this.sessionId) {\n      throw new Error('The page slug or session Id is required');\n    }\n\n    this.stores = {\n      scheduler: CreateNylasSchedulerStore({\n        bookingInfo: this.bookingInfo,\n        ...this.defaultSchedulerStoreState,\n      }),\n    };\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    this.nylasSchedulerConnector = new NylasSchedulerConnector({\n      schedulerAPIURL: this.schedulerApiUrl,\n      sessionId: this.sessionId,\n      nylasSchedulerStore,\n    });\n    this.init.emit(this.host);\n\n    this.baseProvider?.componentWillLoad(this.nylasSchedulerConnector);\n    // Override theme\n    if (this.themeConfig) {\n      for (const [key, value] of Object.entries(this.themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  async componentDidLoad() {\n    this.baseProvider?.componentDidLoad();\n\n    let result;\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    const selectedDate = nylasSchedulerStore?.get('selectedDate');\n\n    if (!selectedDate) {\n      result = await this.nylasSchedulerConnector?.scheduler.getAvailability();\n    } else {\n      const startTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1).getTime() / 1000;\n      const endTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 1).getTime() / 1000;\n      result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);\n    }\n\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    }\n\n    const firstAvailableDate = nylasSchedulerStore?.get('availability').find((timeslot: any) => new Date(timeslot.start_time) > new Date());\n\n    let _selectedDate = new Date();\n    if (firstAvailableDate) _selectedDate = firstAvailableDate.start_time;\n\n    nylasSchedulerStore?.set('selectedDate', _selectedDate);\n    this.selectedDateLabel = _selectedDate.toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  @Watch('bookingInfo')\n  bookingInfoChanged(newVal?: NylasSchedulerBookingData) {\n    this.stores?.scheduler.set('bookingInfo', newVal);\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to refetch the availability when the month is changed.\n   */\n  @Listen('monthChanged')\n  async monthChangedHandler(event: CustomEvent<Date>) {\n    const date = event.detail;\n    const startTime = new Date(date.getFullYear(), date.getMonth(), 1).getTime() / 1000;\n    const endTime = new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() / 1000;\n\n    const result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);\n\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    }\n  }\n\n  /**\n   * This is a custom event handler to book an event.\n   */\n  @Listen('detailsConfirmed')\n  async bookButtonClickedHandler(event: CustomEvent<NylasSchedulerBookingData>) {\n    if (this.rescheduleId) {\n      const result = await this.nylasSchedulerConnector?.scheduler.rescheduleBooking(this.rescheduleId, event.detail);\n      if (!result || 'error' in result) {\n        this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n      } else {\n        this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);\n      }\n      return;\n    }\n    const result = await this.nylasSchedulerConnector?.scheduler.bookTimeslot(event.detail);\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    } else {\n      this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);\n    }\n  }\n\n  /**\n   * This is a custom event handler to cancel booking an event.\n   */\n  @Listen('cancelButtonClicked')\n  async cancelButtonClickedHandler() {\n    this.baseProvider?.getStore('scheduler').set('bookedEventLoading', false);\n    this.baseProvider?.getStore('scheduler').set('bookedEventError', null);\n  }\n\n  /**\n   * This is a custom event handler to update the selected date label.\n   */\n  @Listen('dateSelected')\n  selectedDateChanged(event: CustomEvent<Date>) {\n    const date = event.detail;\n    this.selectedDateLabel = date ? date.toLocaleDateString(undefined, { dateStyle: 'full' }) : 'No date selected';\n  }\n\n  /**\n   * This method is used to retrieve the NylasScheduler instance\n   * @returns The NylasScheduler instance\n   */\n  @Method()\n  async getNylasSchedulerStore(): Promise<NylasSchedulerStoreType | undefined> {\n    return this.baseProvider?.getStore('scheduler');\n  }\n\n  /**\n   * This method is used to retrieve the NylasConnector instance\n   * @returns The NylasConnector instance\n   */\n  @Method()\n  async getNylasSchedulerConnector() {\n    return this.nylasSchedulerConnector;\n  }\n\n  @Method()\n  async getRef() {\n    return this.host;\n  }\n\n  private getErrorObject(error: NylasErrorResponse['error']): Notification {\n    return {\n      title: error?.title || genericError.title,\n      category: error?.type || genericError.category,\n      type: NotificationType.Error,\n      description: error?.message || '',\n      id: new Date().getTime().toString(),\n    };\n  }\n\n  render() {\n    const showDefaultScheduler = this.mode === 'app';\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    const eventInfo = nylasSchedulerStore?.get('eventInfo');\n    const showThankYouMessage = nylasSchedulerStore?.get('showThankYouMessage');\n    const showBookingForm = nylasSchedulerStore?.get('showBookingForm');\n    const cancelledEvent = nylasSchedulerStore?.get('cancelledEvent');\n\n    // Cancelled event card is shown when the event is cancelled\n    if (showDefaultScheduler && cancelledEvent) {\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"cancelled-event-page\" part=\"cancelled-event-page\">\n              <nylas-cancelled-event-card cancelledEvent={cancelledEvent} exportparts=\"ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card\" />\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Booked event card is shown when the event is booked\n    if (showDefaultScheduler && showThankYouMessage && eventInfo) {\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"booked-event-page\" part=\"booked-event-page\">\n              <nylas-booked-event-card\n                eventInfo={eventInfo}\n                exportparts=\"nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta\"\n              />\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Date and time picker is shown when the event is not booked and no additional data is shown\n    if (showDefaultScheduler && !showThankYouMessage && !showBookingForm) {\n      const timeslotPickerCTALabel = this.host.querySelector('[slot=\"timeslot-picker-cta-label\"]');\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"select-date-page\" part=\"select-date-page\">\n              <div class=\"left-panel\">\n                <nylas-date-picker exportparts=\"ndp, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--selected, ndp__date--current-day, ndp__date--current-month\"></nylas-date-picker>\n                <div class=\"border\"></div>\n                <nylas-locale-switch></nylas-locale-switch>\n              </div>\n              <div class=\"right-panel\">\n                <div class=\"wrapper\">\n                  <h2>\n                    <calendar-icon></calendar-icon>\n                    <span id=\"selectedDate\">{this.selectedDateLabel}</span>\n                  </h2>\n                  <nylas-timeslot-picker exportparts=\"ntp, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary\">\n                    {timeslotPickerCTALabel && (\n                      <span slot=\"timeslot-picker-cta-label\">\n                        <slot name=\"timeslot-picker-cta-label\"></slot>\n                      </span>\n                    )}\n                  </nylas-timeslot-picker>\n                </div>\n              </div>\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Additional data is shown when the time is selected, event is not booked and additional data is shown\n    if (showDefaultScheduler && !showThankYouMessage && showBookingForm) {\n      // Check if a \"custom-booking-form\" slot is provided\n      const customTemplateSlot = this.host.querySelector('[slot=\"custom-booking-form\"]');\n\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"additional-data-page\" part=\"additional-data-page\">\n              <div class=\"left-panel\">\n                <div class=\"wrapper\">\n                  <nylas-selected-event-card exportparts=\"nsec, nsec__card, nsec__icon, nsec__date, nsec__time\"></nylas-selected-event-card>\n                </div>\n              </div>\n              <div class=\"right-panel\">\n                <div class=\"wrapper\">\n                  <nylas-booking-form exportparts=\"nbf, nbf__input-label, nbf__input-textfield, nbf__button-ghost, nbf__button-primary, nbf__button-outline\">\n                    {customTemplateSlot && (\n                      <div slot=\"custom-booking-form\">\n                        <slot name=\"custom-booking-form\"></slot>\n                      </div>\n                    )}\n                  </nylas-booking-form>\n                </div>\n              </div>\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-scheduler/scheduler-view.js

@@ -0,0 +1,6 @@
+import { Fragment, h } from "@stencil/core";
+export const SchedulerView = (props, children) => {
+    const isLoading = props.loadingState && !!props.loadingState.api;
+    return (h(Fragment, null, isLoading && (h("div", { class: 'loading' }, h("div", { class: 'left' }, h("div", { class: 'skeleton' })), h("div", { class: 'right' }, h("div", { class: 'skeleton' }), h("div", { class: 'skeleton' }), h("div", { class: 'skeleton' }), h("div", { class: 'skeleton' }), h("div", { class: 'skeleton' })))), !isLoading && children, h("nylas-notification", null), h("div", { class: 'footer' }, "Powered by\u00A0 ", h("nylas-logo", null))));
+};
+//# sourceMappingURL=scheduler-view.js.map

package/dist/collection/components/scheduler/nylas-scheduler/scheduler-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler-view.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-scheduler/scheduler-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAUjE,MAAM,CAAC,MAAM,aAAa,GAA4C,CAAC,KAAyB,EAAE,QAAQ,EAAE,EAAE;IAC5G,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC;IACjE,OAAO,CACL,EAAC,QAAQ;QACN,SAAS,IAAI,CACZ,WAAK,KAAK,EAAE,SAAS;YACnB,WAAK,KAAK,EAAE,MAAM;gBAChB,WAAK,KAAK,EAAE,UAAU,GAAI,CACtB;YACN,WAAK,KAAK,EAAE,OAAO;gBACjB,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI,CACtB,CACF,CACP;QACA,CAAC,SAAS,IAAI,QAAQ;QACvB,6BAAyC;QACzC,WAAK,KAAK,EAAE,QAAQ;;YACD,qBAAc,CAC3B,CACG,CACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { LoadingState } from '../../../components';\n\nexport type SchedulerViewProps = {\n  loadingState?: LoadingState;\n};\n\n/**\n * The Scheduler view component.\n */\nexport const SchedulerView: FunctionalComponent<SchedulerViewProps> = (props: SchedulerViewProps, children) => {\n  const isLoading = props.loadingState && !!props.loadingState.api;\n  return (\n    <Fragment>\n      {isLoading && (\n        <div class={'loading'}>\n          <div class={'left'}>\n            <div class={'skeleton'} />\n          </div>\n          <div class={'right'}>\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n          </div>\n        </div>\n      )}\n      {!isLoading && children}\n      <nylas-notification></nylas-notification>\n      <div class={'footer'}>\n        Powered by&nbsp; <nylas-logo />\n      </div>\n    </Fragment>\n  );\n};\n"]}