@nylas/web-elements 2.0.1 → 2.0.2

package/dist/esm/nylas-booked-event-card_11.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-091600eb.js';
-import { R as RegisterComponent } from './register-component-a1c3d7b4.js';
-import { b as debug, i as instance, l as capitalizeFirstLetter, q as formatBookedEventDate, s as sanitizeHtml, r as sanitize, a as dayjs, u as utc, t as timezone, j as addDaysToCurrentDate, v as isSameMonth, w as getLastDayOfMonth, x as getFirstDayOfMonth, y as isSameDay, z as convertMinutesToHoursAndMinutes, A as translateMonth, C as getTimezoneOffset, D as isSameDayTimezone } from './utils-b7f9cbcc.js';
+import { R as RegisterComponent } from './register-component-9d4ceee5.js';
+import { b as debug, i as instance, l as capitalizeFirstLetter, q as formatBookedEventDate, s as sanitizeHtml, r as sanitize, a as dayjs, u as utc, t as timezone, j as addDaysToCurrentDate, v as isSameMonth, w as getLastDayOfMonth, x as getFirstDayOfMonth, y as isSameDay, z as convertMinutesToHoursAndMinutes, A as translateMonth, C as getTimezoneOffset, D as isSameDayTimezone } from './utils-fb8a9ce4.js';
 import { T as TIMEZONE_MAP, c as LANGUAGE_CODE_TO_LOCALE_MAP, a as LANGUAGE_MAP } from './constants-f51538ef.js';
 
 const nylasBookedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-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}.nylas-booked-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:16px;font-weight:400;border-bottom:1px solid var(--nylas-base-200);width:inherit;padding:0 0 1.5rem}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booked-event-header .card-description{text-align:center}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:16px;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.button-container{width:inherit}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);border-top:1px solid var(--nylas-base-200);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
@@ -79,6 +79,11 @@ const NylasBookedEventCard = class {
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
@@ -113,13 +118,13 @@ const NylasBookedEventCard = class {
     render() {
         const bookingType = this.configSettings?.booking_type;
         const isManualConfirmation = bookingType && bookingType !== 'booking';
-        return (h(Host, { key: '746e23e82adf30da44ac6a160400705251a5cf98', part: "nbec" }, h("div", { key: 'aa3e79d294ff41b4a43775763f9e5f1922f955c7', class: "nylas-booked-event-card" }, h("div", { key: 'cbb343663633b5ba80875f42af0bb0d091ee1ac8', class: "booked-event-timezone" }, h("globe-icon", { key: '8c94142bd486144efaa251770c87f4ec15481b41' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'e06ef2c5b7a1977ff1953027d6109cb8a1acf493', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '5a99626d44f6ef819af2606bf24208e1833e3a54', class: "calendar-icon" }, h("calendar-check-icon", { key: '06c5ec0241535ee0ea82c743653f93442bc9a5fa' })), h("div", { key: 'b38fa39209c64394902a0e7607248d0d0c73adf2', class: "booked-event-header" }, h("h2", { key: '1706d065e1f427efcccef18f382702e95da33080', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
+        return (h(Host, { key: '0762e32091a5674187788413717366b6213a28fd', part: "nbec" }, h("div", { key: '9cb934481989459e30f9fc718e20855f0f186027', class: "nylas-booked-event-card" }, h("div", { key: 'e7b810785f800f82f0c73eaa665cd56bb9406c85', class: "booked-event-timezone" }, h("globe-icon", { key: '3c29fd04b4fc90e0a6583285cbf872ec840ec0d6' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'e7f4406d8c3b110d84cb1d99e5ab8db89954e2f4', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'c656687daf9b51190341d35db6c338a9a61df3a2', class: "calendar-icon" }, h("calendar-check-icon", { key: 'e1f5cdfa288db54a537f4250d65e2ab0279fb84e' })), h("div", { key: '50e125630023b8dd19d537d20374f9a5464a1547', class: "booked-event-header" }, h("h2", { key: '24e6e52952321065ee1e63c34d55cd1891edeafc', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
             ? `${instance.t('bookingRescheduled')}`
             : isManualConfirmation && !this.isLoading
                 ? `${instance.t('bookingSent')}`
-                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'c7bfce355ce08d858862bc7672f20e8a2bb3dce9', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: '2074c51dfdfd0753fcd3d598b7633520bf70ab63', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'dbfe39fadeeb08186a5214cfb9ca5d3c8da55cb1' }), h("h3", { key: 'edb9ed53cb25e9e06ec7b27f8141fa6f422c1511' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: '24d8d606ab3e217256152e249ee435d070df0c5b' }, this.selectedTimeslot?.start_time
+                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'cb07bf7f3685624f2b50bcba569399ba084ab00d', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: 'bceb86109e1a9ae6f2c1d98e0267e7f73d763aae', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '0e6fdd3cb183e4d00c6c31fe368eefb01d0465d8' }), h("h3", { key: 'c7561d2be55109d69650aa41bb6d356018e1973b' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: '31818a7c4a89014438b7af5e722f49728918cc27' }, this.selectedTimeslot?.start_time
             ? capitalizeFirstLetter(formatBookedEventDate(this.selectedTimeslot?.start_time, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage]))
-            : '-', ' ', h("br", { key: '5949a97ff7e7b256e410f591b810332a72e0696c' }), this.startTime, " - ", this.endTime)), h("div", { key: '3450618726c762232151511fd28570834cf07cc4', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
+            : '-', ' ', h("br", { key: '7fcd531af1cea5464ab08f9043aabb4cde0a91db' }), this.startTime, " - ", this.endTime)), h("div", { key: '8d2d827677bf300ad2b0f4dc2c28ac3777971af1', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
                 'footer': true,
                 'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
                     this.configSettings?.booking_type === 'organizer-confirmation',
@@ -128,7 +133,8 @@ const NylasBookedEventCard = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
 };
 __decorate$9([
@@ -326,6 +332,7 @@ const NylasBookingForm = class {
         this.configSettings = undefined;
         this.themeConfig = undefined;
         this.selectedTimeslot = undefined;
+        this.selectedLanguage = undefined;
         this.name = '';
         this.email = '';
         this.guestEmails = [];
@@ -333,6 +340,10 @@ const NylasBookingForm = class {
         this.isNameValid = true;
         this.isEmailValid = true;
         this.additionalFields = {};
+        this.namePatternError = '';
+        this.nameRequiredError = '';
+        this.emailPatternError = '';
+        this.emailRequiredError = '';
         this.validationError = { name: '', email: '' };
         this.backButtonLoading = false;
         this.firstRender = true;
@@ -380,6 +391,15 @@ const NylasBookingForm = class {
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+        this.namePatternError = instance.t('invalidInputFormat', { field: instance.t('name') });
+        this.nameRequiredError = instance.t('fieldRequired', { field: instance.t('name') });
+        this.emailPatternError = instance.t('invalidInputFormat', { field: instance.t('email') });
+        this.emailRequiredError = instance.t('fieldRequired', { field: instance.t('email') });
+    }
     iterateFormComponents() {
         const form = this.formRef;
         const customComponentsList = [
@@ -491,7 +511,7 @@ const NylasBookingForm = class {
     }
     render() {
         const isGroupEvent = !!this.selectedTimeslot?.event_id && !!this.selectedTimeslot?.capacity;
-        return (h(Host, { key: 'a61445ec4453e619fb5525d2089675923b7b6c95' }, h("form", { key: 'c227ed38d49928a5707b85992d37473afe424a51', onSubmit: e => this.bookButtonClickedHandler(e), ref: el => (this.formRef = el), noValidate: true }, h("div", { key: '425cbdafd7573f7c010df1a892db9d38ee54bc8a', class: "nylas-booking-form", part: "nbf" }, h("div", { key: '93506a3e9155ae24e4908265b35653701f3faf6f', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '7b54bbb3b3065785058dbdebc1f271b6b712e718', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.configSettings?.booking?.guest?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", readOnly: this.bookingInfo?.primaryParticipant?.nameReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '2d0b8ccc0390faae5a7e29c1c2c568418bb9bad5', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '61c6bed06d612ce4f0bb366cbe675048ad6fa49e', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.configSettings?.booking?.guest?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", readOnly: this.bookingInfo?.primaryParticipant?.emailReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
+        return (h(Host, { key: '6659bdd250a39e69ecd8a4468b4f5bf5f3ced414' }, h("form", { key: 'ee7e0b97a449cdb18fa474bb5950ebc34922265d', onSubmit: e => this.bookButtonClickedHandler(e), ref: el => (this.formRef = el), noValidate: true }, h("div", { key: 'b59b81ef1c13449b1e49608ef6faeebbce3fef4d', class: "nylas-booking-form", part: "nbf" }, h("div", { key: 'cf75db4476ff5f8b013cbd349038a5945b9aecb0', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '9d5e5e2a2b3a64542bf7df48c0d4dc04bab2a468', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.configSettings?.booking?.guest?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", readOnly: this.bookingInfo?.primaryParticipant?.nameReadOnly || false, required: true, requiredError: this.nameRequiredError, patternError: this.namePatternError, part: "nbf__input-textfield" })), h("div", { key: 'd51c1ba6f352aaf611c04efd567d12df03adda6c', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '4fd09b511fd35c732fce53dba8d85d9f1f3e7dfd', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.configSettings?.booking?.guest?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", readOnly: this.bookingInfo?.primaryParticipant?.emailReadOnly || false, required: true, requiredError: this.emailRequiredError, patternError: this.emailPatternError, part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
                 error: !!this.guestEmailErrors[index],
             } }, instance.t('guestEmail')), h("div", { class: "guest-email-input" }, h("input", { type: "email", id: `guest-email-${index}`, maxLength: 100, class: {
                 'guest-email': true,
@@ -512,7 +532,7 @@ const NylasBookingForm = class {
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("select-dropdown", { label: label, name: key, id: key, readOnly: fieldReadOnly, withSearch: false, emptyValue: instance.t('nylasBookingCalendarPicker.selectOptionLabel'), defaultSelectedOption: defaultValue ? { value: defaultValue, label: defaultValue } : undefined, options: [
                             { value: '', label: instance.t('nylasBookingCalendarPicker.selectOptionLabel') },
                             ...(field.options?.map(option => ({ value: option, label: option })) || []),
-                        ], required: field.required, exportparts: "sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content" })));
+                        ], required: field.required, errorMessage: instance.t('fieldRequired', { field: label }), exportparts: "sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content" })));
                 case 'checkbox':
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("checkbox-component", { readOnly: fieldReadOnly, label: label, name: key, id: key, checked: defaultValue === 'true', required: field.required, part: "nbf__checkbox-component" })));
                 case 'radio_button':
@@ -528,15 +548,16 @@ const NylasBookingForm = class {
                 case 'metadata':
                     return null;
                 default:
-                    return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, readOnly: fieldReadOnly, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
+                    return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, readOnly: fieldReadOnly, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), patternError: instance.t('invalidInputFormat', { field: label }), required: field.required, part: "nbf__input-textfield" })));
             }
-        })), h("div", { key: '808fd99c41558ea710610e70fbaac8e8c731eba6', class: "cta" }, h("button-component", { key: 'd72719799742224c3d4ab7596a287e2e3f38187e', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '280c1674e4aa7fca3f13ec1e680cccf140f6d600', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: 'a6d1131de56b24415c5665b4d82a9af714843bb7', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: 'bc0f92e27c465efdfa67f5bda1d3b59cd4c4f389', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
+        })), h("div", { key: '903b248bb07920e75736ff3b38c142cfd9748c3e', class: "cta" }, h("button-component", { key: '967df15c0a3ce75d07f5b78a3511f0412f8e8d1d', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: 'c552facf14ba5ddecbf85f32b6976d2a19c74364', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: 'a07f122b3f9b4b89c049e868e71c993be0eb2da4', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '91884303152748e6cdf080e32d1b78eab1fdd975', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "bookingInfo": ["bookingInfoChangedHandler"],
         "configSettings": ["configSettingsChangedHandler"],
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
 };
 __decorate$8([
@@ -549,6 +570,7 @@ __decorate$8([
             ['scheduler.configSettings', 'configSettings'],
             ['scheduler.themeConfig', 'themeConfig'],
             ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
         ]),
         eventToProps: {
             backButtonClicked: async (_event, nylasSchedulerConnector) => {
@@ -646,6 +668,7 @@ const NylasCancelBookingForm = class {
         this.eventInfo = undefined;
         this.isLoading = undefined;
         this.themeConfig = undefined;
+        this.selectedLanguage = undefined;
         this.cancellationReason = '';
         this.cancellationError = '';
         this.cancellationPolicy = this.configSettings?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';
@@ -656,6 +679,11 @@ const NylasCancelBookingForm = class {
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() {
         debug(`[nylas-cancel-booking-form] Component connected`);
     }
@@ -688,12 +716,13 @@ const NylasCancelBookingForm = class {
         }
     }
     render() {
-        return (h(Host, { key: 'fadd772e62a6fcebcb4d8e9a3f9cea3fc689b310', part: "ncbf" }, h("div", { key: '2303b8e9cb36668cd1a7f0429d2587adc22e5a9e', class: "nylas-cancel-booking-form", part: "ncbf__card" }, h("div", { key: '669128a92b3df3413b520b426f92663cbbff69c6', class: "nylas-cancel-booking-form__calendar-icon", part: "ncbf__icon" }, h("calendar-cancel-icon", { key: '937705a14282087ecbb73477da36af8c131719f8' })), h("h3", { key: '2f5f3126c312353e347547e9cbed87cfb604837b', class: "nylas-cancel-booking-form__title", part: "ncbf__title" }, instance.t('cancelBookingTitle')), h("div", { key: 'e42825b3199b10de28813e9ed296fbe6a8811951', class: "nylas-cancel-booking-form__description", part: "ncbf__description" }, !this.configSettings?.scheduler?.cancellation_policy ? `${instance.t('cancelBookingMessage')}` : this.cancellationPolicy), h("form", { key: 'd8f0c2b3ab2a598a05b69ebaa779f69f95390356', onSubmit: this.handleSubmitCancelBooking }, h("textarea-component", { key: 'edaeec669058428d46ded041622d93e158c5837a', id: "cancel-reason", name: "cancel-reason", ref: el => (this.textareaRef = el), required: true, label: instance.t('reasonForCancellation'), class: this.cancellationError ? 'error' : '', part: "ncbf__reason-textarea", defaultValue: this.cancellationReason }), h("div", { key: 'deb0f8441e371d110b587d47c9e5fb01174a3391', class: "footer" }, h("button-component", { key: '7671d441dbeaa05aa75ac6dd383373c121e81678', variant: 'destructive', class: "cancel", type: "submit", part: "ncbf__button-cta", disabled: this.isLoading }, instance.t('cancelBookingButton')), !!this.eventInfo && (h("button-component", { variant: 'basic', class: "back", part: "ncbf__button-outline", onClick: this.handleGoBackClicked }, instance.t('goBackButton'))))))));
+        return (h(Host, { key: '3b22e6567ab54d6f2cb568d75fee896a643da4c8', part: "ncbf" }, h("div", { key: 'f046c04a7e3960a64e7da64c9a65a76566224f7d', class: "nylas-cancel-booking-form", part: "ncbf__card" }, h("div", { key: 'a979e7bea8d4ec498f52d06843d81f48720a0c8c', class: "nylas-cancel-booking-form__calendar-icon", part: "ncbf__icon" }, h("calendar-cancel-icon", { key: '85015b6f8078d9159f348ddf323f31dec8f705d4' })), h("h3", { key: '78ecd8321eb0a3c12abef90033d8244ffbfee674', class: "nylas-cancel-booking-form__title", part: "ncbf__title" }, instance.t('cancelBookingTitle')), h("div", { key: '524ca54afd1054d39d732fc17af3d75ce7586eae', class: "nylas-cancel-booking-form__description", part: "ncbf__description" }, !this.configSettings?.scheduler?.cancellation_policy ? `${instance.t('cancelBookingMessage')}` : this.cancellationPolicy), h("form", { key: '997e3b3723ac23316214682b8f03714d22c73271', onSubmit: this.handleSubmitCancelBooking }, h("textarea-component", { key: 'dd909a7998a66404c9ca4a0a880c65b8f38274d6', id: "cancel-reason", name: "cancel-reason", ref: el => (this.textareaRef = el), required: true, label: instance.t('reasonForCancellation'), class: this.cancellationError ? 'error' : '', part: "ncbf__reason-textarea", defaultValue: this.cancellationReason }), h("div", { key: '8a2331c8d00f1c6df904c3758fd5adcbb0a7095f', class: "footer" }, h("button-component", { key: 'dd16407657ac2e6e181a213d172364d66466d2ad', variant: 'destructive', class: "cancel", type: "submit", part: "ncbf__button-cta", disabled: this.isLoading }, instance.t('cancelBookingButton')), !!this.eventInfo && (h("button-component", { variant: 'basic', class: "back", part: "ncbf__button-outline", onClick: this.handleGoBackClicked }, instance.t('goBackButton'))))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "configSettings": ["configSettingsChangedHandler"],
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
 };
 __decorate$7([
@@ -707,6 +736,7 @@ __decorate$7([
             ['scheduler.cancelBookingId', 'cancelBookingId'],
             ['scheduler.rejectBookingId', 'rejectBookingId'],
             ['scheduler.themeConfig', 'themeConfig'],
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
         ]),
         eventToProps: {
             cancelBookingFormSubmitted: async (event, nylasSchedulerConnector) => {
@@ -779,9 +809,15 @@ const NylasCancelledEventCard = class {
         };
         this.configSettings = undefined;
         this.themeConfig = undefined;
+        this.selectedLanguage = undefined;
         this.cancelledEventInfo = undefined;
         this.isClosing = false;
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
@@ -809,10 +845,11 @@ const NylasCancelledEventCard = class {
         }
     }
     render() {
-        return (h(Host, { key: '083fbbc7ef04f3e037a0fe3c2aa1dd70a8e1c049', part: "ncec" }, h("div", { key: '0955ff30d911fee7b8e63953ac127b72737e4835', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'ef03e95d6193b50d9630ca7efd019c901efe30b3', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'eb8436c4eda440723aa9ff667ca9489cfe913647' })), h("h3", { key: '1ca9672ad9493238bbd2f4a2a560c74bb165e077', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, instance.t('bookingCancelledTitle'), "!"), h("div", { key: '49a5eea71ee9b1ec821795b974625f684d9af4a4', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, instance.t('bookingCancelledMessage'), " ", this.configSettings?.organizer?.name || instance.t('bookingCancelledMessage_theParticipants'), "."), h("div", { key: 'c4680cc9a2765eeec5bf57be71f5c3a209f71a03', class: "nylas-cancelled-event-card__cta" }, h("button-component", { key: 'a74c16a527d0f448ac18041d257cb64af7c7c1ba', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
+        return (h(Host, { key: 'bde7d46555a6f6033089f6d49f853df1a7cd0dab', part: "ncec" }, h("div", { key: 'a1be2ed4bead0b89572565d00ace39f9a3c0a50d', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'e963d4ab8e599fac8809b3d264602cfc2954064a', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '5cccb2a26d77253b99ed377366e312f114406d03' })), h("h3", { key: '9fed1c485eafff15e04d5a36c58488cc337de9e9', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, instance.t('bookingCancelledTitle'), "!"), h("div", { key: '081f5d0b0615663c0e79aea7b70ea602375f9547', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, instance.t('bookingCancelledMessage'), " ", this.configSettings?.organizer?.name || instance.t('bookingCancelledMessage_theParticipants'), "."), h("div", { key: '697fbb9cccb9c665d35769f44ae16ff7a2a8ad36', class: "nylas-cancelled-event-card__cta" }, h("button-component", { key: 'e4f77128ff98787aca19549e51406d5d88b6fe1a', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
+        "selectedLanguage": ["selectedLanguageChangedHandler"],
         "themeConfig": ["themeConfigChanged"]
     }; }
 };
@@ -822,7 +859,7 @@ __decorate$6([
         stateToProps: new Map([
             ['scheduler.configSettings', 'configSettings'],
             ['scheduler.themeConfig', 'themeConfig'],
-            ['scheduler.themeConfig', 'themeConfig'],
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
         ]),
         eventToProps: {
             closeCancelEventCardClicked: async (_, nylasschedulerconnector) => {
@@ -844,7 +881,7 @@ __decorate$6([
 ], NylasCancelledEventCard.prototype, "render", null);
 NylasCancelledEventCard.style = NylasCancelledEventCardStyle0;
 
-const nylasConfirmedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-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}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
+const nylasConfirmedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-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}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
 const NylasConfirmedEventCardStyle0 = nylasConfirmedEventCardCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -876,12 +913,18 @@ const NylasConfirmedEventCard = class {
         };
         this.configSettings = undefined;
         this.themeConfig = undefined;
+        this.selectedLanguage = undefined;
         this.confirmedEventInfo = undefined;
         this.isClosing = false;
     }
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() {
         debug(`[nylas-confirmed-event-card] Component connected`);
     }
@@ -906,11 +949,12 @@ const NylasConfirmedEventCard = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ffdaf23bd9e627de16d532d89f5b4a080f8ec88c', part: "ncec" }, h("div", { key: '3214b0e02823397ffe659c0d77cdeb26104b416e', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '79f921d70421c441ca2feb896099a050aaac42d1', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9c6386bf2cdd198f47af7b8244d930a7f451a4c1' })), h("h3", { key: 'be5603a03255b90cd62a2f48b11ee70ae6c7a697', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: '88fe62604c3b31332b14b50701e25b8e7fc414b6', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '0394b324bcb9c8c3ba99f837e7831e1507b0f52a', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '2f04fbc0c973cd2a95337f3edf4d5354fd219fb8', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
+        return (h(Host, { key: '196444e0b93a298fd4107589a7ffbba19895fe05', part: "ncec" }, h("div", { key: 'a421437ec16e3354d51a0eed4e31c7c0de557278', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '0da3ba5fcff4b46951adf128d4d4e6493860d56c', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-check-icon", { key: 'a02d08a2367f962607651557eaa5fb7b9d8b75cf' })), h("h3", { key: '0494ca0a842a597bbc40cd3c720d2faf10d6b103', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: '4473fce54b8ad6176286f84cbd5554c8323312f0', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'c0c17c8bccb4bc4b017a4a6aba62cdd48ebeea5a', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '1dcb13cff4958b4549125c5457c9ab1e05078316', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
 };
 __decorate$5([
@@ -919,6 +963,7 @@ __decorate$5([
         stateToProps: new Map([
             ['scheduler.configSettings', 'configSettings'],
             ['scheduler.themeConfig', 'themeConfig'],
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
         ]),
         eventToProps: {
             closeConfirmEventCardClicked: async (_, nylasschedulerconnector) => {
@@ -1168,7 +1213,7 @@ const NylasDatePicker = class {
         });
     }
     render() {
-        return (h(Host, { key: '36322bd1badb927a3d8505334c339b220a81c946', part: "ndp" }, h("div", { key: '666e06338a8be95fdf5a18d0d5e1db006ce0623e', class: "nylas-date-picker" }, h("div", { key: '7429e08d3dc984205a07efb8a7a0dc21d8b3b6b2', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'a5b1770d7f39d173a37f4ee627645f43230b83eb' }, h("clock-icon", { key: '383105a9bfdb7e45e414941c06278de8b73e705f' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '91cd7691b593bd8af1bd930f0206cc284826ee83', class: 'header flex-row' }, h("h2", { key: 'c490b7fe8a6a04ba8fda318b41a7ad5db9c13d0c', part: 'ndp__month-header' }, h("strong", { key: 'bfe557291e300cc8ec876d889909168fa5cd798b' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'a19535626041e7cb3550aabd677fd788bf003b03', class: 'pagination' }, h("button", { key: '6174f0128f51c6ad814473425da3e983e1dd80bc', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '9c6c965ca7273205229ee6f3918226588b9cceb6' })), h("button", { key: 'd83a846832a897e8a35242093ba01fc04497b0ff', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: 'b7106b3807f93e73eb86102a7ce4b81997a2c57a' })))), h("div", { key: '3c5809a8f1447005d82a75bc035a52918397a423', class: 'dates' }, [
+        return (h(Host, { key: 'ecd613f2fec98a00bbb10ac6363097ebede0185d', part: "ndp" }, h("div", { key: '33bb461fca297b69b85ab9f8d17cddb51593dde8', class: "nylas-date-picker" }, h("div", { key: '4da1d51d7bb36838923263563c2f6b1331542fda', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: '8ad906a6b34220b4d35f8dcd1c642d14c3f7293a' }, h("clock-icon", { key: '11d2b21b9ba5fb9a31f9694fc2eaa417b6743957' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '676de20b5616fdbb439567ca27f972040a086b70', class: 'header flex-row' }, h("h2", { key: 'aa60c555eb8bd7b3ef1ee033b8fc1b74f5a78cdb', part: 'ndp__month-header' }, h("strong", { key: '7661ad8cf3c91063617a953aba02c74202910803' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'dc4087fff602efe458a75b542cf845e6c1599532', class: 'pagination' }, h("button", { key: '34754cf95f2645641597a82b66805e1d92e8122d', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '376aba646a4910ab430ec239f6ccab083df41334' })), h("button", { key: '01e5e39d56246416bc9270f6a0c2d32202db339a', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '492223b45186485d55e403a16d75e08c25a070f5' })))), h("div", { key: 'c506414f7ae93d4b995054afa18a313ce02c2ca6', class: 'dates' }, [
             instance.t('days.sunday'),
             instance.t('days.monday'),
             instance.t('days.tuesday'),
@@ -1441,6 +1486,11 @@ const NylasOrganizerConfirmationCard = class {
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
@@ -1461,13 +1511,14 @@ const NylasOrganizerConfirmationCard = class {
         this.action = null;
     }
     render() {
-        return (h(Host, { key: 'ea028ee518207be98291286cc0a7643be3fb944d', part: "nmcc" }, h("div", { key: '43b3b94748e512be15acb93ed9d0125c55fa5c95', class: "event-card-wrapper", part: "nmccc__card" }, h("div", { key: 'd95beee7809ee3879cd1ce400de50f351ecf558f', class: "calendar-icon" }, h("calendar-check-icon", { key: '119f6e93c66606f7deb7df04978cdeedeebc351a' })), h("div", { key: '1fd6e30323bac94800e3b9f66602bff04a677a5c', class: "booked-event-header" }, h("h2", { key: '35a048d55fcb004f1b9474b36fa113c27f3be475', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${instance.t('bookingPendingTitle')}!`)), h("div", { key: 'deaba7be7cd3e7715eda8b386e26c6a3a57dcf4d', class: "manage-booking-description" }, h("p", { key: 'fbbfbbcac7daeca983ee8fff5503395e6b1794f7' }, instance.t('bookingPendingnDescription'))), h("div", { key: 'baa99e33655bc7a7f87552e843cf104dce094699', class: {
+        return (h(Host, { key: '685c64fd73ed2cd97647ddabb84201e0f79ea8cf', part: "nmcc" }, h("div", { key: '70e4b4ae0a3b4df1ced7f0629baf088786e10da7', class: "event-card-wrapper", part: "nmccc__card" }, h("div", { key: '4bab8a23c09d2c73fd57c3fd320ddc60bcd4ad3f', class: "calendar-icon" }, h("calendar-check-icon", { key: '20a288c36cdf0532b4fb8520e25057e05bbb9c67' })), h("div", { key: '23fd0069fe2805be74da6b1fb9c0b2a90a41f004', class: "booked-event-header" }, h("h2", { key: 'ebf3b7a83f62844fc7afcb34d80b7a19162424bf', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${instance.t('bookingPendingTitle')}!`)), h("div", { key: '5b1736ec457c881496302a1e62cd8ebe6695c1dc', class: "manage-booking-description" }, h("p", { key: '97199b19d7bc741afe565733fa112fbc66308c75' }, instance.t('bookingPendingnDescription'))), h("div", { key: 'e305f35b16ec685bb9af4cb9f66d5e43db4edf9b', class: {
                 footer: true,
-            } }, h("button-component", { key: 'a9a43d43cbe27235f9cec4a4e05913917d856455', variant: 'destructive', onClick: this.handleRejectBookingButtonClicked, isLoading: this.isLoading && this.action === 'reject', part: "nmcc__button-outline nmcc__cancel-cta" }, `${instance.t('rejectBookingButton')}`), h("button-component", { key: 'b3cbfad56b7bf732cf76643c44df06f2817a57f8', variant: 'basic', onClick: this.handleConfirmBookingButtonClicked, isLoading: this.isLoading && this.action === 'confirm', part: "nmcc__button-outline nmcc__reschedule-cta" }, `${instance.t('confirmBookingButton')}`)))));
+            } }, h("button-component", { key: 'a25bdb447e29fc415f0381a8ba73a36937fd9435', variant: 'destructive', onClick: this.handleRejectBookingButtonClicked, isLoading: this.isLoading && this.action === 'reject', part: "nmcc__button-outline nmcc__cancel-cta" }, `${instance.t('rejectBookingButton')}`), h("button-component", { key: 'ac814b5239c359decd43506b7981ac8d975d5416', variant: 'basic', onClick: this.handleConfirmBookingButtonClicked, isLoading: this.isLoading && this.action === 'confirm', part: "nmcc__button-outline nmcc__reschedule-cta" }, `${instance.t('confirmBookingButton')}`)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
 };
 __decorate$2([
@@ -1537,6 +1588,11 @@ const NylasSelectedEventCard = class {
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
@@ -1569,13 +1625,14 @@ const NylasSelectedEventCard = class {
         }
     }
     render() {
-        return (h(Host, { key: '22b7e4f0f55d7a75188ebd3e8cc009497ad5a598', part: "nsec" }, h("div", { key: '0082bd129fe4704e4bf9bcc82ab401f7c50237fe', class: "event-card", part: "nsec__card" }, h("div", { key: '37093be5b192f8a8a533cb677b432df2cec80d14', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '253a63fa567065c7a12f6fc8b82333568b52b777' })), h("div", { key: 'a2d5218bd85c6f94652b0f24a11e68f53a8920d3', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
+        return (h(Host, { key: '94fd07366e885e81fb62049c5a44fe6679897aba', part: "nsec" }, h("div", { key: '8ca223250ff59a898eae64b4eaf1ad24e690d3a7', class: "event-card", part: "nsec__card" }, h("div", { key: '77c0fbd4495f0811e5bb05ea95f59d4b2bad90af', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '3c1a395ec15145153c3d0d4b4986aea9a7943ddf' })), h("div", { key: '1c5ed82612ce165f89bd240b21482c916dbf166b', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
             ? capitalizeFirstLetter(formatBookedEventDate(this.selectedTimeslot?.start_time, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en']))
-            : '-'), h("div", { key: '2f11d6deedb50cb0d7b3e9791088266e06cdca1e', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '634bd96488b5b1a51064c9bf015b054648f43011', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: 'b327dfa7747116da0ab29ddebcb6d20c82a0a80b' }), TIMEZONE_MAP[this.selectedTimezone])));
+            : '-'), h("div", { key: 'e62af1aba1c260d178f1cc95f3405e94448cdf29', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '6eea1eca90bde0bb49a747ad8ed3a5ca57971db4', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: 'feac1b95d2177a39f84648ec0e8356026ebc9ef7' }), TIMEZONE_MAP[this.selectedTimezone])));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
 };
 __decorate$1([