diff --git a/README.md b/README.md index 62496889..f1533885 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,18 @@ Add `NgxIntlTelInputModule` to your module file: imports: [NgxIntlTelInputModule]; ``` +### Translation support + create .json file in your app in assets/i18n/{lang}.json. That file should have following structure: + ```{ + "ngx-intl-tel-input-country": { + "nl": "Nederland" + ... + } + } + ``` + Fill in translations. Key - iso code ("nl"), and value - translation for country ("Nederland")). + If translation is missing English version is used. + ## Example Refer to main app in this repository for working example. diff --git a/package.json b/package.json index 9c955f0e..ab84e54d 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,8 @@ "@angular/platform-browser": "8.x - 13.x", "@angular/platform-browser-dynamic": "8.x - 13.x", "@angular/router": "8.x - 13.x", + "@ngx-translate/core": "^13.0.0", + "@ngx-translate/http-loader": "^6.0.0", "bootstrap": "^4.5.2", "core-js": "^3.6.5", "google-libphonenumber": "^3.2.3", diff --git a/projects/ngx-intl-tel-input/src/lib/create-translate-loader.function.ts b/projects/ngx-intl-tel-input/src/lib/create-translate-loader.function.ts new file mode 100644 index 00000000..99ae2d2a --- /dev/null +++ b/projects/ngx-intl-tel-input/src/lib/create-translate-loader.function.ts @@ -0,0 +1,6 @@ +import { HttpClient } from "@angular/common/http"; +import { TranslateHttpLoader } from "@ngx-translate/http-loader"; + +export function createTranslateLoader(http: HttpClient) { + return new TranslateHttpLoader(http, './assets/i18n/', '.json'); +} diff --git a/projects/ngx-intl-tel-input/src/lib/custom-missing-translation-handler.class.ts b/projects/ngx-intl-tel-input/src/lib/custom-missing-translation-handler.class.ts new file mode 100644 index 00000000..dc72e937 --- /dev/null +++ b/projects/ngx-intl-tel-input/src/lib/custom-missing-translation-handler.class.ts @@ -0,0 +1,13 @@ +import { MissingTranslationHandler, MissingTranslationHandlerParams } from "@ngx-translate/core"; +import { defaultCountryTranslations, translationPrefix } from "./data"; + +export class CustomMissingTranslationHandler implements MissingTranslationHandler { + handle(params: MissingTranslationHandlerParams) { + + const {key} = params; + const [_, code] = key.split('.'); + + const defaultTranslation = defaultCountryTranslations[translationPrefix][code]; + return defaultTranslation; + } +} diff --git a/projects/ngx-intl-tel-input/src/lib/data/default-country-translations.ts b/projects/ngx-intl-tel-input/src/lib/data/default-country-translations.ts new file mode 100644 index 00000000..bc7134f3 --- /dev/null +++ b/projects/ngx-intl-tel-input/src/lib/data/default-country-translations.ts @@ -0,0 +1,252 @@ +interface Code { + [key: string]: string +} + +// to be used by missingTranslationHandler as default values +export const defaultCountryTranslations: {"ngx-intl-tel-input-country": Code} = { + "ngx-intl-tel-input-country": { + "af": "Afghanistan (‫افغانستان‬‎)", + "al": "Albania (Shqipëri)", + "dz": "Algeria (‫الجزائر‬‎)", + "as": "American Samoa", + "ad": "Andorra", + "ao": "Angola", + "ai": "Anguilla", + "ag": "Antigua and Barbuda", + "ar": "Argentina", + "am": "Armenia (Հայաստան)", + "aw": "Aruba", + "au": "Australia", + "at": "Austria (Österreich)", + "az": "Azerbaijan (Azərbaycan)", + "bs": "Bahamas", + "bh": "Bahrain (‫البحرين‬‎)", + "bd": "Bangladesh (বাংলাদেশ)", + "bb": "Barbados", + "by": "Belarus (Беларусь)", + "be": "Belgium (België)", + "bz": "Belize", + "bj": "Benin (Bénin)", + "bm": "Bermuda", + "bt": "Bhutan (འབྲུག)", + "bo": "Bolivia", + "ba": "Bosnia and Herzegovina (Босна и Херцеговина)", + "bw": "Botswana", + "br": "Brazil (Brasil)", + "io": "British Indian Ocean Territory", + "vg": "British Virgin Islands", + "bn": "Brunei", + "bg": "Bulgaria (България)", + "bf": "Burkina Faso", + "bi": "Burundi (Uburundi)", + "kh": "Cambodia (កម្ពុជា)", + "cm": "Cameroon (Cameroun)", + "ca": "Canada", + "cv": "Cape Verde (Kabu Verdi)", + "bq": "Caribbean Netherlands", + "ky": "Cayman Islands", + "cf": "Central African Republic (République centrafricaine)", + "td": "Chad (Tchad)", + "cl": "Chile", + "cn": "China (中国)", + "cx": "Christmas Island", + "cc": "Cocos (Keeling) Islands", + "co": "Colombia", + "km": "Comoros (‫جزر القمر‬‎)", + "cd": "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", + "cg": "Congo (Republic) (Congo-Brazzaville)", + "ck": "Cook Islands", + "cr": "Costa Rica", + "ci": "Côte d’Ivoire", + "hr": "Croatia (Hrvatska)", + "cu": "Cuba", + "cw": "Curaçao", + "cy": "Cyprus (Κύπρος)", + "cz": "Czech Republic (Česká republika)", + "dk": "Denmark (Danmark)", + "dj": "Djibouti", + "dm": "Dominica", + "do": "Dominican Republic (República Dominicana)", + "ec": "Ecuador", + "eg": "Egypt (‫مصر‬‎)", + "sv": "El Salvador", + "gq": "Equatorial Guinea (Guinea Ecuatorial)", + "er": "Eritrea", + "ee": "Estonia (Eesti)", + "et": "Ethiopia", + "fk": "Falkland Islands (Islas Malvinas)", + "fo": "Faroe Islands (Føroyar)", + "fj": "Fiji", + "fi": "Finland (Suomi)", + "fr": "France", + "gf": "French Guiana (Guyane française)", + "pf": "French Polynesia (Polynésie française)", + "ga": "Gabon", + "gm": "Gambia", + "ge": "Georgia (საქართველო)", + "de": "Germany (Deutschland)", + "gh": "Ghana (Gaana)", + "gi": "Gibraltar", + "gr": "Greece (Ελλάδα)", + "gl": "Greenland (Kalaallit Nunaat)", + "gd": "Grenada", + "gp": "Guadeloupe", + "gu": "Guam", + "gt": "Guatemala", + "gg": "Guernsey", + "gn": "Guinea (Guinée)", + "gw": "Guinea-Bissau (Guiné Bissau)", + "gy": "Guyana", + "ht": "Haiti", + "hn": "Honduras", + "hk": "Hong Kong (香港)", + "hu": "Hungary (Magyarország)", + "is": "Iceland (Ísland)", + "in": "India (भारत)", + "id": "Indonesia", + "ir": "Iran (‫ایران‬‎)", + "iq": "Iraq (‫العراق‬‎)", + "ie": "Ireland", + "im": "Isle of Man", + "il": "Israel (‫ישראל‬‎)", + "it": "Italy (Italia)", + "jm": "Jamaica", + "jp": "Japan (日本)", + "je": "Jersey", + "jo": "Jordan (‫الأردن‬‎)", + "kz": "Kazakhstan (Казахстан)", + "ke": "Kenya", + "ki": "Kiribati", + "xk": "Kosovo", + "kw": "Kuwait (‫الكويت‬‎)", + "kg": "Kyrgyzstan (Кыргызстан)", + "la": "Laos (ລາວ)", + "lv": "Latvia (Latvija)", + "lb": "Lebanon (‫لبنان‬‎)", + "ls": "Lesotho", + "lr": "Liberia", + "ly": "Libya (‫ليبيا‬‎)", + "li": "Liechtenstein", + "lt": "Lithuania (Lietuva)", + "lu": "Luxembourg", + "mo": "Macau (澳門)", + "mk": "Macedonia (FYROM) (Македонија)", + "mg": "Madagascar (Madagasikara)", + "mw": "Malawi", + "my": "Malaysia", + "mv": "Maldives", + "ml": "Mali", + "mt": "Malta", + "mh": "Marshall Islands", + "mq": "Martinique", + "mr": "Mauritania (‫موريتانيا‬‎)", + "mu": "Mauritius (Moris)", + "yt": "Mayotte", + "mx": "Mexico (México)", + "fm": "Micronesia", + "md": "Moldova (Republica Moldova)", + "mc": "Monaco", + "mn": "Mongolia (Монгол)", + "me": "Montenegro (Crna Gora)", + "ms": "Montserrat", + "ma": "Morocco (‫المغرب‬‎)", + "mz": "Mozambique (Moçambique)", + "mm": "Myanmar (Burma) (မြန်မာ)", + "na": "Namibia (Namibië)", + "nr": "Nauru", + "np": "Nepal (नेपाल)", + "nl": "Netherlands (Nederland)", + "nc": "New Caledonia (Nouvelle-Calédonie)", + "nz": "New Zealand", + "ni": "Nicaragua", + "ne": "Niger (Nijar)", + "ng": "Nigeria", + "nu": "Niue", + "nf": "Norfolk Island", + "kp": "North Korea (조선 민주주의 인민 공화국)", + "mp": "Northern Mariana Islands", + "no": "Norway (Norge)", + "om": "Oman (‫عُمان‬‎)", + "pk": "Pakistan (‫پاکستان‬‎)", + "pw": "Palau", + "ps": "Palestine (‫فلسطين‬‎)", + "pa": "Panama (Panamá)", + "pg": "Papua New Guinea", + "py": "Paraguay", + "pe": "Peru (Perú)", + "ph": "Philippines", + "pl": "Poland (Polska)", + "pt": "Portugal", + "pr": "Puerto Rico", + "qa": "Qatar (‫قطر‬‎)", + "re": "Réunion (La Réunion)", + "ro": "Romania (România)", + "ru": "Russia (Россия)", + "rw": "Rwanda", + "bl": "Saint Barthélemy (Saint-Barthélemy)", + "sh": "Saint Helena", + "kn": "Saint Kitts and Nevis", + "lc": "Saint Lucia", + "mf": "Saint Martin (Saint-Martin (partie française))", + "pm": "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", + "vc": "Saint Vincent and the Grenadines", + "ws": "Samoa", + "sm": "San Marino", + "st": "São Tomé and Príncipe (São Tomé e Príncipe)", + "sa": "Saudi Arabia (‫المملكة العربية السعودية‬‎)", + "sn": "Senegal (Sénégal)", + "rs": "Serbia (Србија)", + "sc": "Seychelles", + "sl": "Sierra Leone", + "sg": "Singapore", + "sx": "Sint Maarten", + "sk": "Slovakia (Slovensko)", + "si": "Slovenia (Slovenija)", + "sb": "Solomon Islands", + "so": "Somalia (Soomaaliya)", + "za": "South Africa", + "kr": "South Korea (대한민국)", + "ss": "South Sudan (‫جنوب السودان‬‎)", + "es": "Spain (España)", + "lk": "Sri Lanka (ශ්‍රී ලංකාව)", + "sd": "Sudan (‫السودان‬‎)", + "sr": "Suriname", + "sj": "Svalbard and Jan Mayen", + "sz": "Swaziland", + "se": "Sweden (Sverige)", + "ch": "Switzerland (Schweiz)", + "sy": "Syria (‫سوريا‬‎)", + "tw": "Taiwan (台灣)", + "tj": "Tajikistan", + "tz": "Tanzania", + "th": "Thailand (ไทย)", + "tl": "Timor-Leste", + "tg": "Togo", + "tk": "Tokelau", + "to": "Tonga", + "tt": "Trinidad and Tobago", + "tn": "Tunisia (‫تونس‬‎)", + "tr": "Turkey (Türkiye)", + "tm": "Turkmenistan", + "tc": "Turks and Caicos Islands", + "tv": "Tuvalu", + "vi": "U.S. Virgin Islands", + "ug": "Uganda", + "ua": "Ukraine (Україна)", + "ae": "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", + "gb": "United Kingdom", + "us": "United States", + "uy": "Uruguay", + "uz": "Uzbekistan (Oʻzbekiston)", + "vu": "Vanuatu", + "va": "Vatican City (Città del Vaticano)", + "ve": "Venezuela", + "vn": "Vietnam (Việt Nam)", + "wf": "Wallis and Futuna", + "eh": "Western Sahara (‫الصحراء الغربية‬‎)", + "ye": "Yemen (‫اليمن‬‎)", + "zm": "Zambia", + "zw": "Zimbabwe", + "ax": "Åland Islands" + } +} diff --git a/projects/ngx-intl-tel-input/src/lib/data/index.ts b/projects/ngx-intl-tel-input/src/lib/data/index.ts new file mode 100644 index 00000000..cc598960 --- /dev/null +++ b/projects/ngx-intl-tel-input/src/lib/data/index.ts @@ -0,0 +1,3 @@ +export { CountryCode } from './country-code'; +export { defaultCountryTranslations } from './default-country-translations'; +export { translationPrefix } from './translation-prefix'; diff --git a/projects/ngx-intl-tel-input/src/lib/data/translation-prefix.ts b/projects/ngx-intl-tel-input/src/lib/data/translation-prefix.ts new file mode 100644 index 00000000..9e625c46 --- /dev/null +++ b/projects/ngx-intl-tel-input/src/lib/data/translation-prefix.ts @@ -0,0 +1 @@ +export const translationPrefix = "ngx-intl-tel-input-country"; diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html index 4188c761..11304171 100644 --- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html +++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html @@ -33,7 +33,7 @@
- {{country.name}} + {{translationPrefix + country.iso2 | translate }} +{{country.dialCode}}
  • - {{country.name}} + {{ translationPrefix + country.iso2 | translate }} +{{country.dialCode}}
    • diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts index e68bfbc9..adee536d 100644 --- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts +++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts @@ -16,13 +16,14 @@ import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms'; import { setTheme } from 'ngx-bootstrap/utils'; +import { ChangeData } from './interfaces/change-data'; +import { Country } from './model/country.model'; import { CountryCode } from './data/country-code'; import { CountryISO } from './enums/country-iso.enum'; +import { PhoneNumberFormat } from './enums/phone-number-format.enum'; import { SearchCountryField } from './enums/search-country-field.enum'; -import { ChangeData } from './interfaces/change-data'; -import { Country } from './model/country.model'; import { phoneNumberValidator } from './ngx-intl-tel-input.validator'; -import { PhoneNumberFormat } from './enums/phone-number-format.enum'; +import { translationPrefix } from './data'; @Component({ // tslint:disable-next-line: component-selector @@ -85,6 +86,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges { disabled = false; errors: Array = ['Phone number is required.']; countrySearchText = ''; + translationPrefix = `${translationPrefix}.`; @ViewChild('countryList') countryList: ElementRef; diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts index 35078cc5..58a8e440 100644 --- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts +++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts @@ -3,19 +3,37 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { CommonModule } from '@angular/common'; import { NgModule, ModuleWithProviders } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { HttpClient, HttpClientModule } from '@angular/common/http'; + +import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { NativeElementInjectorDirective } from './directives/native-element-injector.directive'; import { NgxIntlTelInputComponent } from './ngx-intl-tel-input.component'; +import { CustomMissingTranslationHandler } from './custom-missing-translation-handler.class'; +import { createTranslateLoader } from './create-translate-loader.function'; export const dropdownModuleForRoot: ModuleWithProviders = BsDropdownModule.forRoot(); + @NgModule({ declarations: [NgxIntlTelInputComponent, NativeElementInjectorDirective], imports: [ CommonModule, FormsModule, ReactiveFormsModule, + HttpClientModule, dropdownModuleForRoot, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: (createTranslateLoader), + deps: [HttpClient], + }, + missingTranslationHandler: { + provide: MissingTranslationHandler, + useClass: CustomMissingTranslationHandler, + }, + }), ], exports: [NgxIntlTelInputComponent, NativeElementInjectorDirective], })