@nylas/web-elements 2.5.4 → 2.5.6

package/dist/esm/nylas-form-card.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-0EQQA0nE.js';
-import { R as RegisterComponent } from './register-component-DVA2Alyc.js';
-import { a as debug, R as checkForMissingSlots } from './utils-BW6igRcf.js';
+import { R as RegisterComponent } from './register-component-3SZ7gAeK.js';
+import { a as debug, S as checkForMissingSlots } from './utils-DDKV6-nQ.js';
 
 const nylasFormCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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;width:inherit}.nylas-form-card{width:100%;border-radius:8px;border:1px solid var(--nylas-base-200)}.nylas-form-card__header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}";
 

package/dist/esm/nylas-notification_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, F as Fragment, H as Host, a as getElement } from './index-0EQQA0nE.js';
-import { a as debug } from './utils-BW6igRcf.js';
+import { a as debug } from './utils-DDKV6-nQ.js';
 
 const nylasNotificationCss = ":host{display:block;margin-bottom:-12px;width:100%;z-index:1;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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}.notif{display:flex;padding:17px;align-items:flex-start;justify-content:space-between;gap:16px;border-radius:var(--nylas-border-radius-2x);border:1.5px solid var(--nylas-error);background:var(--nylas-base-0)}@media screen and (max-width: 768px){.notif{width:auto}}.notif .content{display:flex;flex-direction:row;gap:8px}.notif .content .message{font-size:14px;font-weight:400;color:var(--nylas-base-800)}.notif .content .message .title{font-size:16px;font-weight:600;color:var(--nylas-base-950);display:block}.notif .content .message .description{font-size:14px;font-weight:400;color:var(--nylas-base-800);display:block;word-break:break-word}.notif .content .icon.error{color:var(--nylas-error)}.notif.error{border-color:var(--nylas-error);background:rgb(255, 248, 248)}.notif.warning{border-color:var(--nylas-warning)}.notif.info{border-color:var(--nylas-info)}.notif.success{border-color:var(--nylas-success)}.notif .dismiss-btn{background:none;border:none;color:var(--nylas-base-950);cursor:pointer}";
 

package/dist/esm/nylas-scheduler-editor.entry.js

@@ -1,8 +1,8 @@
 import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-0EQQA0nE.js';
-import { N as NylasBaseProvider } from './abstract-provider-KowNUOZM.js';
-import { N as NylasIdentityRequestWrapper } from './nylas-api-request-BUmT2J5X.js';
-import { d as dayjs, u as utc, t as timezone, a as debug, b as dataResponse, g as getCalendarRange, e as error, C as CONFIGURATION_EVENT_TYPE, L as LANGUAGE_CODE, i as instance, c as LANGUAGE_MAP } from './utils-BW6igRcf.js';
-import { o as o$1, v as version, E as ErrorCategory, N as NotificationType } from './version-DDixcvI0.js';
+import { N as NylasBaseProvider } from './abstract-provider-Dbnlk0Q8.js';
+import { N as NylasIdentityRequestWrapper } from './nylas-api-request-tYrM5hQX.js';
+import { d as dayjs, u as utc, t as timezone, a as debug, b as dataResponse, g as getCalendarRange, e as error, C as CONFIGURATION_EVENT_TYPE, L as LANGUAGE_CODE, i as instance, c as LANGUAGE_MAP } from './utils-DDKV6-nQ.js';
+import { o as o$1, v as version, E as ErrorCategory, N as NotificationType } from './version-Xc-4F4Ta.js';
 import { c as createStore } from './index-DVBNi-yR.js';
 
 dayjs.extend(utc);

package/dist/esm/nylas-scheduling.entry.js

@@ -1,7 +1,7 @@
 import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-0EQQA0nE.js';
-import { N as NylasBaseProvider } from './abstract-provider-KowNUOZM.js';
-import { i as instance, n as normalizeDateInput, f as addDaysToCurrentDate, a as debug, L as LANGUAGE_CODE, h as detectBrowserLanguageCode, j as compactStringToUUIDs, k as capitalizeFirstLetter, c as LANGUAGE_MAP } from './utils-BW6igRcf.js';
-import { E as ErrorCategory, v as version, u } from './version-DDixcvI0.js';
+import { N as NylasBaseProvider } from './abstract-provider-Dbnlk0Q8.js';
+import { n as normalizeSupportedLanguageCode, L as LANGUAGE_CODE, i as instance, f as normalizeDateInput, h as addDaysToCurrentDate, a as debug, j as detectBrowserLanguageCode, k as compactStringToUUIDs, l as LANGUAGE_CODE_TO_LOCALE_MAP, m as capitalizeFirstLetter, c as LANGUAGE_MAP } from './utils-DDKV6-nQ.js';
+import { E as ErrorCategory, v as version, u } from './version-Xc-4F4Ta.js';
 import { c as createStore } from './index-DVBNi-yR.js';
 import { i as isInitialized, a as init, f as feedbackSyncIntegration, c as captureMessage, b as captureFeedback } from './feedbackSync-B8tfyAQm.js';
 
@@ -221,8 +221,9 @@ class NylaSchedulerAPIConnector {
         this.schedulerStore.set('selectedTimezone', timezone);
     }
     selectLanguage(language) {
-        this.schedulerStore.set('selectedLanguage', language);
-        instance.changeLanguage(language);
+        const selectedLanguage = normalizeSupportedLanguageCode(language) || LANGUAGE_CODE.en;
+        this.schedulerStore.set('selectedLanguage', selectedLanguage);
+        instance.changeLanguage(selectedLanguage);
     }
     async toggleAdditionalData(value) {
         if (!value) {
@@ -796,7 +797,7 @@ class NylasSchedulerConnector {
 function CreateNylasSchedulerStore(defaultState = {}) {
     const defaultNylasStoreState = {
         selectedDate: null,
-        selectedLanguage: navigator.language,
+        selectedLanguage: detectBrowserLanguageCode() || LANGUAGE_CODE.en,
         selectedTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         selectedTimeslot: null,
         showBookingForm: false,
@@ -885,7 +886,7 @@ const NylasScheduling = class {
         this.showNotification = true;
         this.enableUserFeedback = true;
         this.automaticComponentRegistration = true;
-        this.selectedDateLabel = new Date().toLocaleDateString(navigator.language, { dateStyle: 'full' }) || `${instance.t('noDateSelected')}`;
+        this.selectedDateLabel = `${instance.t('noDateSelected')}`;
         this.language = navigator.language;
         this.showFeedbackModal = false;
         this.bookingInfoConfirmed = null;
@@ -897,7 +898,7 @@ const NylasScheduling = class {
     async componentWillLoad() {
         debug(`[nylas-scheduler] Component will load`);
         this.version = version;
-        await Promise.resolve();
+        await new Promise(resolve => setTimeout(resolve, 0));
         if (this.enableUserFeedback && !isInitialized()) {
             init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
@@ -923,13 +924,16 @@ const NylasScheduling = class {
         const urlParams = new URLSearchParams(window.location.search);
         const langFromUrl = urlParams.get('lang');
         const validLanguageFromUrl = langFromUrl && Object.values(LANGUAGE_CODE).includes(langFromUrl) ? langFromUrl : null;
+        const initialSelectedLanguage = validLanguageFromUrl || this.defaultLanguage || normalizeSupportedLanguageCode(this.bookingInfo?.language) || detectBrowserLanguageCode() || LANGUAGE_CODE.en;
+        this.language = initialSelectedLanguage;
+        instance.changeLanguage(initialSelectedLanguage);
         this.stores = {
             scheduler: CreateNylasSchedulerStore({
                 bookingInfo: this.bookingInfo,
                 nylasBranding: this.nylasBranding,
                 themeConfig: this.themeConfig,
                 hour12: this.hour12,
-                selectedLanguage: validLanguageFromUrl || this.defaultLanguage || this.bookingInfo?.language || detectBrowserLanguageCode() || LANGUAGE_CODE.en,
+                selectedLanguage: initialSelectedLanguage,
                 ...this.defaultSchedulerState,
             }),
         };
@@ -1184,7 +1188,7 @@ const NylasScheduling = class {
     bookingInfoChanged(newVal) {
         this.stores?.scheduler.set('bookingInfo', newVal);
         if (newVal?.language && !this.defaultLanguage) {
-            this.stores?.scheduler.set('selectedLanguage', newVal.language);
+            this.stores?.scheduler.set('selectedLanguage', normalizeSupportedLanguageCode(newVal.language) || LANGUAGE_CODE.en);
         }
     }
     rescheduleBookingRefChanged(newVal) {
@@ -1340,7 +1344,18 @@ const NylasScheduling = class {
     }
     dateSelectedHandler(event) {
         const date = normalizeDateInput(event.detail);
-        this.selectedDateLabel = date ? date.toLocaleDateString(this.language, { dateStyle: 'full' }) : `${instance.t('noDateSelected')}`;
+        this.selectedDateLabel = date ? this.formatSelectedDateLabel(date) : `${instance.t('noDateSelected')}`;
+    }
+    getSelectedLanguage() {
+        const selectedLanguage = this.stores?.scheduler.get('selectedLanguage') || this.defaultLanguage || detectBrowserLanguageCode() || LANGUAGE_CODE.en;
+        return normalizeSupportedLanguageCode(selectedLanguage) || LANGUAGE_CODE.en;
+    }
+    getSelectedDateLocale() {
+        const selectedLanguage = this.getSelectedLanguage();
+        return LANGUAGE_CODE_TO_LOCALE_MAP[selectedLanguage] || selectedLanguage || LANGUAGE_CODE_TO_LOCALE_MAP[LANGUAGE_CODE.en];
+    }
+    formatSelectedDateLabel(date) {
+        return capitalizeFirstLetter(date.toLocaleDateString(this.getSelectedDateLocale(), { dateStyle: 'full' }));
     }
     cancelBookedEventErrorHandler(event) {
         this.nylasSchedulerError.emit({ notification: { ...this.getErrorObject(event.detail.error) }, host: this.host });
@@ -1515,13 +1530,12 @@ const NylasScheduling = class {
         const nylasBranding = nylasSchedulerStore?.get('nylasBranding') || this.nylasBranding;
         const selectedDate = normalizeDateInput(nylasSchedulerStore?.get('selectedDate'));
         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 || detectBrowserLanguageCode() || LANGUAGE_CODE.en;
+        const selectedLanguage = this.getSelectedLanguage();
+        const selectedDateLabel = selectedDate ? this.formatSelectedDateLabel(selectedDate) : `${instance.t('noDateSelected')}`;
         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" }))), 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, themeConfig: this.themeConfig, 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)));
         }
@@ -1578,7 +1592,7 @@ const NylasScheduling = class {
         }
         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)));
+            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" }, 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" })))), 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, themeConfig: this.themeConfig, 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)));