@bigbinary/neeto-time-zones 0.8.20 → 0.8.21

package/dist/react.es.js

@@ -2357,6 +2357,159 @@ const UsCanada = [
     cities: "Honolulu, Johnston, Lahaina, Rarotonga, Tahiti"
   }
 ];
+let cachedLocale = null;
+let cachedTranslations = null;
+const REGION_LOCALES = ["es-MX", "pt-BR", "zh-CN", "zh-TW"];
+const resolveChineseLocale = (normalized) => {
+  if (/^zh-(Hans|CN|SG)/i.test(normalized) || normalized === "zh") {
+    return "zh-CN";
+  }
+  if (/^zh-(Hant|TW|HK|MO)/i.test(normalized)) {
+    return "zh-TW";
+  }
+  return "zh-CN";
+};
+const getLocaleCode = () => {
+  try {
+    const lang = navigator.language;
+    const normalized = lang.replace("_", "-");
+    if (normalized.startsWith("zh")) {
+      return resolveChineseLocale(normalized);
+    }
+    if (REGION_LOCALES.includes(normalized)) {
+      return normalized;
+    }
+    return normalized.split("-")[0];
+  } catch {
+    return "en";
+  }
+};
+const getImporter = (locale) => {
+  switch (locale) {
+    case "ar":
+      return () => import("./ar-b72637bc-b72637bc.js");
+    case "bg":
+      return () => import("./bg-5fa1a2c5-5fa1a2c5.js");
+    case "ca":
+      return () => import("./ca-c0eab213-c0eab213.js");
+    case "cs":
+      return () => import("./cs-8c92c102-8c92c102.js");
+    case "da":
+      return () => import("./da-be8e5ef1-be8e5ef1.js");
+    case "de":
+      return () => import("./de-baf5ce96-baf5ce96.js");
+    case "es":
+      return () => import("./es-188a0bb9-188a0bb9.js");
+    case "es-MX":
+      return () => import("./es-MX-c4ac39c4-c4ac39c4.js");
+    case "et":
+      return () => import("./et-8c590cf4-8c590cf4.js");
+    case "fi":
+      return () => import("./fi-ff798599-ff798599.js");
+    case "fil":
+      return () => import("./fil-a1ecb634-a1ecb634.js");
+    case "fr":
+      return () => import("./fr-ef848be0-ef848be0.js");
+    case "he":
+      return () => import("./he-a682875c-a682875c.js");
+    case "hi":
+      return () => import("./hi-33fe103b-33fe103b.js");
+    case "hr":
+      return () => import("./hr-a43e9805-a43e9805.js");
+    case "hu":
+      return () => import("./hu-de39fb94-de39fb94.js");
+    case "id":
+      return () => import("./id-d7d5e3e0-d7d5e3e0.js");
+    case "it":
+      return () => import("./it-ba612edd-ba612edd.js");
+    case "ja":
+      return () => import("./ja-bb50b22e-bb50b22e.js");
+    case "ko":
+      return () => import("./ko-96882818-96882818.js");
+    case "nl":
+      return () => import("./nl-d9264781-d9264781.js");
+    case "pl":
+      return () => import("./pl-a4f71f7a-a4f71f7a.js");
+    case "pt":
+      return () => import("./pt-df68bb8a-df68bb8a.js");
+    case "pt-BR":
+      return () => import("./pt-BR-a8f4cb53-a8f4cb53.js");
+    case "ro":
+      return () => import("./ro-48dec29d-48dec29d.js");
+    case "ru":
+      return () => import("./ru-ab8ea97f-ab8ea97f.js");
+    case "sk":
+      return () => import("./sk-4a3cce24-4a3cce24.js");
+    case "sl":
+      return () => import("./sl-b377a006-b377a006.js");
+    case "sv":
+      return () => import("./sv-8b6d858b-8b6d858b.js");
+    case "th":
+      return () => import("./th-04966cae-04966cae.js");
+    case "tr":
+      return () => import("./tr-6fa455e1-6fa455e1.js");
+    case "uk":
+      return () => import("./uk-3ea3d94e-3ea3d94e.js");
+    case "vi":
+      return () => import("./vi-a8bf337b-a8bf337b.js");
+    case "zh-CN":
+      return () => import("./zh-CN-8f06cb7e-8f06cb7e.js");
+    case "zh-TW":
+      return () => import("./zh-TW-86aec94a-86aec94a.js");
+    default:
+      return null;
+  }
+};
+const loadTranslations = async () => {
+  const locale = getLocaleCode();
+  if (locale === "en")
+    return null;
+  if (cachedLocale === locale)
+    return cachedTranslations;
+  try {
+    let importer = getImporter(locale);
+    if (!importer) {
+      const baseLang = locale.split("-")[0];
+      importer = getImporter(baseLang);
+    }
+    if (!importer) {
+      cachedLocale = locale;
+      cachedTranslations = null;
+      return null;
+    }
+    const module = await importer();
+    cachedLocale = locale;
+    cachedTranslations = module.default || module;
+    return cachedTranslations;
+  } catch {
+    cachedLocale = locale;
+    cachedTranslations = null;
+    return null;
+  }
+};
+const getTranslatedTimezoneLabel = (englishLabel, translations) => {
+  var _a, _b;
+  if (!translations)
+    return englishLabel;
+  return ((_b = (_a = translations.timezones) == null ? void 0 : _a[englishLabel]) == null ? void 0 : _b.label) || englishLabel;
+};
+const getTranslatedRegion = (englishRegion, translations) => {
+  var _a;
+  if (!translations)
+    return englishRegion;
+  return ((_a = translations.regions) == null ? void 0 : _a[englishRegion]) || englishRegion;
+};
+const getTranslatedKeywords = (englishLabel, translations) => {
+  var _a, _b;
+  if (!translations)
+    return "";
+  return ((_b = (_a = translations.timezones) == null ? void 0 : _a[englishLabel]) == null ? void 0 : _b.keywords) || "";
+};
+const getTranslatedTime = (timeString, translations) => {
+  if (!(translations == null ? void 0 : translations.ampm))
+    return timeString;
+  return timeString.replace(/\bAM\b/i, translations.ampm.am).replace(/\bPM\b/i, translations.ampm.pm);
+};
 const groupedOptions$1 = [
   { "US/Canada": UsCanada },
   { America },
@@ -2371,6 +2524,15 @@ groupedOptions$1.reduce((accumulator, currentValue) => {
   const key = Object.keys(currentValue)[0];
   return [...accumulator, ...currentValue[key]];
 }, []);
+let translationsPromise = null;
+const initTranslations = async () => {
+  if (translationsPromise)
+    return translationsPromise;
+  translationsPromise = loadTranslations().then((result) => {
+    return result;
+  });
+  return translationsPromise;
+};
 var n$1, l$1, u$1, i$1, o$1, r$1, f$1, c$1 = {}, s$1 = [], a$1 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, v$1 = Array.isArray;
 function h$1(n2, l2) {
   for (var u2 in l2)
@@ -2795,7 +2957,8 @@ function Button({
   onClick,
   is24H,
   dataTestid,
-  disabled = false
+  disabled = false,
+  translations = null
 }) {
   const { label, keywords: value, cities } = timezone;
   const getCurrentTimeInTimezone = (timeZone) => {
@@ -2810,7 +2973,7 @@ function Button({
       "en-US",
       options
     );
-    return currentTimeInTimezone;
+    return getTranslatedTime(currentTimeInTimezone, translations);
   };
   return /* @__PURE__ */ y(
     "button",
@@ -2820,7 +2983,7 @@ function Button({
       "data-testid": dataTestid,
       type: "button"
     },
-    /* @__PURE__ */ y("div", { className: "neeto-time-zones-button--label relative", key: label }, hideCitiesTooltip ? label : /* @__PURE__ */ y("span", { ...{ value }, title: cities }, label)),
+    /* @__PURE__ */ y("div", { className: "neeto-time-zones-button--label relative", key: label }, hideCitiesTooltip ? getTranslatedTimezoneLabel(label, translations) : /* @__PURE__ */ y("span", { ...{ value }, title: cities }, getTranslatedTimezoneLabel(label, translations))),
     /* @__PURE__ */ y("span", { className: "neeto-time-zones-button--time" }, getCurrentTimeInTimezone((timezone == null ? void 0 : timezone.main) || (timezone == null ? void 0 : timezone.utc[0]))),
     children
   );
@@ -2831,7 +2994,8 @@ function Dropdown({
   elementId,
   is24H,
   setIsOverlayVisible,
-  disabled
+  disabled,
+  translations
 }) {
   const handleClick = () => {
     setIsOverlayVisible(
@@ -2848,7 +3012,7 @@ function Dropdown({
   return /* @__PURE__ */ y(
     Button,
     {
-      ...{ is24H, disabled },
+      ...{ is24H, disabled, translations },
       onClick: handleClick,
       className: "neeto-time-zones-dropdown",
       timezone: selectedValue,
@@ -2945,7 +3109,7 @@ const getDataTestid = (timezone) => {
   }
   return `${hyphenize(label)}-select-option`;
 };
-const createGroupedOptionButton = (group, selectedValue, handleSelect, is24H) => /* @__PURE__ */ y("div", null, group.map((groupItem) => {
+const createGroupedOptionButton = (group, selectedValue, handleSelect, is24H, translations) => /* @__PURE__ */ y("div", null, group.map((groupItem) => {
   const key = Object.keys(groupItem)[0];
   const element = groupItem[key];
   return /* @__PURE__ */ y(
@@ -2954,11 +3118,11 @@ const createGroupedOptionButton = (group, selectedValue, handleSelect, is24H) =>
       className: "neeto-time-zones-list__container",
       key: key.toLowerCase()
     },
-    /* @__PURE__ */ y("span", { className: "neeto-time-zones-list--title" }, key),
+    /* @__PURE__ */ y("span", { className: "neeto-time-zones-list--title" }, getTranslatedRegion(key, translations)),
     element.map((timezone) => /* @__PURE__ */ y(
       Button,
       {
-        ...{ is24H, timezone },
+        ...{ is24H, timezone, translations },
         id: valueToId(timezone.keywords),
         onClick: handleSelect,
         className: `neeto-time-zones-list-item ${selectedValue.keywords === timezone.keywords && "neeto-time-zones-list-item--active"}`,
@@ -2968,15 +3132,21 @@ const createGroupedOptionButton = (group, selectedValue, handleSelect, is24H) =>
     ))
   );
 }));
-const filterTimezones = (inputValue) => {
+const filterTimezones = (inputValue, translations) => {
   if (inputValue === "") {
     return groupedOptions;
   }
+  const lowerInput = inputValue.toLowerCase();
   const filteredOptions = groupedOptions.map((group) => {
     const key = Object.keys(group)[0];
-    const element = group[key].filter(
-      (timezone) => timezone.label.toLowerCase().includes(inputValue.toLowerCase()) || timezone.keywords.toLowerCase().includes(inputValue.toLowerCase())
-    );
+    const element = group[key].filter((timezone) => {
+      const matchesEnglish = timezone.label.toLowerCase().includes(lowerInput) || timezone.keywords.toLowerCase().includes(lowerInput);
+      if (matchesEnglish)
+        return true;
+      const translatedLabel = getTranslatedTimezoneLabel(timezone.label, translations);
+      const translatedKeywords = getTranslatedKeywords(timezone.label, translations);
+      return translatedLabel.toLowerCase().includes(lowerInput) || translatedKeywords.toLowerCase().includes(lowerInput);
+    });
     return isNotEmpty(element) ? { [key]: element } : null;
   });
   return filteredOptions.filter(isNot(null));
@@ -2987,7 +3157,8 @@ function Options({
   searchInput,
   selectedValue,
   setSelectedValue,
-  setIsOverlayVisible
+  setIsOverlayVisible,
+  translations
 }) {
   const handleSelect = (e2) => {
     const parentButton = e2.target.closest("button");
@@ -3021,10 +3192,11 @@ function Options({
       id: `${elementId}-ntsp-overflow-container`
     },
     createGroupedOptionButton(
-      filterTimezones(searchInput),
+      filterTimezones(searchInput, translations),
       selectedValue,
       handleSelect,
-      is24H
+      is24H,
+      translations
     )
   );
 }
@@ -3070,7 +3242,8 @@ function OptionsContainer({
   setIsOverlayVisible,
   setIs24H,
   position,
-  isTimeFormatSwitchVisible
+  isTimeFormatSwitchVisible,
+  translations
 }) {
   const [searchInput, setSearchInput] = h("");
   const handleTimeFormatChange = (value) => {
@@ -3100,7 +3273,8 @@ function OptionsContainer({
           searchInput,
           selectedValue,
           setIsOverlayVisible,
-          setSelectedValue
+          setSelectedValue,
+          translations
         }
       }
     )
@@ -3128,6 +3302,7 @@ function Selector({
   const [is24H, setIs24H] = h(
     getFromLocalStorage("ntsp-24-hr-time-format") || false
   );
+  const [translations, setTranslations] = h(null);
   p(() => {
     const handleOutsideClick = (e2) => {
       const element = document.getElementById(elementId);
@@ -3154,6 +3329,9 @@ function Selector({
     const timeZone = getTimezoneObject(initialValue) || getDefaultValue;
     setSelectedValue(timeZone);
   }, [initialValue]);
+  p(() => {
+    initTranslations().then(setTranslations);
+  }, []);
   return /* @__PURE__ */ y("div", { className: "neeto-time-zones__wrapper", id: elementId }, /* @__PURE__ */ y("div", { className: `neeto-time-zones__container ${className}` }, /* @__PURE__ */ y(
     Dropdown,
     {
@@ -3163,7 +3341,8 @@ function Selector({
         is24H,
         isOverlayVisible,
         selectedValue,
-        setIsOverlayVisible
+        setIsOverlayVisible,
+        translations
       }
     }
   ), isOverlayVisible === true && /* @__PURE__ */ y(
@@ -3177,7 +3356,8 @@ function Selector({
         setIs24H,
         setIsOverlayVisible,
         setSelectedValue,
-        isTimeFormatSwitchVisible
+        isTimeFormatSwitchVisible,
+        translations
       }
     }
   )));