At present the countries in the dropdown list (the one with the flags) are translated to (i think) the default language of that country. However, if I might be a French person with a phone number in the United States so I would want to see 'États-Unis' instead of 'United States'.
I see there's a way to achieve this using 'localizedCountries' in the options in web/modules/contrib/phone_international/js/phone_international.js (tested this, it works)
The translations could be provided by drupal
const options = {
initialCountry: (geolocation === 1) ? "auto" : country,
excludeCountries: exclude ? exclude.split("-") : [],
onlyCountries: only ? only.split("-") : [],
geoIpLookup: callback => {
fetch(new Request("//ipinfo.io/json"))
.then(response => {
if (response.status === 200) {
return response.json();
}
}).then(resp => {
const countryCode = (resp && resp.country) ? resp.country : country;
callback(countryCode);
}).catch(error => {
console.error(error);
});
},
preferredCountries: preferred ? preferred.split("-") : [],
nationalMode: true,
autoPlaceholder: "aggressive",
formatOnDisplay: true,
hiddenInput: "full_number",
localizedCountries: {
fr: "Frankreich",
de: "Deutschland",
es: "Spanien",
it: "Italien",
ch: "Schweiz",
nl: "Niederlande",
at: "Österreich",
dk: "Dänemark",
},
utilsScript: drupalSettings.phone_international.path + "/js/utils.js",
};Active
3.3
Code
I fixed this in my project.
added the symfony intl component (composer require symfony/intl)
creating a translated country list with Countries::getNames($this->languageManager->getCurrentLanguage()->getId());
This list has upper case keys and the library requires lowercase so: array_change_key_case($countryList, CASE_LOWER)
Since i'm only using this module in a custom form i'm passing the list using drupalSettings