@nylas/web-elements 2.5.5 → 2.5.6

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

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-9TuL48qE.js');
-var registerComponent = require('./register-component-Cu3tKKKD.js');
-var utils = require('./utils-DMqnHqF8.js');
+var registerComponent = require('./register-component-3z1jbXx-.js');
+var utils = require('./utils-C5qGWVDr.js');
 
 const nylasBookedEventCardCss = ":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}.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%}";
 
@@ -1178,7 +1178,9 @@ const NylasDatePicker = class {
         });
     }
     disconnectedCallback() { }
-    componentWillLoad() { }
+    componentWillLoad() {
+        utils.instance.changeLanguage(this.selectedLanguage || utils.LANGUAGE_CODE.en);
+    }
     componentDidLoad() {
         utils.debug(`[nylas-date-picker] Component did load`);
         const normalizedSelectedDate = utils.normalizeDateInput(this.selectedDate);
@@ -1235,7 +1237,8 @@ const NylasDatePicker = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'f6eb0ae7ac7f813b9763576b02fa4f271074c30c', part: "ndp" }, index.h("div", { key: 'c3de1211e9e8c134dfc9c14fb8cd7978bebad09c', class: "nylas-date-picker" }, index.h("div", { key: '8cbc239cbc7d4f938cc3da90fd99181aac0b5e2d', class: "title", part: "ndp__title" }, this.configSettings?.name ? (index.h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (index.h("h1", null, index.h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), index.h("p", { key: 'c6dfb87749ef7d7ad466e86f30f6aed86b98dd12' }, index.h("clock-icon", { key: '0f1c5f7ee6733c2907e7ff5d3f7bad1ca736b5b1' }), this.eventDuration ? utils.convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${utils.instance.t('time.minutes')}`)), index.h("div", { key: '35c6ea47189577500981b14fcc12a25a2e7a0e94', class: 'header flex-row' }, index.h("h2", { key: '34e837c20b7dbd7bb3a13dd7b629c74c9de9c2f3', part: 'ndp__month-header' }, index.h("strong", { key: '7c6a0575c6bad178ba49eb0ee54046bc884abc84' }, utils.translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), index.h("div", { key: '832f82159f63b938b654497aa627f49c918fc53d', class: 'pagination' }, index.h("button", { key: 'c640c5546b4447583c792d4918f25bda18595d09', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, index.h("chevron-icon", { key: '2392a91f4a7d33d45df8dcd170382557e3d02f5f' })), index.h("button", { key: '8295804ed87c42b9930bf7b45011f9aa92dce140', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, index.h("chevron-icon", { key: 'aeebffc05c0fb00f5f507ab6e5a9943ae8c1a082' })))), index.h("div", { key: '1fbbdc9a619297551efde242c173aacdcd136a30', class: 'dates' }, [
+        const translate = utils.instance.getFixedT(this.selectedLanguage || utils.LANGUAGE_CODE.en);
+        return (index.h(index.Host, { key: 'dcc46db0068283196ab8617c1871b235561c0741', part: "ndp" }, index.h("div", { key: '27a11154a60e94b8eebdf9810cba62119e90b0e3', class: "nylas-date-picker" }, index.h("div", { key: '3ee9525a4ce02fd8dfa8b9da74123c33164b51b2', class: "title", part: "ndp__title" }, this.configSettings?.name ? (index.h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (index.h("h1", null, index.h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), index.h("p", { key: '341a72b18785b8b34998d1654cdb975647df5d97' }, index.h("clock-icon", { key: '3d347b0279c632a8a95bb65ee3832a59a1a7ce60' }), this.eventDuration ? utils.convertMinutesToHoursAndMinutes(this.eventDuration, this.selectedLanguage || utils.LANGUAGE_CODE.en) : `- ${translate('time.minutes')}`)), index.h("div", { key: '72589db519389a9138dddff513af7cc284d64842', class: 'header flex-row' }, index.h("h2", { key: '868817329700310b7f82eb8a3caa782aedf2eadd', part: 'ndp__month-header' }, index.h("strong", { key: '146ece2d48408a3484fd099381d07282930221b8' }, utils.translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), index.h("div", { key: '55aea9cfd07bcc22edc49ddfd5975329a67767a3', class: 'pagination' }, index.h("button", { key: '9fde702e6af54191d84be04897ea523860bed605', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, index.h("chevron-icon", { key: '11c4ad0702a08aa995dcc23cbc7f4e07ab91701b' })), index.h("button", { key: '1d70b32e763ef45a933d151037449165e9d3ea91', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, index.h("chevron-icon", { key: '1146af05e22e6fb03ee85bf2a90a5cc707d5c132' })))), index.h("div", { key: 'a374ed9a29d3d94ae3c481deaaf7b6035d66b14a', class: 'dates' }, [
             utils.instance.t('days.sunday'),
             utils.instance.t('days.monday'),
             utils.instance.t('days.tuesday'),
@@ -1323,7 +1326,7 @@ const NylasLocaleSwitch = class {
         this.timezoneChanged = index.createEvent(this, "timezoneChanged", 7);
         this.languageChanged = index.createEvent(this, "languageChanged", 7);
         this.selectedTimezone = this.bookingInfo?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
-        this.selectedLanguage = this.bookingInfo?.language || navigator.language;
+        this.selectedLanguage = utils.normalizeSupportedLanguageCode(this.bookingInfo?.language) || utils.detectBrowserLanguageCode() || utils.LANGUAGE_CODE.en;
         this.searchPlaceholder = utils.instance.t('search');
     }
     themeConfigChanged(newThemeConfig) {
@@ -1370,10 +1373,11 @@ const NylasLocaleSwitch = class {
         this.timezoneChanged.emit(timezone);
     }
     changeLanguage(language) {
-        this.selectedLanguage = language;
-        utils.instance.changeLanguage(language);
+        const selectedLanguage = utils.normalizeSupportedLanguageCode(language) || utils.LANGUAGE_CODE.en;
+        this.selectedLanguage = selectedLanguage;
+        utils.instance.changeLanguage(selectedLanguage);
         this.searchPlaceholder = utils.instance.t('search');
-        this.languageChanged.emit(language);
+        this.languageChanged.emit(selectedLanguage);
     }
     nylasFormDropdownChangedHandler(event) {
         const { name, value } = event.detail;
@@ -1407,13 +1411,13 @@ const NylasLocaleSwitch = class {
             label: utils.LANGUAGE_MAP[key],
             value: key,
         }));
-        return (index.h(index.Host, { key: '3934384b73005eeda666fcaad77133f48e94fbe9' }, index.h("div", { key: '5199eb3dbab39d2dbfa1c2a473629c4e7f1e0f1e', class: "nylas-locale-switch", part: "nls" }, index.h("div", { key: '7e66b5e3dbb6893d74f31a07d527cef9bb4f5ce8', class: {
+        return (index.h(index.Host, { key: '878ad0576a298f76e1d76383c7ea395690abc500' }, index.h("div", { key: 'f717bdec7d6f0252ad9fbc373e56b4d6cbf6843a', class: "nylas-locale-switch", part: "nls" }, index.h("div", { key: 'e218d237a8848e76ce1559a814da4380ebca23a0', class: {
                 'select-wrapper': true,
                 'timezone': true,
-            }, part: "nls__timezone" }, index.h("select-dropdown", { key: 'a8dd95af4e95a119278e01459ad083cea9f93370', name: "timezone", searchPlaceholder: this.searchPlaceholder, options: timezoneOptions, ref: el => (this.timezoneRef = el), defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone), exportparts: "sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label" }, index.h("span", { key: 'db8057188766c61529c632b980a963de2b8470c8', slot: "select-icon" }, index.h("globe-icon", { key: 'd0388639b919bdf658e71ba94febb08596e2e449', width: "20", height: "20" })))), index.h("div", { key: '5e72dc2cf30e7d4b497358093d4626df4d116143', class: {
+            }, part: "nls__timezone" }, index.h("select-dropdown", { key: 'da0a9f568ec3da3d4616b902fdf877d6fe123147', name: "timezone", searchPlaceholder: this.searchPlaceholder, options: timezoneOptions, ref: el => (this.timezoneRef = el), defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone), exportparts: "sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label" }, index.h("span", { key: 'baf1c6a3adcf57178c909a41ac7deabf357ffa70', slot: "select-icon" }, index.h("globe-icon", { key: 'f80555b8810c8eb60c51e6f8dfdc53ecfd811912', width: "20", height: "20" })))), index.h("div", { key: '039488afeac90a9cb83b6846e3102502a8c90e80', class: {
                 'select-wrapper': true,
                 'language': true,
-            }, part: "nls__language" }, index.h("select-dropdown", { key: '5cd64f99d9d5b14278a70ea85a08d227de991e98', name: "language", searchPlaceholder: this.searchPlaceholder, options: languageOptions, ref: el => (this.languageRef = el), defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage), exportparts: "sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label" }, index.h("span", { key: '4699fc9eb68b357af57fe7d93d3b2aed7243dc38', slot: "select-icon" }, index.h("translate-icon", { key: '0f9a7f6334139f27bbede0e5641696184c027cd6', width: "20", height: "20" })))))));
+            }, part: "nls__language" }, index.h("select-dropdown", { key: '5b98342ac7181b117d96fcad0ad6da094759bc3d', name: "language", searchPlaceholder: this.searchPlaceholder, options: languageOptions, ref: el => (this.languageRef = el), defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage), exportparts: "sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label" }, index.h("span", { key: '5f8c1c24b529e9d3d106bd29bbd81aad4512380a', slot: "select-icon" }, index.h("translate-icon", { key: '34ecfe3bfa98d2465a8734b8d09e211532a8591e', width: "20", height: "20" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -1783,6 +1787,7 @@ const NylasTimeslotPicker = class {
     disconnectedCallback() { }
     async componentWillLoad() {
         utils.debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
+        utils.instance.changeLanguage(this.selectedLanguage || utils.LANGUAGE_CODE.en);
     }
     async componentDidLoad() {
         utils.debug(`[nylas-timeslot-picker] Component did load`);
@@ -1835,7 +1840,7 @@ const NylasTimeslotPicker = class {
             return (index.h(index.Host, null, index.h("div", { class: 'loading' }, new Array(6).fill(0).map((_, i) => (index.h("div", { class: 'timeslot-skeleton', style: { animationDelay: `${i * 20}ms` } }))))));
         }
         if (this.availability && this.availability.length === 0) {
-            return (index.h(index.Host, null, index.h("div", { class: 'empty' }, index.h("span", null, "No dates available"))));
+            return (index.h(index.Host, null, index.h("div", { class: 'empty' }, index.h("span", null, utils.instance.t('noDatesAvailable')))));
         }
         const filteredTimes = this.times.filter(timeslot => {
             const groupEvent = timeslot?.event_id || timeslot?.master_id;
@@ -1843,7 +1848,7 @@ const NylasTimeslotPicker = class {
             return !(groupEvent && !showCapacity);
         });
         if ((!this.times || this.times.length === 0 || filteredTimes.length === 0) && !!this.selectedDate) {
-            return (index.h(index.Host, null, index.h("div", { class: 'empty' }, index.h("span", null, "No time slots available for selected date"))));
+            return (index.h(index.Host, null, index.h("div", { class: 'empty' }, index.h("span", null, utils.instance.t('noTimeSlotsAvailable')))));
         }
         if (!this.selectedDate)
             return index.h(index.Host, null);