@nylas/web-elements 2.0.1 → 2.0.2

package/dist/components/nylas-scheduling.js

@@ -3,7 +3,7 @@ import { N as NylasBaseProvider } from './abstract-provider.js';
 import { b as instance, x as addDaysToCurrentDate, a as debug, Q as compactStringToUUIDs, n as capitalizeFirstLetter } from './utils.js';
 import { E as ErrorCategory, n as nr } from './index3.js';
 import { c as createStore } from './index2.js';
-import { L as LANGUAGE_CODE } from './constants.js';
+import { L as LANGUAGE_CODE, c as LANGUAGE_MAP } from './constants.js';
 import { d as defineCustomElement$D } from './add-circle.js';
 import { d as defineCustomElement$C } from './button-component2.js';
 import { d as defineCustomElement$B } from './calendar-cancel.js';
@@ -200,7 +200,7 @@ class NylaSchedulerAPIConnector {
     async makeAPIRequest(path, method, body, headers = {}) {
         try {
             const schedulerURL = new URL(this.schedulerAPIURL);
-            const version = "2.0.1" ;
+            const version = "2.0.2" ;
             schedulerURL.pathname = path;
             const response = await fetch(decodeURIComponent(schedulerURL.toString()), {
                 method,
@@ -862,7 +862,7 @@ const SchedulerView = (props, children) => {
 
 const MessageBanner = (_props, children) => h("div", { class: "message-banner" }, children);
 
-const nylasSchedulingCss = ":host{display:flex;flex-direction:column;overflow:visible;border-radius:var(--nylas-border-radius-2x);width:fit-content;background:var(--nylas-base-0);position:relative;box-shadow:0px 4px 8px 2px rgba(0, 0, 0, 0.05), 0px 8px 16px -2px rgba(0, 0, 0, 0.1);--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;font-family:var(--nylas-font-family);font-optical-sizing:auto;font-style:normal;font-variation-settings:\"slnt\" 0}@media screen and (max-width: 768px){:host{width:auto;min-width:325px}}:root{font-family:inherit}.error{padding:8rem 12rem;color:var(--nylas-base-0);background-color:var(--nylas-error);margin:1.5rem;border-radius:var(--nylas-border-radius-2x)}.message-banner{text-align:right;color:var(--nylas-base-800);padding:1rem;border-bottom:1px solid var(--nylas-color-primary-200);margin:0}.loading{margin:1.5rem;display:flex;gap:1rem}.loading .skeleton{border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite}.loading .skeleton:nth-child(2){animation-delay:-100ms}.loading .skeleton:nth-child(3){animation-delay:-200ms}.loading .skeleton:nth-child(4){animation-delay:-300ms}.loading .skeleton:nth-child(5){animation-delay:-400ms}.loading .left .skeleton{height:100%;width:400px}.loading .right .skeleton{height:5rem;width:300px;margin-bottom:1rem}.loading .right .skeleton:last-child{margin-bottom:0}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.select-date-page,.additional-data-page,.booked-event-page,.manual-confirmation-page,.cancelled-event-page,.cancel-flow-page{border-top-left-radius:var(--nylas-border-radius-2x);border-top-right-radius:var(--nylas-border-radius-2x)}.select-date-page,.additional-data-page{display:flex}@media screen and (max-width: 768px){.select-date-page,.additional-data-page{flex-direction:column}}.booked-event-page,.manual-confirmation-page{background-color:var(--nylas-base-50)}.cancelled-event-page,.manual-confirmation-page,.cancel-flow-page{padding:1rem;height:496px;display:flex;justify-content:center;align-items:center}.booked-event-page,.manual-confirmation-page,.cancelled-event-page,.cancel-flow-page{min-width:784px;background:var(--nylas-base-50)}@media screen and (max-width: 768px){.booked-event-page,.manual-confirmation-page,.cancelled-event-page,.cancel-flow-page{min-width:90%}}.left-panel{display:flex;flex-direction:column;min-width:424px;border-top-left-radius:inherit;background:var(--nylas-base-0);position:relative;padding:1rem 0 0 0;height:624px}@media screen and (max-width: 768px){.left-panel{border-top-right-radius:inherit;min-width:unset;height:auto}}@media screen and (max-width: 768px){.select-date-page .left-panel{height:624px}}.border{margin-left:-20px;margin-right:-20px;border-top-width:1px;height:0.5px;background-color:var(--nylas-base-200)}@media screen and (max-width: 768px){.border{display:none}}.right-panel{min-width:360px;width:360px;background-color:var(--nylas-base-50);height:624px;padding-top:16px;border-left:1px solid var(--nylas-base-200);border-top-right-radius:inherit}.right-panel.reschedule{border-top-right-radius:0px}@media screen and (max-width: 768px){.right-panel{border-top-right-radius:0px;width:inherit;min-width:unset;height:auto;border-left:none}}.right-panel h2{display:flex;margin:0;height:48px;gap:0.5rem;justify-content:center;align-items:center;width:auto;font-size:1.125rem;line-height:1.5rem;font-weight:500;text-align:center;color:var(--nylas-base-800)}.additional-data-page .left-panel{background-color:var(--nylas-base-50)}.additional-data-page .right-panel{background-color:var(--nylas-base-0)}nylas-selected-event-card{height:604px;padding:0 1rem}@media screen and (max-width: 768px){nylas-selected-event-card{height:250px}}.footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:16px;font-size:14px;font-weight:300;color:var(--nylas-base-500);border-top:1px solid var(--nylas-base-200);min-height:24px}.footer .powered-by-nylas{display:flex;align-items:center;text-decoration:none;color:var(--nylas-base-500)}.footer .powered-by-nylas:hover{color:var(--nylas-base-800)}.footer svg{fill:var(--nylas-base-500)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.footer svg{margin-top:1px}nylas-selected-event-card::part(nsec__timezone){position:absolute;bottom:0}nylas-notification{margin:1.5rem;width:-webkit-fill-available;width:-moz-available;position:absolute}nylas-locale-switch{position:absolute;padding:18px 20px;bottom:0;width:-webkit-fill-available;width:-moz-available;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){nylas-locale-switch{height:auto}}nylas-date-picker{padding:0 20px}button-component#report-issue{width:auto;position:absolute;bottom:4px;left:16px}nylas-feedback-form{position:absolute;top:0;height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(0, 0, 0, 0.6);z-index:2;border-radius:inherit}";
+const nylasSchedulingCss = ":host{display:flex;flex-direction:column;overflow:visible;border-radius:var(--nylas-border-radius-2x);width:fit-content;background:var(--nylas-base-0);position:relative;box-shadow:0px 4px 8px 2px rgba(0, 0, 0, 0.05), 0px 8px 16px -2px rgba(0, 0, 0, 0.1);--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;font-family:var(--nylas-font-family);font-optical-sizing:auto;font-style:normal;font-variation-settings:\"slnt\" 0}@media screen and (max-width: 768px){:host{width:auto;min-width:325px}}:root{font-family:inherit}.error{padding:8rem 12rem;color:var(--nylas-base-0);background-color:var(--nylas-error);margin:1.5rem;border-radius:var(--nylas-border-radius-2x)}.message-banner{text-align:right;color:var(--nylas-base-800);padding:1rem;border-bottom:1px solid var(--nylas-color-primary-200);margin:0}.loading{margin:1.5rem;display:flex;gap:1rem}.loading .skeleton{border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite}.loading .skeleton:nth-child(2){animation-delay:-100ms}.loading .skeleton:nth-child(3){animation-delay:-200ms}.loading .skeleton:nth-child(4){animation-delay:-300ms}.loading .skeleton:nth-child(5){animation-delay:-400ms}.loading .left .skeleton{height:100%;width:400px}.loading .right .skeleton{height:5rem;width:300px;margin-bottom:1rem}.loading .right .skeleton:last-child{margin-bottom:0}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.select-date-page,.additional-data-page,.booked-event-page,.manual-confirmation-page,.cancelled-event-page,.cancel-flow-page{border-top-left-radius:var(--nylas-border-radius-2x);border-top-right-radius:var(--nylas-border-radius-2x)}.select-date-page,.additional-data-page{display:flex}@media screen and (max-width: 768px){.select-date-page,.additional-data-page{flex-direction:column}}.booked-event-page,.manual-confirmation-page{background-color:var(--nylas-base-50)}.cancelled-event-page,.manual-confirmation-page,.cancel-flow-page{padding:1rem;height:496px;display:flex;justify-content:center;align-items:center}.booked-event-page,.manual-confirmation-page,.cancelled-event-page,.cancel-flow-page{min-width:784px;background:var(--nylas-base-50)}@media screen and (max-width: 768px){.booked-event-page,.manual-confirmation-page,.cancelled-event-page,.cancel-flow-page{min-width:90%}}.left-panel{display:flex;flex-direction:column;min-width:424px;border-top-left-radius:inherit;background:var(--nylas-base-0);position:relative;padding:1rem 0 0 0;height:624px}@media screen and (max-width: 768px){.left-panel{border-top-right-radius:inherit;min-width:unset;height:auto}}@media screen and (max-width: 768px){.select-date-page .left-panel{height:624px}}.border{margin-left:-20px;margin-right:-20px;border-top-width:1px;height:0.5px;background-color:var(--nylas-base-200)}@media screen and (max-width: 768px){.border{display:none}}.right-panel{min-width:360px;width:360px;background-color:var(--nylas-base-50);height:624px;padding-top:16px;border-left:1px solid var(--nylas-base-200);border-top-right-radius:inherit}.right-panel.reschedule{border-top-right-radius:0px}@media screen and (max-width: 768px){.right-panel{border-top-right-radius:0px;width:inherit;min-width:unset;height:auto;border-left:none}}.right-panel h2{display:flex;margin:0;height:48px;gap:0.5rem;justify-content:center;align-items:center;width:auto;font-size:1.125rem;line-height:1.5rem;font-weight:500;text-align:center;color:var(--nylas-base-800)}.additional-data-page .left-panel{background-color:var(--nylas-base-50)}.additional-data-page .right-panel{background-color:var(--nylas-base-0)}nylas-selected-event-card{height:604px;padding:0 1rem}@media screen and (max-width: 768px){nylas-selected-event-card{height:250px}}.footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:16px;font-size:14px;font-weight:300;color:var(--nylas-base-500);border-top:1px solid var(--nylas-base-200);min-height:24px}.footer .powered-by-nylas{display:flex;align-items:center;text-decoration:none;color:var(--nylas-base-500)}.footer .powered-by-nylas:hover{color:var(--nylas-base-800)}.footer svg{fill:var(--nylas-base-500)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.footer svg{margin-top:1px}nylas-selected-event-card::part(nsec__timezone){position:absolute;bottom:0}nylas-notification{margin:1.5rem;width:-webkit-fill-available;width:-moz-available;position:absolute}nylas-locale-switch{position:absolute;padding:18px 20px;bottom:0;width:-webkit-fill-available;width:-moz-available;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){nylas-locale-switch{height:auto}}nylas-date-picker{padding:0 20px}button-component#report-issue{width:auto;position:absolute;bottom:4px;left:16px}.language-feedback-container{width:auto;position:absolute;bottom:4px;left:16px;display:flex;gap:8px;align-items:center}.language-feedback-container button-component#report-issue{position:initial}nylas-feedback-form{position:absolute;top:0;height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(0, 0, 0, 0.6);z-index:2;border-radius:inherit}";
 const NylasSchedulingStyle0 = nylasSchedulingCss;
 
 const genericError = { title: instance.t('genericErrorTitle'), type: nr.Error, category: ErrorCategory.Component };
@@ -895,6 +895,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         this.isLoading = undefined;
         this.themeConfig = undefined;
         this.localization = undefined;
+        this.defaultLanguage = undefined;
         this.showNotification = true;
         this.enableUserFeedback = true;
         this.hour12 = undefined;
@@ -904,14 +905,14 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         this.language = navigator.language;
         this.showFeedbackModal = false;
         this.bookingInfoConfirmed = null;
-        this.version = "2.0.1" ;
+        this.version = "2.0.2" ;
     }
     connectedCallback() {
         debug(`[nylas-scheduler] connectedCallback`);
     }
     async componentWillLoad() {
         debug(`[nylas-scheduler] Component will load`);
-        this.version = "2.0.1" ;
+        this.version = "2.0.2" ;
         if (this.enableUserFeedback && !isInitialized()) {
             init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
@@ -934,12 +935,16 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
                 return;
             }
         }
+        const urlParams = new URLSearchParams(window.location.search);
+        const langFromUrl = urlParams.get('lang');
+        const validLanguageFromUrl = langFromUrl && Object.values(LANGUAGE_CODE).includes(langFromUrl) ? langFromUrl : null;
         this.stores = {
             scheduler: CreateNylasSchedulerStore({
                 bookingInfo: this.bookingInfo,
                 nylasBranding: this.nylasBranding,
                 themeConfig: this.themeConfig,
                 hour12: this.hour12,
+                selectedLanguage: validLanguageFromUrl || this.defaultLanguage || this.bookingInfo?.language || LANGUAGE_CODE.en,
                 ...this.defaultSchedulerState,
             }),
         };
@@ -1071,6 +1076,9 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
     }
     bookingInfoChanged(newVal) {
         this.stores?.scheduler.set('bookingInfo', newVal);
+        if (newVal?.language && !this.defaultLanguage) {
+            this.stores?.scheduler.set('selectedLanguage', newVal.language);
+        }
     }
     rescheduleBookingRefChanged(newVal) {
         if (newVal) {
@@ -1107,6 +1115,12 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
             instance.addResourceBundle(lang, 'translation', newVal[lang], false, true);
         });
     }
+    defaultLanguageChanged(newVal) {
+        if (newVal) {
+            this.stores?.scheduler.set('selectedLanguage', newVal);
+            instance.changeLanguage(newVal);
+        }
+    }
     themeConfigChanged(newVal) {
         this.baseProvider?.getStore('scheduler')?.set('themeConfig', newVal);
         this.applyThemeConfig(newVal);
@@ -1342,6 +1356,14 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
     redirectToCustomUrl(url) {
         window.location.assign(url);
     }
+    nylasFormDropdownChangedHandler(event) {
+        const { name, value } = event.detail;
+        if (name === 'language') {
+            const selectedLanguage = LANGUAGE_CODE[value];
+            instance.changeLanguage(selectedLanguage);
+            this.stores?.scheduler?.set('selectedLanguage', selectedLanguage);
+        }
+    }
     render() {
         const showDefaultScheduler = this.mode === 'app';
         const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
@@ -1359,17 +1381,22 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         const redirectUrl = nylasSchedulerStore?.get('configSettings')?.scheduler?.confirmation_redirect_url;
         this.selectedDateLabel =
             selectedDate && this.language ? capitalizeFirstLetter(selectedDate.toLocaleDateString(this.language, { dateStyle: 'full' })) : `${instance.t('noDateSelected')}`;
+        const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({
+            label: LANGUAGE_MAP[key],
+            value: key,
+        }));
+        const selectedLanguage = nylasSchedulerStore?.get('selectedLanguage') || this.defaultLanguage || navigator.language || LANGUAGE_CODE.en;
         if (showDefaultScheduler && (cancelBookingId || rejectBookingId) && !cancelledEventInfo) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancel-flow-page", part: "cancel-flow-page" }, h("nylas-cancel-booking-form", { selectedTimeslot: selectedTimeslot, cancelBookingId: cancelBookingId, rejectBookingId: rejectBookingId, exportparts: "ncbf, ncbf__icon, ncbf__title, ncbf__description, ncbf__reason-textarea, ncbf__button-cta, ncbf__button-outline, ncbf__card" }))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancel-flow-page", part: "cancel-flow-page" }, h("nylas-cancel-booking-form", { selectedTimeslot: selectedTimeslot, cancelBookingId: cancelBookingId, rejectBookingId: rejectBookingId, exportparts: "ncbf, ncbf__icon, ncbf__title, ncbf__description, ncbf__reason-textarea, ncbf__button-cta, ncbf__button-outline, ncbf__card" }))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: instance.t('search'), options: languageOptions, withChevron: false, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && organizerConfirmationBookingId) {
-            return (h(Host, null, h(SchedulerView, null, h("div", { class: "manual-confirmation-page", part: "manual-confirmation-page" }, h("nylas-organizer-confirmation-card", { organizerConfirmationBookingId: organizerConfirmationBookingId, exportparts: "nmcc, nmcc__title, nmcc__description, nmcc__button-cta, nmcc__button-outline" }))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            return (h(Host, null, h(SchedulerView, null, h("div", { class: "manual-confirmation-page", part: "manual-confirmation-page" }, h("nylas-organizer-confirmation-card", { organizerConfirmationBookingId: organizerConfirmationBookingId, exportparts: "nmcc, nmcc__title, nmcc__description, nmcc__button-cta, nmcc__button-outline" }))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: instance.t('search'), options: languageOptions, withChevron: false, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && cancelledEventInfo) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, h("nylas-cancelled-event-card", { cancelledEventInfo: cancelledEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, h("nylas-cancelled-event-card", { cancelledEventInfo: cancelledEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: instance.t('search'), options: languageOptions, withChevron: false, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && confirmedEventInfo) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancelled-event-page", part: "confirmed-event-page" }, h("nylas-confirmed-event-card", { confirmedEventInfo: confirmedEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancelled-event-page", part: "confirmed-event-page" }, h("nylas-confirmed-event-card", { confirmedEventInfo: confirmedEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: instance.t('search'), options: languageOptions, withChevron: false, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && eventInfo && redirectUrl) {
             const recipient = this.bookingInfoConfirmed?.primaryParticipant;
@@ -1407,14 +1434,14 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
             return;
         }
         if (showDefaultScheduler && eventInfo) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "booked-event-page", part: "booked-event-page ns_booked-event-page" }, h("nylas-booked-event-card", { selectedTimeslot: selectedTimeslot, eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" }))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "booked-event-page", part: "booked-event-page ns_booked-event-page" }, h("nylas-booked-event-card", { selectedTimeslot: selectedTimeslot, eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" }))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: instance.t('search'), options: languageOptions, withChevron: false, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && (!eventInfo || !!rescheduleBookingId) && !showBookingForm) {
             const timeslotPickerCTALabel = this.host.querySelector('[slot="timeslot-picker-cta-label"]');
             return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && h(MessageBanner, null, `${instance.t('rescheduleTitle')}`), h("div", { class: "select-date-page", part: "select-date-page ns_select-date-page" }, h("div", { class: "left-panel", part: "ns_left-panel" }, h("nylas-date-picker", { exportparts: "ndp, ndp__title, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--disabled, ndp__date--selected, ndp__date--current-day, ndp__date--current-month" }), h("nylas-locale-switch", { exportparts: "nls, nls__timezone, nls__timezone-dropdown, nls__timezone-drop-button, nls__timezone-drop-button-selected-label, nls__timezone-drop-content, nls__timezone-drop-label, nls__language, nls__language-dropdown, nls__language-drop-button, nls__language-drop-content, nls__language-drop-label" })), h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}`, part: `ns_right-panel ${rescheduleBookingId ? 'ns_reschedule' : ''}` }, h("h2", { part: "ns_right-panel__title" }, h("calendar-icon", { part: "ns_right-panel__calendar-icon" }), h("span", { id: "selectedDate", part: "ns_right-panel__selected-date" }, this.selectedDateLabel)), h("nylas-timeslot-picker", { exportparts: "ntp, ntp__time-picker-wrapper, ntp__timeslots, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary" }, timeslotPickerCTALabel && (h("span", { slot: "timeslot-picker-cta-label" }, h("slot", { name: "timeslot-picker-cta-label" }))))))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && !eventInfo && showBookingForm) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && h(MessageBanner, null, `${instance.t('rescheduleTitle')}`), h("div", { class: "additional-data-page", part: "additional-data-page ns_additional-data-page" }, h("div", { class: "left-panel ns_left-panel", part: "ns_left-panel" }, h("div", { class: "wrapper", part: "ns_left-panel__wrapper" }, h("nylas-selected-event-card", { exportparts: "nsec, nsec__card, nsec__icon, nsec__date, nsec__time, nsec__timezone" }))), h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}`, part: `ns_right-panel ${rescheduleBookingId ? 'ns_reschedule' : ''}` }, h("nylas-booking-form", { exportparts: "nbf, nbf__input-textfield, nbf__button-ghost, nbf__button-outline, nbf__button-primary, nbf__input-wrapper, nbf__checkbox-component, nbf__radio-button-group, nbf__textarea-component, nbf__dropdown, nbf__dropdown-button, nbf__dropdown-content" })))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && h(MessageBanner, null, `${instance.t('rescheduleTitle')}`), h("div", { class: "additional-data-page", part: "additional-data-page ns_additional-data-page" }, h("div", { class: "left-panel ns_left-panel", part: "ns_left-panel" }, h("div", { class: "wrapper", part: "ns_left-panel__wrapper" }, h("nylas-selected-event-card", { exportparts: "nsec, nsec__card, nsec__icon, nsec__date, nsec__time, nsec__timezone" }))), h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}`, part: `ns_right-panel ${rescheduleBookingId ? 'ns_reschedule' : ''}` }, h("nylas-booking-form", { exportparts: "nbf, nbf__input-textfield, nbf__button-ghost, nbf__button-outline, nbf__button-primary, nbf__input-wrapper, nbf__checkbox-component, nbf__radio-button-group, nbf__textarea-component, nbf__dropdown, nbf__dropdown-button, nbf__dropdown-content" })))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: instance.t('search'), options: languageOptions, withChevron: false, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         return (h(Host, null, h("slot", null)));
     }
@@ -1425,6 +1452,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         "cancelBookingRef": ["cancelBookingRefChanged"],
         "organizerConfirmationBookingRef": ["organizerConfirmationBookingRefChanged"],
         "localization": ["localizationChanged"],
+        "defaultLanguage": ["defaultLanguageChanged"],
         "themeConfig": ["themeConfigChanged"]
     }; }
     static get style() { return NylasSchedulingStyle0; }
@@ -1445,6 +1473,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         "isLoading": [4, "is-loading"],
         "themeConfig": [16],
         "localization": [16],
+        "defaultLanguage": [1, "default-language"],
         "showNotification": [4, "show-notification"],
         "enableUserFeedback": [4, "enable-user-feedback"],
         "hour12": [4, "hour-1-2"],
@@ -1458,12 +1487,13 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         "getNylasSchedulerStore": [64],
         "getNylasSchedulerConnector": [64],
         "getRef": [64]
-    }, [[0, "languageChanged", "languageChanged"], [0, "registerComponent", "registerComponentHandler"], [0, "unregisterComponent", "unregisterComponentHandler"], [0, "monthChanged", "monthChangedHandler"], [0, "detailsConfirmed", "bookButtonClickedHandler"], [0, "dateSelected", "dateSelectedHandler"], [0, "cancelBookedEventError", "cancelBookedEventErrorHandler"], [0, "cancelBookedEventValidationError", "cancelBookedEventValidationErrorHandler"], [0, "rescheduleBookedEventError", "rescheduleBookedEventErrorHandler"], [0, "confirmBookingError", "confirmBookingErrorHandler"], [0, "feedbackModalClosed", "feedbackModalClosedHandler"], [0, "validateTimeslotError", "eventIsFullHandler"], [0, "feedbackSubmitted", "feedbackSubmittedHandler"]], {
+    }, [[0, "languageChanged", "languageChanged"], [0, "registerComponent", "registerComponentHandler"], [0, "unregisterComponent", "unregisterComponentHandler"], [0, "monthChanged", "monthChangedHandler"], [0, "detailsConfirmed", "bookButtonClickedHandler"], [0, "dateSelected", "dateSelectedHandler"], [0, "cancelBookedEventError", "cancelBookedEventErrorHandler"], [0, "cancelBookedEventValidationError", "cancelBookedEventValidationErrorHandler"], [0, "rescheduleBookedEventError", "rescheduleBookedEventErrorHandler"], [0, "confirmBookingError", "confirmBookingErrorHandler"], [0, "feedbackModalClosed", "feedbackModalClosedHandler"], [0, "validateTimeslotError", "eventIsFullHandler"], [0, "feedbackSubmitted", "feedbackSubmittedHandler"], [0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]], {
         "bookingInfo": ["bookingInfoChanged"],
         "rescheduleBookingRef": ["rescheduleBookingRefChanged"],
         "cancelBookingRef": ["cancelBookingRefChanged"],
         "organizerConfirmationBookingRef": ["organizerConfirmationBookingRefChanged"],
         "localization": ["localizationChanged"],
+        "defaultLanguage": ["defaultLanguageChanged"],
         "themeConfig": ["themeConfigChanged"]
     }]);
 function defineCustomElement$1() {