UNPKG

intl-tel-input

Version:

A JavaScript plugin for entering and validating international telephone numbers

2,301 lines 68.9 kB
import { mergeModels as S, useModel as E, ref as L, onMounted as M, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as z, openBlock as V, mergeProps as $, vModelText as O } from "vue"; const j = [ [ "af", // Afghanistan "93" ], [ "ax", // Åland Islands "358", 1 ], [ "al", // Albania "355" ], [ "dz", // Algeria "213" ], [ "as", // American Samoa "1", 5, ["684"] ], [ "ad", // Andorra "376" ], [ "ao", // Angola "244" ], [ "ai", // Anguilla "1", 6, ["264"] ], [ "ag", // Antigua and Barbuda "1", 7, ["268"] ], [ "ar", // Argentina "54" ], [ "am", // Armenia "374" ], [ "aw", // Aruba "297" ], [ "ac", // Ascension Island "247" ], [ "au", // Australia "61", 0, null, "0" ], [ "at", // Austria "43" ], [ "az", // Azerbaijan "994" ], [ "bs", // Bahamas "1", 8, ["242"] ], [ "bh", // Bahrain "973" ], [ "bd", // Bangladesh "880" ], [ "bb", // Barbados "1", 9, ["246"] ], [ "by", // Belarus "375" ], [ "be", // Belgium "32" ], [ "bz", // Belize "501" ], [ "bj", // Benin "229" ], [ "bm", // Bermuda "1", 10, ["441"] ], [ "bt", // Bhutan "975" ], [ "bo", // Bolivia "591" ], [ "ba", // Bosnia and Herzegovina "387" ], [ "bw", // Botswana "267" ], [ "br", // Brazil "55" ], [ "io", // British Indian Ocean Territory "246" ], [ "vg", // British Virgin Islands "1", 11, ["284"] ], [ "bn", // Brunei "673" ], [ "bg", // Bulgaria "359" ], [ "bf", // Burkina Faso "226" ], [ "bi", // Burundi "257" ], [ "kh", // Cambodia "855" ], [ "cm", // Cameroon "237" ], [ "ca", // Canada "1", 1, ["204", "226", "236", "249", "250", "263", "289", "306", "343", "354", "365", "367", "368", "382", "387", "403", "416", "418", "428", "431", "437", "438", "450", "584", "468", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "683", "705", "709", "742", "753", "778", "780", "782", "807", "819", "825", "867", "873", "879", "902", "905"] ], [ "cv", // Cape Verde "238" ], [ "bq", // Caribbean Netherlands "599", 1, ["3", "4", "7"] ], [ "ky", // Cayman Islands "1", 12, ["345"] ], [ "cf", // Central African Republic "236" ], [ "td", // Chad "235" ], [ "cl", // Chile "56" ], [ "cn", // China "86" ], [ "cx", // Christmas Island "61", 2, ["89164"], "0" ], [ "cc", // Cocos (Keeling) Islands "61", 1, ["89162"], "0" ], [ "co", // Colombia "57" ], [ "km", // Comoros "269" ], [ "cg", // Congo (Brazzaville) "242" ], [ "cd", // Congo (Kinshasa) "243" ], [ "ck", // Cook Islands "682" ], [ "cr", // Costa Rica "506" ], [ "ci", // Côte d'Ivoire "225" ], [ "hr", // Croatia "385" ], [ "cu", // Cuba "53" ], [ "cw", // Curaçao "599", 0 ], [ "cy", // Cyprus "357" ], [ "cz", // Czech Republic "420" ], [ "dk", // Denmark "45" ], [ "dj", // Djibouti "253" ], [ "dm", // Dominica "1", 13, ["767"] ], [ "do", // Dominican Republic "1", 2, ["809", "829", "849"] ], [ "ec", // Ecuador "593" ], [ "eg", // Egypt "20" ], [ "sv", // El Salvador "503" ], [ "gq", // Equatorial Guinea "240" ], [ "er", // Eritrea "291" ], [ "ee", // Estonia "372" ], [ "sz", // Eswatini "268" ], [ "et", // Ethiopia "251" ], [ "fk", // Falkland Islands (Malvinas) "500" ], [ "fo", // Faroe Islands "298" ], [ "fj", // Fiji "679" ], [ "fi", // Finland "358", 0 ], [ "fr", // France "33" ], [ "gf", // French Guiana "594" ], [ "pf", // French Polynesia "689" ], [ "ga", // Gabon "241" ], [ "gm", // Gambia "220" ], [ "ge", // Georgia "995" ], [ "de", // Germany "49" ], [ "gh", // Ghana "233" ], [ "gi", // Gibraltar "350" ], [ "gr", // Greece "30" ], [ "gl", // Greenland "299" ], [ "gd", // Grenada "1", 14, ["473"] ], [ "gp", // Guadeloupe "590", 0 ], [ "gu", // Guam "1", 15, ["671"] ], [ "gt", // Guatemala "502" ], [ "gg", // Guernsey "44", 1, ["1481", "7781", "7839", "7911"], "0" ], [ "gn", // Guinea "224" ], [ "gw", // Guinea-Bissau "245" ], [ "gy", // Guyana "592" ], [ "ht", // Haiti "509" ], [ "hn", // Honduras "504" ], [ "hk", // Hong Kong SAR China "852" ], [ "hu", // Hungary "36" ], [ "is", // Iceland "354" ], [ "in", // India "91" ], [ "id", // Indonesia "62" ], [ "ir", // Iran "98" ], [ "iq", // Iraq "964" ], [ "ie", // Ireland "353" ], [ "im", // Isle of Man "44", 2, ["1624", "74576", "7524", "7924", "7624"], "0" ], [ "il", // Israel "972" ], [ "it", // Italy "39", 0 ], [ "jm", // Jamaica "1", 4, ["876", "658"] ], [ "jp", // Japan "81" ], [ "je", // Jersey "44", 3, ["1534", "7509", "7700", "7797", "7829", "7937"], "0" ], [ "jo", // Jordan "962" ], [ "kz", // Kazakhstan "7", 1, ["33", "7"], "8" ], [ "ke", // Kenya "254" ], [ "ki", // Kiribati "686" ], [ "xk", // Kosovo "383" ], [ "kw", // Kuwait "965" ], [ "kg", // Kyrgyzstan "996" ], [ "la", // Laos "856" ], [ "lv", // Latvia "371" ], [ "lb", // Lebanon "961" ], [ "ls", // Lesotho "266" ], [ "lr", // Liberia "231" ], [ "ly", // Libya "218" ], [ "li", // Liechtenstein "423" ], [ "lt", // Lithuania "370" ], [ "lu", // Luxembourg "352" ], [ "mo", // Macao SAR China "853" ], [ "mg", // Madagascar "261" ], [ "mw", // Malawi "265" ], [ "my", // Malaysia "60" ], [ "mv", // Maldives "960" ], [ "ml", // Mali "223" ], [ "mt", // Malta "356" ], [ "mh", // Marshall Islands "692" ], [ "mq", // Martinique "596" ], [ "mr", // Mauritania "222" ], [ "mu", // Mauritius "230" ], [ "yt", // Mayotte "262", 1, ["269", "639"], "0" ], [ "mx", // Mexico "52" ], [ "fm", // Micronesia "691" ], [ "md", // Moldova "373" ], [ "mc", // Monaco "377" ], [ "mn", // Mongolia "976" ], [ "me", // Montenegro "382" ], [ "ms", // Montserrat "1", 16, ["664"] ], [ "ma", // Morocco "212", 0, null, "0" ], [ "mz", // Mozambique "258" ], [ "mm", // Myanmar (Burma) "95" ], [ "na", // Namibia "264" ], [ "nr", // Nauru "674" ], [ "np", // Nepal "977" ], [ "nl", // Netherlands "31" ], [ "nc", // New Caledonia "687" ], [ "nz", // New Zealand "64" ], [ "ni", // Nicaragua "505" ], [ "ne", // Niger "227" ], [ "ng", // Nigeria "234" ], [ "nu", // Niue "683" ], [ "nf", // Norfolk Island "672" ], [ "kp", // North Korea "850" ], [ "mk", // North Macedonia "389" ], [ "mp", // Northern Mariana Islands "1", 17, ["670"] ], [ "no", // Norway "47", 0 ], [ "om", // Oman "968" ], [ "pk", // Pakistan "92" ], [ "pw", // Palau "680" ], [ "ps", // Palestinian Territories "970" ], [ "pa", // Panama "507" ], [ "pg", // Papua New Guinea "675" ], [ "py", // Paraguay "595" ], [ "pe", // Peru "51" ], [ "ph", // Philippines "63" ], [ "pl", // Poland "48" ], [ "pt", // Portugal "351" ], [ "pr", // Puerto Rico "1", 3, ["787", "939"] ], [ "qa", // Qatar "974" ], [ "re", // Réunion "262", 0, null, "0" ], [ "ro", // Romania "40" ], [ "ru", // Russia "7", 0, null, "8" ], [ "rw", // Rwanda "250" ], [ "ws", // Samoa "685" ], [ "sm", // San Marino "378" ], [ "st", // São Tomé & Príncipe "239" ], [ "sa", // Saudi Arabia "966" ], [ "sn", // Senegal "221" ], [ "rs", // Serbia "381" ], [ "sc", // Seychelles "248" ], [ "sl", // Sierra Leone "232" ], [ "sg", // Singapore "65" ], [ "sx", // Sint Maarten "1", 21, ["721"] ], [ "sk", // Slovakia "421" ], [ "si", // Slovenia "386" ], [ "sb", // Solomon Islands "677" ], [ "so", // Somalia "252" ], [ "za", // South Africa "27" ], [ "kr", // South Korea "82" ], [ "ss", // South Sudan "211" ], [ "es", // Spain "34" ], [ "lk", // Sri Lanka "94" ], [ "bl", // St. Barthélemy "590", 1 ], [ "sh", // St. Helena "290" ], [ "kn", // St. Kitts & Nevis "1", 18, ["869"] ], [ "lc", // St. Lucia "1", 19, ["758"] ], [ "mf", // St. Martin "590", 2 ], [ "pm", // St. Pierre & Miquelon "508" ], [ "vc", // St. Vincent & Grenadines "1", 20, ["784"] ], [ "sd", // Sudan "249" ], [ "sr", // Suriname "597" ], [ "sj", // Svalbard & Jan Mayen "47", 1, ["79"] ], [ "se", // Sweden "46" ], [ "ch", // Switzerland "41" ], [ "sy", // Syria "963" ], [ "tw", // Taiwan "886" ], [ "tj", // Tajikistan "992" ], [ "tz", // Tanzania "255" ], [ "th", // Thailand "66" ], [ "tl", // Timor-Leste "670" ], [ "tg", // Togo "228" ], [ "tk", // Tokelau "690" ], [ "to", // Tonga "676" ], [ "tt", // Trinidad & Tobago "1", 22, ["868"] ], [ "tn", // Tunisia "216" ], [ "tr", // Turkey "90" ], [ "tm", // Turkmenistan "993" ], [ "tc", // Turks & Caicos Islands "1", 23, ["649"] ], [ "tv", // Tuvalu "688" ], [ "vi", // U.S. Virgin Islands "1", 24, ["340"] ], [ "ug", // Uganda "256" ], [ "ua", // Ukraine "380" ], [ "ae", // United Arab Emirates "971" ], [ "gb", // United Kingdom "44", 0, null, "0" ], [ "us", // United States "1", 0 ], [ "uy", // Uruguay "598" ], [ "uz", // Uzbekistan "998" ], [ "vu", // Vanuatu "678" ], [ "va", // Vatican City "39", 1, ["06698"] ], [ "ve", // Venezuela "58" ], [ "vn", // Vietnam "84" ], [ "wf", // Wallis & Futuna "681" ], [ "eh", // Western Sahara "212", 1, ["5288", "5289"], "0" ], [ "ye", // Yemen "967" ], [ "zm", // Zambia "260" ], [ "zw", // Zimbabwe "263" ] ], _ = []; for (const r of j) _.push({ name: "", // populated in the plugin iso2: r[0], dialCode: r[1], priority: r[2] || 0, areaCodes: r[3] || null, nodeById: {}, // populated by the plugin nationalPrefix: r[4] || null }); const U = { ad: "Andorra", ae: "United Arab Emirates", af: "Afghanistan", ag: "Antigua & Barbuda", ai: "Anguilla", al: "Albania", am: "Armenia", ao: "Angola", ar: "Argentina", as: "American Samoa", at: "Austria", au: "Australia", aw: "Aruba", ax: "Åland Islands", az: "Azerbaijan", ba: "Bosnia & Herzegovina", bb: "Barbados", bd: "Bangladesh", be: "Belgium", bf: "Burkina Faso", bg: "Bulgaria", bh: "Bahrain", bi: "Burundi", bj: "Benin", bl: "St. Barthélemy", bm: "Bermuda", bn: "Brunei", bo: "Bolivia", bq: "Caribbean Netherlands", br: "Brazil", bs: "Bahamas", bt: "Bhutan", bw: "Botswana", by: "Belarus", bz: "Belize", ca: "Canada", cc: "Cocos (Keeling) Islands", cd: "Congo - Kinshasa", cf: "Central African Republic", cg: "Congo - Brazzaville", ch: "Switzerland", ci: "Côte d’Ivoire", ck: "Cook Islands", cl: "Chile", cm: "Cameroon", cn: "China", co: "Colombia", cr: "Costa Rica", cu: "Cuba", cv: "Cape Verde", cw: "Curaçao", cx: "Christmas Island", cy: "Cyprus", cz: "Czechia", de: "Germany", dj: "Djibouti", dk: "Denmark", dm: "Dominica", do: "Dominican Republic", dz: "Algeria", ec: "Ecuador", ee: "Estonia", eg: "Egypt", eh: "Western Sahara", er: "Eritrea", es: "Spain", et: "Ethiopia", fi: "Finland", fj: "Fiji", fk: "Falkland Islands", fm: "Micronesia", fo: "Faroe Islands", fr: "France", ga: "Gabon", gb: "United Kingdom", gd: "Grenada", ge: "Georgia", gf: "French Guiana", gg: "Guernsey", gh: "Ghana", gi: "Gibraltar", gl: "Greenland", gm: "Gambia", gn: "Guinea", gp: "Guadeloupe", gq: "Equatorial Guinea", gr: "Greece", gt: "Guatemala", gu: "Guam", gw: "Guinea-Bissau", gy: "Guyana", hk: "Hong Kong SAR China", hn: "Honduras", hr: "Croatia", ht: "Haiti", hu: "Hungary", id: "Indonesia", ie: "Ireland", il: "Israel", im: "Isle of Man", in: "India", io: "British Indian Ocean Territory", iq: "Iraq", ir: "Iran", is: "Iceland", it: "Italy", je: "Jersey", jm: "Jamaica", jo: "Jordan", jp: "Japan", ke: "Kenya", kg: "Kyrgyzstan", kh: "Cambodia", ki: "Kiribati", km: "Comoros", kn: "St. Kitts & Nevis", kp: "North Korea", kr: "South Korea", kw: "Kuwait", ky: "Cayman Islands", kz: "Kazakhstan", la: "Laos", lb: "Lebanon", lc: "St. Lucia", li: "Liechtenstein", lk: "Sri Lanka", lr: "Liberia", ls: "Lesotho", lt: "Lithuania", lu: "Luxembourg", lv: "Latvia", ly: "Libya", ma: "Morocco", mc: "Monaco", md: "Moldova", me: "Montenegro", mf: "St. Martin", mg: "Madagascar", mh: "Marshall Islands", mk: "North Macedonia", ml: "Mali", mm: "Myanmar (Burma)", mn: "Mongolia", mo: "Macao SAR China", mp: "Northern Mariana Islands", mq: "Martinique", mr: "Mauritania", ms: "Montserrat", mt: "Malta", mu: "Mauritius", mv: "Maldives", mw: "Malawi", mx: "Mexico", my: "Malaysia", mz: "Mozambique", na: "Namibia", nc: "New Caledonia", ne: "Niger", nf: "Norfolk Island", ng: "Nigeria", ni: "Nicaragua", nl: "Netherlands", no: "Norway", np: "Nepal", nr: "Nauru", nu: "Niue", nz: "New Zealand", om: "Oman", pa: "Panama", pe: "Peru", pf: "French Polynesia", pg: "Papua New Guinea", ph: "Philippines", pk: "Pakistan", pl: "Poland", pm: "St. Pierre & Miquelon", pr: "Puerto Rico", ps: "Palestinian Territories", pt: "Portugal", pw: "Palau", py: "Paraguay", qa: "Qatar", re: "Réunion", ro: "Romania", rs: "Serbia", ru: "Russia", rw: "Rwanda", sa: "Saudi Arabia", sb: "Solomon Islands", sc: "Seychelles", sd: "Sudan", se: "Sweden", sg: "Singapore", sh: "St. Helena", si: "Slovenia", sj: "Svalbard & Jan Mayen", sk: "Slovakia", sl: "Sierra Leone", sm: "San Marino", sn: "Senegal", so: "Somalia", sr: "Suriname", ss: "South Sudan", st: "São Tomé & Príncipe", sv: "El Salvador", sx: "Sint Maarten", sy: "Syria", sz: "Eswatini", tc: "Turks & Caicos Islands", td: "Chad", tg: "Togo", th: "Thailand", tj: "Tajikistan", tk: "Tokelau", tl: "Timor-Leste", tm: "Turkmenistan", tn: "Tunisia", to: "Tonga", tr: "Turkey", tt: "Trinidad & Tobago", tv: "Tuvalu", tw: "Taiwan", tz: "Tanzania", ua: "Ukraine", ug: "Uganda", us: "United States", uy: "Uruguay", uz: "Uzbekistan", va: "Vatican City", vc: "St. Vincent & Grenadines", ve: "Venezuela", vg: "British Virgin Islands", vi: "U.S. Virgin Islands", vn: "Vietnam", vu: "Vanuatu", wf: "Wallis & Futuna", ws: "Samoa", ye: "Yemen", yt: "Mayotte", za: "South Africa", zm: "Zambia", zw: "Zimbabwe" }, H = { selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})", noCountrySelected: "Select country", countryListAriaLabel: "List of countries", searchPlaceholder: "Search", clearSearchAriaLabel: "Clear search", zeroSearchResults: "No results found", oneSearchResult: "1 result found", multipleSearchResults: "${count} results found", // additional countries (not supported by country-list library) ac: "Ascension Island", xk: "Kosovo" }, k = { ...U, ...H }, N = (r) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(r).matches, K = () => { if (typeof navigator < "u" && typeof window < "u") { const r = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = N("(max-width: 500px)"), e = N("(max-height: 600px)"), i = N("(pointer: coarse)"); return r || t || i && e; } return !1; }, P = { // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers allowPhonewords: !1, //* Whether or not to allow the dropdown. allowDropdown: !0, //* Add a placeholder in the input with an example number for the selected country. autoPlaceholder: "polite", //* Modify the parentClass. containerClass: "", //* The order of the countries in the dropdown. Defaults to alphabetical. countryOrder: null, //* Add a country search input at the top of the dropdown. countrySearch: !0, //* Modify the auto placeholder. customPlaceholder: null, //* Append menu to specified element. dropdownContainer: null, //* Don't display these countries. excludeCountries: [], //* Fix the dropdown width to the input width (rather than being as wide as the longest country name). fixDropdownWidth: !0, //* Format the number as the user types formatAsYouType: !0, //* Format the input value during initialisation and on setNumber. formatOnDisplay: !0, //* geoIp lookup function. geoIpLookup: null, //* Inject a hidden input with the name returned from this function, and on submit, populate it with the result of getNumber. hiddenInput: null, //* Internationalise the plugin text e.g. search input placeholder, country names. i18n: {}, //* Initial country. initialCountry: "", //* A function to load the utils script. loadUtils: null, //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers. nationalMode: !0, //* Display only these countries. onlyCountries: [], //* Number type to use for placeholders. placeholderNumberType: "MOBILE", //* Show flags - for both the selected country, and in the country dropdown showFlags: !0, //* Display the international dial code next to the selected flag. separateDialCode: !1, //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length. strictMode: !1, //* Use full screen popup instead of dropdown for country list. useFullscreenPopup: K(), //* The number type to enforce during validation. validationNumberTypes: ["MOBILE"] }; function W(r) { r.useFullscreenPopup && (r.fixDropdownWidth = !1), r.onlyCountries.length === 1 && (r.initialCountry = r.onlyCountries[0]), r.separateDialCode && (r.nationalMode = !1), r.allowDropdown && !r.showFlags && !r.separateDialCode && (r.nationalMode = !1), r.useFullscreenPopup && !r.dropdownContainer && (r.dropdownContainer = document.body), r.i18n = { ...k, ...r.i18n }; } const I = (r) => r.replace(/\D/g, ""), x = (r = "") => r.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), m = (r, t, e) => { const i = document.createElement(r); return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i; }; function G(r) { const { onlyCountries: t, excludeCountries: e } = r; if (t.length) { const i = t.map((s) => s.toLowerCase()); return _.filter((s) => i.includes(s.iso2)); } else if (e.length) { const i = e.map((s) => s.toLowerCase()); return _.filter((s) => !i.includes(s.iso2)); } return _; } function q(r, t) { for (const e of r) { const i = e.iso2.toLowerCase(); t.i18n[i] && (e.name = t.i18n[i]); } } function Y(r, t) { const e = /* @__PURE__ */ new Set(); let i = 0; const s = {}, n = (o, a, d) => { if (!o || !a) return; a.length > i && (i = a.length), s.hasOwnProperty(a) || (s[a] = []); const l = s[a]; if (l.includes(o)) return; const h = d !== void 0 ? d : l.length; l[h] = o; }; for (const o of r) e.has(o.dialCode) || e.add(o.dialCode), n(o.iso2, o.dialCode, o.priority); (t.onlyCountries.length || t.excludeCountries.length) && e.forEach((o) => { s[o] = s[o].filter(Boolean); }); for (const o of r) if (o.areaCodes) { const a = s[o.dialCode][0]; for (const d of o.areaCodes) { for (let l = 1; l < d.length; l++) { const h = d.substring(0, l), p = o.dialCode + h; n(a, p), n(o.iso2, p); } n(o.iso2, o.dialCode + d); } } return { dialCodes: e, dialCodeMaxLen: i, dialCodeToIso2Map: s }; } function J(r, t) { t.countryOrder && (t.countryOrder = t.countryOrder.map((e) => e.toLowerCase())), r.sort((e, i) => { const { countryOrder: s } = t; if (s) { const n = s.indexOf(e.iso2), o = s.indexOf(i.iso2), a = n > -1, d = o > -1; if (a || d) return a && d ? n - o : a ? -1 : 1; } return e.name.localeCompare(i.name); }); } function Z(r) { for (const t of r) t.normalisedName = x(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`; } function Q(r, t, e, i) { let s = r; if (e && t) { t = `+${i.dialCode}`; const n = s[t.length] === " " || s[t.length] === "-" ? t.length + 1 : t.length; s = s.substring(n); } return s; } function X(r, t, e, i, s) { const n = e ? e.formatNumberAsYouType(r, i.iso2) : r, { dialCode: o } = i; return s && t.charAt(0) !== "+" && n.includes(`+${o}`) ? (n.split(`+${o}`)[1] || "").trim() : n; } function tt(r, t, e, i) { if (e === 0 && !i) return 0; let s = 0; for (let n = 0; n < t.length; n++) { if (/[+0-9]/.test(t[n]) && s++, s === r && !i) return n + 1; if (i && s === r + 1) return n; } return t.length; } const et = [ "800", "822", "833", "844", "855", "866", "877", "880", "881", "882", "883", "884", "885", "886", "887", "888", "889" ], A = (r) => { const t = I(r); if (t.charAt(0) === "1") { const e = t.substring(1, 4); return et.includes(e); } return !1; }; for (const r of _) r.name = k[r.iso2]; let it = 0; const st = new Set(_.map((r) => r.iso2)), D = (r) => st.has(r), w = (r, ...t) => { const { instances: e } = u; Object.values(e).forEach((i) => i[r](...t)); }; class v { /** * Build a space-delimited class string from an object map of className -> truthy/falsey. * Only keys with truthy values are included. */ static _buildClassNames(t) { return Object.keys(t).filter((e) => !!t[e]).join(" "); } constructor(t, e = {}) { this.id = it++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, P, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder"); } _detectEnvironmentAndLayout() { this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]"), this.telInput.dir = "ltr"; const t = this.options.allowDropdown || this.options.separateDialCode; this.showSelectedCountryOnLeft = this.isRTL ? !t : t, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft); } _createInitPromises() { const t = new Promise((i, s) => { this.resolveAutoCountryPromise = i, this.rejectAutoCountryPromise = s; }), e = new Promise((i, s) => { this.resolveUtilsScriptPromise = i, this.rejectUtilsScriptPromise = s; }); this.promise = Promise.all([t, e]); } //* Can't be private as it's called from intlTelInput convenience wrapper. _init() { W(this.options), this._detectEnvironmentAndLayout(), this._createInitPromises(), this.selectedCountryData = {}, this._processCountryData(), this._generateMarkup(), this._setInitialState(), this._initListeners(), this._initRequests(); } //******************** //* PRIVATE METHODS //******************** //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options. _processCountryData() { this.countries = G(this.options); const t = Y(this.countries, this.options); this.dialCodes = t.dialCodes, this.dialCodeMaxLen = t.dialCodeMaxLen, this.dialCodeToIso2Map = t.dialCodeToIso2Map, q(this.countries, this.options), J(this.countries, this.options), this.countryByIso2 = new Map(this.countries.map((e) => [e.iso2, e])), Z(this.countries); } //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown. _generateMarkup() { this._prepareTelInput(); const t = this._createWrapperAndInsert(); this._maybeBuildCountryContainer(t), t.appendChild(this.telInput), this._maybeUpdateInputPaddingAndReveal(), this._maybeBuildHiddenInputs(t); } _prepareTelInput() { this.telInput.classList.add("iti__tel-input"), !this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete")) && this.telInput.setAttribute("autocomplete", "off"); } _createWrapperAndInsert() { var a; const { allowDropdown: t, showFlags: e, containerClass: i, useFullscreenPopup: s } = this.options, n = v._buildClassNames({ iti: !0, "iti--allow-dropdown": t, "iti--show-flags": e, "iti--inline-dropdown": !s, [i]: !!i }), o = m("div", { class: n }); return (a = this.telInput.parentNode) == null || a.insertBefore(o, this.telInput), o; } _maybeBuildCountryContainer(t) { const { allowDropdown: e, separateDialCode: i, showFlags: s } = this.options; if (e || s || i) { this.countryContainer = m( "div", // visibly hidden until we measure it's width to set the input padding correctly { class: "iti__country-container iti__v-hide" }, t ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", e ? (this.selectedCountry = m( "button", { type: "button", class: "iti__selected-country", "aria-expanded": "false", "aria-label": this.options.i18n.noCountrySelected, "aria-haspopup": "dialog", "aria-controls": `iti-${this.id}__dropdown-content` }, this.countryContainer ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m( "div", { class: "iti__selected-country" }, this.countryContainer ); const n = m( "div", { class: "iti__selected-country-primary" }, this.selectedCountry ); this.selectedCountryInner = m( "div", { class: "iti__flag" }, n ), e && (this.dropdownArrow = m( "div", { class: "iti__arrow", "aria-hidden": "true" }, n )), i && (this.selectedDialCode = m( "div", { class: "iti__selected-dial-code", dir: "ltr" }, this.selectedCountry )), e && this._buildDropdownContent(); } } _buildDropdownContent() { const { fixDropdownWidth: t, useFullscreenPopup: e, countrySearch: i, i18n: s, dropdownContainer: n, containerClass: o } = this.options, a = t ? "" : "iti--flexible-dropdown-width"; if (this.dropdownContent = m("div", { id: `iti-${this.id}__dropdown-content`, class: `iti__dropdown-content iti__hide ${a}`, role: "dialog", "aria-modal": "true" }), i && this._buildSearchUI(), this.countryList = m( "ul", { class: "iti__country-list", id: `iti-${this.id}__country-listbox`, role: "listbox", "aria-label": s.countryListAriaLabel }, this.dropdownContent ), this._appendListItems(), i && this._updateSearchResultsA11yText(), n) { const d = v._buildClassNames({ iti: !0, "iti--container": !0, "iti--fullscreen-popup": e, "iti--inline-dropdown": !e, [o]: !!o }); this.dropdown = m("div", { class: d }), this.dropdown.appendChild(this.dropdownContent); } else this.countryContainer.appendChild(this.dropdownContent); } _buildSearchUI() { const { i18n: t } = this.options, e = m( "div", { class: "iti__search-input-wrapper" }, this.dropdownContent ); this.searchIcon = m( "span", { class: "iti__search-icon", "aria-hidden": "true" }, e ), this.searchIcon.innerHTML = ` <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true"> <circle cx="11" cy="11" r="7" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg>`, this.searchInput = m( "input", { id: `iti-${this.id}__search-input`, // Chrome says inputs need either a name or an id type: "search", class: "iti__search-input", placeholder: t.searchPlaceholder, // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys role: "combobox", "aria-expanded": "true", "aria-label": t.searchPlaceholder, "aria-controls": `iti-${this.id}__country-listbox`, "aria-autocomplete": "list", autocomplete: "off" }, e ), this.searchClearButton = m( "button", { type: "button", class: "iti__search-clear iti__hide", "aria-label": t.clearSearchAriaLabel, tabindex: "-1" }, e ); const i = `iti-${this.id}-clear-mask`; this.searchClearButton.innerHTML = ` <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false"> <mask id="${i}" maskUnits="userSpaceOnUse"> <rect width="16" height="16" fill="white" /> <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" /> </mask> <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${i})" /> </svg>`, this.searchResultsA11yText = m( "span", { class: "iti__a11y-text" }, this.dropdownContent ), this.searchNoResults = m( "div", { class: "iti__no-results iti__hide", "aria-hidden": "true" // all a11y messaging happens in this.searchResultsA11yText }, this.dropdownContent ), this.searchNoResults.textContent = t.zeroSearchResults; } _maybeUpdateInputPaddingAndReveal() { this.countryContainer && (this._updateInputPadding(), this.countryContainer.classList.remove("iti__v-hide")); } _maybeBuildHiddenInputs(t) { var i, s; const { hiddenInput: e } = this.options; if (e) { const n = this.telInput.getAttribute("name") || "", o = e(n); if (o.phone) { const a = (i = this.telInput.form) == null ? void 0 : i.querySelector(`input[name="${o.phone}"]`); a ? this.hiddenInput = a : (this.hiddenInput = m("input", { type: "hidden", name: o.phone }), t.appendChild(this.hiddenInput)); } if (o.country) { const a = (s = this.telInput.form) == null ? void 0 : s.querySelector(`input[name="${o.country}"]`); a ? this.hiddenInputCountry = a : (this.hiddenInputCountry = m("input", { type: "hidden", name: o.country }), t.appendChild(this.hiddenInputCountry)); } } } //* For each country: add a country list item <li> to the countryList <ul> container. _appendListItems() { for (let t = 0; t < this.countries.length; t++) { const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m( "li", { id: `iti-${this.id}__item-${e.iso2}`, class: `iti__country ${i}`, tabindex: "-1", role: "option", "data-dial-code": e.dialCode, "data-country-code": e.iso2, "aria-selected": "false" }, this.countryList ); e.nodeById[this.id] = s; let n = ""; this.options.showFlags && (n += `<div class='iti__flag iti__${e.iso2}'></div>`), n += `<span class='iti__country-name'>${e.name}</span>`, n += `<span class='iti__dial-code' dir='ltr'>+${e.dialCode}</span>`, s.insertAdjacentHTML("beforeend", n); } } //* Set the initial state of the input value and the selected country by: //* 1. Extracting a dial code from the given number //* 2. Using explicit initialCountry _setInitialState(t = !1) { const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i, o = this._getDialCode(n), a = A(n), { initialCountry: d, geoIpLookup: l } = this.options, h = d === "auto" && l; if (o && !a) this._updateCountryFromNumber(n); else if (!h || t) { const p = d ? d.toLowerCase() : ""; D(p) ? this._setCountry(p) : o && a ? this._setCountry("us") : this._setCountry(""); } n && this._updateValFromNumber(n); } //* Initialise the main event listeners: input keyup, and click selected country. _initListeners() { this._initTelInputListeners(), this.options.allowDropdown && this._initDropdownListeners(), (this.hiddenInput || this.hiddenInputCountry) && this.telInput.form && this._initHiddenInputListener(); } //* Update hidden input on form submit. _initHiddenInputListener() { var t; this._handleHiddenInputSubmit = () => { this.hiddenInput && (this.hiddenInput.value = this.getNumber()), this.hiddenInputCountry && (this.hiddenInputCountry.value = this.getSelectedCountryData().iso2 || ""); }, (t = this.telInput.form) == null || t.addEventListener( "submit", this._handleHiddenInputSubmit ); } //* initialise the dropdown listeners. _initDropdownListeners() { this._handleLabelClick = (e) => { this.dropdownContent.classList.contains("iti__hide") ? this.telInput.focus() : e.preventDefault(); }; const t = this.telInput.closest("label"); t && t.addEventListener("click", this._handleLabelClick), this._handleClickSelectedCountry = () => { this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly && this._openDropdown(); }, this.selectedCountry.addEventListener("click", this._handleClickSelectedCountry), this._handleCountryContainerKeydown = (e) => { this.dropdownContent.classList.contains("iti__hide") && ["ArrowUp", "ArrowDown", " ", "Enter"].includes(e.key) && (e.preventDefault(), e.stopPropagation(), this._openDropdown()), e.key === "Tab" && this._closeDropdown(); }, this.countryContainer.addEventListener( "keydown", this._handleCountryContainerKeydown ); } //* Init many requests: utils script / geo ip lookup. _initRequests() { let { loadUtils: t, initialCountry: e, geoIpLookup: i } = this.options; t && !u.utils ? (this._handlePageLoad = () => { var n; window.removeEventListener("load", this._handlePageLoad), (n = u.attachUtils(t)) == null || n.catch(() => { }); }, u.documentReady() ? this._handlePageLoad() : window.addEventListener("load", this._handlePageLoad)) : this.resolveUtilsScriptPromise(), e === "auto" && i && !this.selectedCountryData.iso2 ? this._loadAutoCountry() : this.resolveAutoCountryPromise(); } //* Perform the geo ip lookup. _loadAutoCountry() { u.autoCountry ? this.handleAutoCountry() : u.startedLoadingAutoCountry || (u.startedLoadingAutoCountry = !0, typeof this.options.geoIpLookup == "function" && this.options.geoIpLookup( (t = "") => { const e = t.toLowerCase(); D(e) ? (u.autoCountry = e, setTimeout(() => w("handleAutoCountry"))) : (this._setInitialState(!0), w("rejectAutoCountryPromise")); }, () => { this._setInitialState(!0), w("rejectAutoCountryPromise"); } )); } _openDropdownWithPlus() { this._openDropdown(), this.searchInput.value = "+", this._filterCountries(""); } //* Initialize the tel input listeners. _initTelInputListeners() { this._bindInputListener(), this._maybeBindKeydownListener(), this._maybeBindPasteListener(); } _bindInputListener() { const { strictMode: t, formatAsYouType: e, separateDialCode: i, allowDropdown: s, countrySearch: n } = this.options; let o = !1; new RegExp("\\p{L}", "u").test(this.telInput.value) && (o = !0), this._handleInputEvent = (a) => { if (this.isAndroid && (a == null ? void 0 : a.data) === "+" && i && s && n) { const p = this.telInput.selectionStart || 0, f = this.telInput.value.substring(0, p - 1), c = this.telInput.value.substring(p); this.telInput.value = f + c, this._openDropdownWithPlus(); return; } this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange(); const d = (a == null ? void 0 : a.data) && /[^+0-9]/.test(a.data), l = (a == null ? void 0 : a.inputType) === "insertFromPaste" && this.telInput.value; d || l && !t ? o = !0 : /[^+0-9]/.test(this.telInput.value) || (o = !1); const h = (a == null ? void 0 : a.detail) && a.detail.isSetNumber; if (e && !o && !h) { const p = this.telInput.selectionStart || 0, c = this.telInput.value.substring(0, p).replace(/[^+0-9]/g, "").length, C = (a == null ? void 0 : a.inputType) === "deleteContentForward", y = this._getFullNumber(), g = X( y, this.telInput.value, u.utils, this.selectedCountryData, this.options.separateDialCode ), b = tt(c, g, p, C); this.telInput.value = g, this.telInput.setSelectionRange(b, b); } }, this.telInput.addEventListener("input", this._handleInputEvent); } _maybeBindKeydownListener() { const { strictMode: t, separateDialCode: e, allowDropdown: i, countrySearch: s } = this.options; (t || e) && (this._handleKeydownEvent = (n) => { if (n.key && n.key.length === 1 && !n.altKey && !n.ctrlKey && !n.metaKey) { if (e && i && s && n.key === "+") { n.preventDefault(), this._openDropdownWithPlus(); return; } if (t) { const o = this.telInput.value, d = !(o.charAt(0) === "+") && this.telInput.selectionStart === 0 && n.key === "+", l = /^[0-9]$/.test(n.key), h = e ? l : d || l, p = o.slice(0, this.telInput.selectionStart) + n.key + o.slice(this.telInput.selectionEnd), f = this._getFullNumber(p), c = u.utils.getCoreNumber(f, this.selectedCountryData.iso2), C = this.maxCoreNumberLength && c.length > this.maxCoreNumberLength, g = this._getNewCountryFromNumber(f) !== null; (!h || C && !g && !d) && n.preventDefault(); } } }, this.telInput.addEventListener("keydown", this._handleKeydownEvent)); } _maybeBindPasteListener() { this.options.strictMode && (this._handlePasteEvent = (t) => { t.preventDefault(); const e = this.telInput, i = e.selectionStart, s = e.selectionEnd, n = e.value.slice(0, i), o = e.value.slice(s), a = this.selectedCountryData.iso2, d = t.clipboardData.getData("text"), l = i === 0 && s > 0, h = !e.value.startsWith("+") || l, p = d.replace(/[^0-9+]/g, ""), f = p.startsWith("+"), c = p.replace(/\+/g, ""), C = f && h ? `+${c}` : c; let y = n + C + o, g = u.utils.getCoreNumber(y, a); for (; g.length === 0 && y.length > 0; ) y = y.slice(0, -1), g = u.utils.getCoreNumber(y, a); if (!g) return; if (this.maxCoreNumberLength && g.length > this.maxCoreNumberLength) if (e.selectionEnd === e.value.length) { const T = g.length - this.maxCoreNumberLength; y = y.slice(0, y.length - T); } else return; e.value = y; const b = i + C.length; e.setSelectionRange(b, b), e.dispatchEvent(new InputEvent("input", { bubbles: !0 })); }, this.telInput.addEventListener("paste", this._handlePasteEvent)); } //* Adhere to the input's maxlength attr. _cap(t) { const e = parseInt(this.telInput.getAttribute("maxlength") || "", 10); return e && t.length > e ? t.substring(0, e) : t; } //* Trigger a custom event on the input. _trigger(t, e = {}) { const i = new CustomEvent(t, { bubbles: !0, cancelable: !0, detail: e }); this.telInput.dispatchEvent(i); } //* Open the dropdown. _openDropdown() { const { fixDropdownWidth: t, countrySearch: e } = this.options; if (t && (this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`), this.dropdownContent.classList.remove("iti__hide"), this.selectedCountry.setAttribute("aria-expanded", "true"), this._setDropdownPosition(), e) { const i = this.countryList.firstElementChild; i && (this._highlightListItem(i, !1), this.countryList.scrollTop = 0), this.searchInput.focus(); } this._bindDropdownListeners(), this.dropdownArrow.classList.add("iti__arrow--up"), this._trigger("open:countrydropdown"); } //* Set the dropdown position _setDropdownPosition() { if (this.options.dropdownContainer && this.options.dropdownContainer.appendChild(this.dropdown), !this.options.useFullscreenPopup) { const t = this.telInput.getBoundingClientRect(), e = this.telInput.offsetHeight; this.options.dropdownContainer && (this.dropdown.style.top = `${t.top + e}px`, this.dropdown.style.left = `${t.left}px`, this._handleWindowScroll = () => this._closeDropdown(), window.addEventListener("scroll", this._handleWindowScroll)); } } //* We only bind dropdown listeners when the dropdown is open. _bindDropdownListeners() { this._handleMouseoverCountryList = (i) => { var n; const s = (n = i.target) == null ? void 0 : n.closest(".iti__country"); s && this._highlightListItem(s, !1); }, this.countryList.addEventListener( "mouseover", this._handleMouseoverCountryList ), this._handleClickCountryList = (i) => { var n; const s = (n = i.target) == null ? void 0 : n.closest(".iti__country"); s && this._selectListItem(s); }, this.countryList.addEventListener("click", this._handleClickCountryList), this._handleClickOffToClose = (i) => { !!i.target.closest(`#iti-${this.id}__dropdown-content`) || this._closeDropdown(); }, setTimeout(() => { document.documentElement.addEventListener( "click", this._handleClickOffToClose ); }, 0); let t = "", e = null; if (this._handleKeydownOnDropdown = (i) => { ["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(i.key) && (i.preventDefault(), i.stopPropagation(), i.key === "ArrowUp" || i.key === "ArrowDown" ? this._handleUpDownKey(i.key) : i.key === "Enter" ? this._handleEnterKey() : i.key === "Escape" && this._closeDropdown()), !this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(i.key) && (i.stopPropagation(), e && clearTimeout(e), t += i.key.toLowerCase(), this._searchForCountry(t), e = setTimeout(() => { t = ""; }, 1e3)); }, document.addEventListener("keydown", this._handleKeydownOnDropdown), this.options.countrySearch) { const i = () => { const n = this.searchInput.value.trim(); this._filterCountries(n), this.searchInput.value ? this.searchClearButton.classList.remove("iti__hide") : this.searchClearButton.classList.add("iti__hide"); }; let s = null; this._handleSearchChange = () => { s && clearTimeout(s), s = setTimeout(() => { i(), s = null; }, 100); }, this.searchInput.addEventListener("input", this._handleSearchChange), this._handleSearchClear = () => { this.searchInput.value = "", this.searchInput.focus(), i(); }, this.searchClearButton.addEventListener("click", this._handleSearchClear); } } //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string. _searchForCountry(t) { for (const e of this.countries) if (e.name.substring(0, t.length).toLowerCase() === t) { const s = e.nodeById[this.id]; this._highlightListItem(s, !1), this._scrollTo(s); break; } } //* Country search enabled: Filter the countries according to the search query. _filterCountries(t) { this.countryList.innerHTML = ""; let e; t === "" ? e = this.countries : e = this._getMatchedCountries(t); let i = !0; for (const s of e) { const n = s.nodeById[this.id]; n && (this.countryList.appendChild(n), i && (this._highlightListItem(n, !1), i = !1)); } i ? (this._highlightListItem(null, !1), this.searchNoResults && this.searchNoResults.classList.remove("iti__hide")) : this.searchNoResults && this.searchNoResults.classList.add("iti__hide"), this.countryList.scrollTop = 0, this._updateSearchResultsA11yText(); } _getMatchedCountries(t) { const e = x(t), i = [], s = [], n = [], o = [], a = [], d = []; for (const l of this.countries) l.iso2 === e ? i.push(l) : l.normalisedName.startsWith(e) ? s.push(l) : l.normalisedName.includes(e) ? n.push(l) : e === l.dialCode || e === l.dialCodePlus ? o.push(l) : l.dialCodePlus.includes(e) ? a.push(l) : l.initials.includes(e) && d.push(l); return [ ...i.sort((l, h) => l.priority - h.priority), ...s.sort((l, h) => l.priority - h.priority), ...n.sort((l, h) => l.priority - h.priority), ...o.sort((l, h) => l.priority - h.priority), ...a.sort((l, h) => l.priority - h.priority), ...d.sort((l, h) => l.priority - h.priority) ]; } //* Update search results text (for a11y). _updateSearchResultsA11yText() { const { i18n: t } = this.options, e = this.countryList.childElementCount; let i; e === 0 ? i = t.zeroSearchResults : t.searchResultsText ? i = t.searchResultsText(e) : e === 1 ? i = t.oneSearchResult : i = t.multipleSearchResults.replace("${count}", e.toString()), this.searchResultsA11yText.textContent = i; } //* Highlight the next/prev item in the list (and ensure it is visible). _handleUpDownKey(t) { var i, s; let e = t === "ArrowUp" ? (i = this.highlightedItem) == null ? void 0 : i.previousElementSibling : (s = this.highlightedItem) == null ? void 0 : s.nextElementSibling; !e && this.countryList.childElementCount > 1 && (e = t === "ArrowUp" ? this.countryList.lastElementChild : this.countryList.firstElementChild), e && (this._scrollTo(e), this._highlightListItem(e, !1)); } //* Select the currently highlighted item. _handleEnterKey() { this.highlightedItem && this._selectListItem(this.highlightedItem); } //* Update the input's value to the given val (format first if possible) //* NOTE: this is called from _setInitialState, handleUtils and setNumber. _updateValFromNumber(t) { let e = t; if (this.options.formatOnDisplay && u.utils && this.selectedCountryData) { const i = this.options.nationalMode || e.charAt(0) !== "+" && !this.options.separateDialCode, { NATIONAL: s, INTERNATIONAL: n } = u.utils.numberFormat, o = i ? s : n; e = u.utils.formatNumber( e, this.selectedCountryData.iso2, o ); } e = this._beforeSetNumber(e), this.telInput.value = e; } //* Check if need to select a new country based on the given number //* Note: called from _