intl-tel-input 25.11.0 → 25.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/angular/README.md +1 -1
- package/angular/build/IntlTelInput.js +349 -200
- package/angular/build/IntlTelInputWithUtils.js +349 -200
- package/angular/build/types/intl-tel-input/data.d.ts +3 -3
- package/angular/build/types/intl-tel-input.d.ts +5 -1
- package/angular/build/types/modules/constants.d.ts +84 -0
- package/angular/build/types/modules/core/countrySearch.d.ts +17 -0
- package/angular/build/types/modules/core/icons.d.ts +7 -0
- package/angular/build/types/modules/core/options.d.ts +2 -1
- package/angular/build/types/modules/data/country-data.d.ts +5 -5
- package/angular/build/types/modules/format/caret.d.ts +1 -1
- package/angular/build/types/modules/format/formatting.d.ts +2 -2
- package/angular/build/types/modules/types/events.d.ts +5 -4
- package/build/js/data.js +8 -2
- package/build/js/data.min.js +2 -2
- package/build/js/intlTelInput.d.ts +137 -17
- package/build/js/intlTelInput.js +397 -226
- package/build/js/intlTelInput.min.js +13 -13
- package/build/js/intlTelInputWithUtils.js +397 -226
- package/build/js/intlTelInputWithUtils.min.js +13 -13
- package/package.json +2 -1
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +396 -225
- package/react/build/IntlTelInput.d.ts +137 -17
- package/react/build/IntlTelInput.js +396 -225
- package/react/build/IntlTelInputWithUtils.cjs +396 -225
- package/react/build/IntlTelInputWithUtils.js +396 -225
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +514 -390
- package/vue/build/IntlTelInputWithUtils.mjs +923 -799
|
@@ -1688,7 +1688,13 @@ for (const c of rawCountryData) {
|
|
|
1688
1688
|
areaCodes: c[3] || null,
|
|
1689
1689
|
nodeById: {},
|
|
1690
1690
|
// populated by the plugin
|
|
1691
|
-
nationalPrefix: c[4] || null
|
|
1691
|
+
nationalPrefix: c[4] || null,
|
|
1692
|
+
normalisedName: "",
|
|
1693
|
+
// populated in the plugin
|
|
1694
|
+
initials: "",
|
|
1695
|
+
// populated in the plugin
|
|
1696
|
+
dialCodePlus: ""
|
|
1697
|
+
// populated in the plugin
|
|
1692
1698
|
});
|
|
1693
1699
|
}
|
|
1694
1700
|
var data_default = allCountries;
|
|
@@ -1960,10 +1966,106 @@ var interface_default = interfaceTranslations;
|
|
|
1960
1966
|
var allTranslations = Object.assign(Object.assign({}, countries_default), interface_default);
|
|
1961
1967
|
var en_default = allTranslations;
|
|
1962
1968
|
|
|
1963
|
-
// angular/build/temp/modules/
|
|
1964
|
-
var
|
|
1965
|
-
|
|
1969
|
+
// angular/build/temp/modules/constants.js
|
|
1970
|
+
var EVENTS = {
|
|
1971
|
+
OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
|
|
1972
|
+
CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
|
|
1973
|
+
COUNTRY_CHANGE: "countrychange",
|
|
1974
|
+
INPUT: "input"
|
|
1975
|
+
// used for synthetic input trigger
|
|
1976
|
+
};
|
|
1977
|
+
var CLASSES = {
|
|
1978
|
+
HIDE: "iti__hide",
|
|
1979
|
+
V_HIDE: "iti__v-hide",
|
|
1980
|
+
ARROW_UP: "iti__arrow--up",
|
|
1981
|
+
GLOBE: "iti__globe",
|
|
1982
|
+
FLAG: "iti__flag",
|
|
1983
|
+
COUNTRY_ITEM: "iti__country",
|
|
1984
|
+
HIGHLIGHT: "iti__highlight"
|
|
1985
|
+
};
|
|
1986
|
+
var KEYS = {
|
|
1987
|
+
ARROW_UP: "ArrowUp",
|
|
1988
|
+
ARROW_DOWN: "ArrowDown",
|
|
1989
|
+
SPACE: " ",
|
|
1990
|
+
ENTER: "Enter",
|
|
1991
|
+
ESC: "Escape",
|
|
1992
|
+
TAB: "Tab"
|
|
1993
|
+
};
|
|
1994
|
+
var INPUT_TYPES = {
|
|
1995
|
+
PASTE: "insertFromPaste",
|
|
1996
|
+
DELETE_FWD: "deleteContentForward"
|
|
1997
|
+
};
|
|
1998
|
+
var REGEX = {
|
|
1999
|
+
ALPHA_UNICODE: /\p{L}/u,
|
|
2000
|
+
// any kind of letter from any language
|
|
2001
|
+
NON_PLUS_NUMERIC: /[^+0-9]/,
|
|
2002
|
+
// chars that are NOT + or digit
|
|
2003
|
+
NON_PLUS_NUMERIC_GLOBAL: /[^+0-9]/g,
|
|
2004
|
+
// chars that are NOT + or digit (global)
|
|
2005
|
+
HIDDEN_SEARCH_CHAR: /^[a-zA-ZÀ-ÿа-яА-Я ]$/
|
|
2006
|
+
// single acceptable hidden-search char
|
|
2007
|
+
};
|
|
2008
|
+
var TIMINGS = {
|
|
2009
|
+
SEARCH_DEBOUNCE_MS: 100,
|
|
2010
|
+
HIDDEN_SEARCH_RESET_MS: 1e3,
|
|
2011
|
+
NEXT_TICK: 0
|
|
2012
|
+
};
|
|
2013
|
+
var SENTINELS = {
|
|
2014
|
+
UNKNOWN_NUMBER_TYPE: -99,
|
|
2015
|
+
UNKNOWN_VALIDATION_ERROR: -99
|
|
2016
|
+
};
|
|
2017
|
+
var LAYOUT = {
|
|
2018
|
+
SANE_SELECTED_WITH_DIAL_WIDTH: 78,
|
|
2019
|
+
// px width fallback when separateDialCode enabled
|
|
2020
|
+
SANE_SELECTED_NO_DIAL_WIDTH: 42,
|
|
2021
|
+
// px width fallback when no separate dial code
|
|
2022
|
+
INPUT_PADDING_EXTRA_LEFT: 6
|
|
2023
|
+
// px gap between selected country container and input text
|
|
1966
2024
|
};
|
|
2025
|
+
var DIAL = {
|
|
2026
|
+
PLUS: "+",
|
|
2027
|
+
NANP: "1"
|
|
2028
|
+
// North American Numbering Plan
|
|
2029
|
+
};
|
|
2030
|
+
var UK = {
|
|
2031
|
+
ISO2: "gb",
|
|
2032
|
+
DIAL_CODE: "44",
|
|
2033
|
+
// +44 United Kingdom
|
|
2034
|
+
MOBILE_PREFIX: "7",
|
|
2035
|
+
// UK mobile numbers start with 7 after national trunk (0) or core section
|
|
2036
|
+
MOBILE_CORE_LENGTH: 10
|
|
2037
|
+
// core number length (excluding dial code / national prefix) for mobiles
|
|
2038
|
+
};
|
|
2039
|
+
var US = {
|
|
2040
|
+
ISO2: "us",
|
|
2041
|
+
DIAL_CODE: "1"
|
|
2042
|
+
// +1 United States
|
|
2043
|
+
};
|
|
2044
|
+
var PLACEHOLDER_MODES = {
|
|
2045
|
+
AGGRESSIVE: "aggressive",
|
|
2046
|
+
POLITE: "polite"
|
|
2047
|
+
};
|
|
2048
|
+
var INITIAL_COUNTRY = {
|
|
2049
|
+
AUTO: "auto"
|
|
2050
|
+
};
|
|
2051
|
+
var DATA_KEYS = {
|
|
2052
|
+
COUNTRY_CODE: "countryCode",
|
|
2053
|
+
DIAL_CODE: "dialCode"
|
|
2054
|
+
};
|
|
2055
|
+
var ARIA = {
|
|
2056
|
+
EXPANDED: "aria-expanded",
|
|
2057
|
+
LABEL: "aria-label",
|
|
2058
|
+
SELECTED: "aria-selected",
|
|
2059
|
+
ACTIVE_DESCENDANT: "aria-activedescendant",
|
|
2060
|
+
HASPOPUP: "aria-haspopup",
|
|
2061
|
+
CONTROLS: "aria-controls",
|
|
2062
|
+
HIDDEN: "aria-hidden",
|
|
2063
|
+
AUTOCOMPLETE: "aria-autocomplete",
|
|
2064
|
+
MODAL: "aria-modal"
|
|
2065
|
+
};
|
|
2066
|
+
|
|
2067
|
+
// angular/build/temp/modules/core/options.js
|
|
2068
|
+
var mq = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
|
|
1967
2069
|
var computeDefaultUseFullscreenPopup = () => {
|
|
1968
2070
|
if (typeof navigator !== "undefined" && typeof window !== "undefined") {
|
|
1969
2071
|
const isMobileUserAgent = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
@@ -1980,7 +2082,7 @@ var defaults = {
|
|
|
1980
2082
|
//* Whether or not to allow the dropdown.
|
|
1981
2083
|
allowDropdown: true,
|
|
1982
2084
|
//* Add a placeholder in the input with an example number for the selected country.
|
|
1983
|
-
autoPlaceholder:
|
|
2085
|
+
autoPlaceholder: PLACEHOLDER_MODES.POLITE,
|
|
1984
2086
|
//* Modify the parentClass.
|
|
1985
2087
|
containerClass: "",
|
|
1986
2088
|
//* The order of the countries in the dropdown. Defaults to alphabetical.
|
|
@@ -2026,7 +2128,7 @@ var defaults = {
|
|
|
2026
2128
|
//* The number type to enforce during validation.
|
|
2027
2129
|
validationNumberTypes: ["MOBILE"]
|
|
2028
2130
|
};
|
|
2029
|
-
|
|
2131
|
+
var applyOptionSideEffects = (o, defaultEnglishStrings) => {
|
|
2030
2132
|
if (o.useFullscreenPopup) {
|
|
2031
2133
|
o.fixDropdownWidth = false;
|
|
2032
2134
|
}
|
|
@@ -2042,13 +2144,58 @@ function applyOptionSideEffects(o) {
|
|
|
2042
2144
|
if (o.useFullscreenPopup && !o.dropdownContainer) {
|
|
2043
2145
|
o.dropdownContainer = document.body;
|
|
2044
2146
|
}
|
|
2045
|
-
o.i18n = Object.assign(Object.assign({},
|
|
2046
|
-
}
|
|
2147
|
+
o.i18n = Object.assign(Object.assign({}, defaultEnglishStrings), o.i18n);
|
|
2148
|
+
};
|
|
2047
2149
|
|
|
2048
2150
|
// angular/build/temp/modules/utils/string.js
|
|
2049
2151
|
var getNumeric = (s) => s.replace(/\D/g, "");
|
|
2050
2152
|
var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
|
|
2051
2153
|
|
|
2154
|
+
// angular/build/temp/modules/core/countrySearch.js
|
|
2155
|
+
var getMatchedCountries = (countries, query) => {
|
|
2156
|
+
const normalisedQuery = normaliseString(query);
|
|
2157
|
+
const iso2Matches = [];
|
|
2158
|
+
const nameStartWith = [];
|
|
2159
|
+
const nameContains = [];
|
|
2160
|
+
const dialCodeMatches = [];
|
|
2161
|
+
const dialCodeContains = [];
|
|
2162
|
+
const initialsMatches = [];
|
|
2163
|
+
for (const c of countries) {
|
|
2164
|
+
if (c.iso2 === normalisedQuery) {
|
|
2165
|
+
iso2Matches.push(c);
|
|
2166
|
+
} else if (c.normalisedName.startsWith(normalisedQuery)) {
|
|
2167
|
+
nameStartWith.push(c);
|
|
2168
|
+
} else if (c.normalisedName.includes(normalisedQuery)) {
|
|
2169
|
+
nameContains.push(c);
|
|
2170
|
+
} else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
|
|
2171
|
+
dialCodeMatches.push(c);
|
|
2172
|
+
} else if (c.dialCodePlus.includes(normalisedQuery)) {
|
|
2173
|
+
dialCodeContains.push(c);
|
|
2174
|
+
} else if (c.initials.includes(normalisedQuery)) {
|
|
2175
|
+
initialsMatches.push(c);
|
|
2176
|
+
}
|
|
2177
|
+
}
|
|
2178
|
+
const sortByPriority = (a, b) => a.priority - b.priority;
|
|
2179
|
+
return [
|
|
2180
|
+
...iso2Matches.sort(sortByPriority),
|
|
2181
|
+
...nameStartWith.sort(sortByPriority),
|
|
2182
|
+
...nameContains.sort(sortByPriority),
|
|
2183
|
+
...dialCodeMatches.sort(sortByPriority),
|
|
2184
|
+
...dialCodeContains.sort(sortByPriority),
|
|
2185
|
+
...initialsMatches.sort(sortByPriority)
|
|
2186
|
+
];
|
|
2187
|
+
};
|
|
2188
|
+
var findFirstCountryStartingWith = (countries, query) => {
|
|
2189
|
+
const lowerQuery = query.toLowerCase();
|
|
2190
|
+
for (const c of countries) {
|
|
2191
|
+
const lowerName = c.name.toLowerCase();
|
|
2192
|
+
if (lowerName.startsWith(lowerQuery)) {
|
|
2193
|
+
return c;
|
|
2194
|
+
}
|
|
2195
|
+
}
|
|
2196
|
+
return null;
|
|
2197
|
+
};
|
|
2198
|
+
|
|
2052
2199
|
// angular/build/temp/modules/utils/dom.js
|
|
2053
2200
|
var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
|
|
2054
2201
|
var createEl = (tagName, attrs, container) => {
|
|
@@ -2062,6 +2209,24 @@ var createEl = (tagName, attrs, container) => {
|
|
|
2062
2209
|
return el;
|
|
2063
2210
|
};
|
|
2064
2211
|
|
|
2212
|
+
// angular/build/temp/modules/core/icons.js
|
|
2213
|
+
var buildSearchIcon = () => `
|
|
2214
|
+
<svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
|
|
2215
|
+
<circle cx="11" cy="11" r="7" />
|
|
2216
|
+
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
2217
|
+
</svg>`;
|
|
2218
|
+
var buildClearIcon = (id2) => {
|
|
2219
|
+
const maskId = `iti-${id2}-clear-mask`;
|
|
2220
|
+
return `
|
|
2221
|
+
<svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" ${ARIA.HIDDEN}="true" focusable="false">
|
|
2222
|
+
<mask id="${maskId}" maskUnits="userSpaceOnUse">
|
|
2223
|
+
<rect width="16" height="16" fill="white" />
|
|
2224
|
+
<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" />
|
|
2225
|
+
</mask>
|
|
2226
|
+
<circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
|
|
2227
|
+
</svg>`;
|
|
2228
|
+
};
|
|
2229
|
+
|
|
2065
2230
|
// angular/build/temp/modules/core/ui.js
|
|
2066
2231
|
var UI = class {
|
|
2067
2232
|
constructor(input, options, id2) {
|
|
@@ -2115,17 +2280,17 @@ var UI = class {
|
|
|
2115
2280
|
this.countryContainer = createEl(
|
|
2116
2281
|
"div",
|
|
2117
2282
|
// visibly hidden until we measure it's width to set the input padding correctly
|
|
2118
|
-
{ class:
|
|
2283
|
+
{ class: `iti__country-container ${CLASSES.V_HIDE}` },
|
|
2119
2284
|
wrapper
|
|
2120
2285
|
);
|
|
2121
2286
|
if (allowDropdown) {
|
|
2122
2287
|
this.selectedCountry = createEl("button", {
|
|
2123
2288
|
type: "button",
|
|
2124
2289
|
class: "iti__selected-country",
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2290
|
+
[ARIA.EXPANDED]: "false",
|
|
2291
|
+
[ARIA.LABEL]: this.options.i18n.noCountrySelected,
|
|
2292
|
+
[ARIA.HASPOPUP]: "dialog",
|
|
2293
|
+
[ARIA.CONTROLS]: `iti-${this.id}__dropdown-content`
|
|
2129
2294
|
}, this.countryContainer);
|
|
2130
2295
|
if (this.telInput.disabled) {
|
|
2131
2296
|
this.selectedCountry.setAttribute("disabled", "true");
|
|
@@ -2134,9 +2299,9 @@ var UI = class {
|
|
|
2134
2299
|
this.selectedCountry = createEl("div", { class: "iti__selected-country" }, this.countryContainer);
|
|
2135
2300
|
}
|
|
2136
2301
|
const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
|
|
2137
|
-
this.selectedCountryInner = createEl("div", { class:
|
|
2302
|
+
this.selectedCountryInner = createEl("div", { class: CLASSES.FLAG }, selectedCountryPrimary);
|
|
2138
2303
|
if (allowDropdown) {
|
|
2139
|
-
this.dropdownArrow = createEl("div", { class: "iti__arrow",
|
|
2304
|
+
this.dropdownArrow = createEl("div", { class: "iti__arrow", [ARIA.HIDDEN]: "true" }, selectedCountryPrimary);
|
|
2140
2305
|
}
|
|
2141
2306
|
if (separateDialCode) {
|
|
2142
2307
|
this.selectedDialCode = createEl("div", { class: "iti__selected-dial-code" }, this.selectedCountry);
|
|
@@ -2151,9 +2316,9 @@ var UI = class {
|
|
|
2151
2316
|
const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
|
|
2152
2317
|
this.dropdownContent = createEl("div", {
|
|
2153
2318
|
id: `iti-${this.id}__dropdown-content`,
|
|
2154
|
-
class: `iti__dropdown-content
|
|
2319
|
+
class: `iti__dropdown-content ${CLASSES.HIDE} ${extraClasses}`,
|
|
2155
2320
|
role: "dialog",
|
|
2156
|
-
|
|
2321
|
+
[ARIA.MODAL]: "true"
|
|
2157
2322
|
});
|
|
2158
2323
|
if (this.isRTL) {
|
|
2159
2324
|
this.dropdownContent.setAttribute("dir", "rtl");
|
|
@@ -2165,10 +2330,10 @@ var UI = class {
|
|
|
2165
2330
|
class: "iti__country-list",
|
|
2166
2331
|
id: `iti-${this.id}__country-listbox`,
|
|
2167
2332
|
role: "listbox",
|
|
2168
|
-
|
|
2333
|
+
[ARIA.LABEL]: i18n.countryListAriaLabel
|
|
2169
2334
|
}, this.dropdownContent);
|
|
2170
2335
|
this._appendListItems();
|
|
2171
|
-
if (
|
|
2336
|
+
if (countrySearch) {
|
|
2172
2337
|
this.updateSearchResultsA11yText();
|
|
2173
2338
|
}
|
|
2174
2339
|
if (dropdownContainer) {
|
|
@@ -2190,13 +2355,9 @@ var UI = class {
|
|
|
2190
2355
|
const searchWrapper = createEl("div", { class: "iti__search-input-wrapper" }, this.dropdownContent);
|
|
2191
2356
|
this.searchIcon = createEl("span", {
|
|
2192
2357
|
class: "iti__search-icon",
|
|
2193
|
-
|
|
2358
|
+
[ARIA.HIDDEN]: "true"
|
|
2194
2359
|
}, searchWrapper);
|
|
2195
|
-
this.searchIcon.innerHTML =
|
|
2196
|
-
<svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
|
|
2197
|
-
<circle cx="11" cy="11" r="7" />
|
|
2198
|
-
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
2199
|
-
</svg>`;
|
|
2360
|
+
this.searchIcon.innerHTML = buildSearchIcon();
|
|
2200
2361
|
this.searchInput = createEl("input", {
|
|
2201
2362
|
id: `iti-${this.id}__search-input`,
|
|
2202
2363
|
// Chrome says inputs need either a name or an id
|
|
@@ -2205,31 +2366,23 @@ var UI = class {
|
|
|
2205
2366
|
placeholder: i18n.searchPlaceholder,
|
|
2206
2367
|
// 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
|
|
2207
2368
|
role: "combobox",
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2369
|
+
[ARIA.EXPANDED]: "true",
|
|
2370
|
+
[ARIA.LABEL]: i18n.searchPlaceholder,
|
|
2371
|
+
[ARIA.CONTROLS]: `iti-${this.id}__country-listbox`,
|
|
2372
|
+
[ARIA.AUTOCOMPLETE]: "list",
|
|
2212
2373
|
autocomplete: "off"
|
|
2213
2374
|
}, searchWrapper);
|
|
2214
2375
|
this.searchClearButton = createEl("button", {
|
|
2215
2376
|
type: "button",
|
|
2216
|
-
class:
|
|
2217
|
-
|
|
2377
|
+
class: `iti__search-clear ${CLASSES.HIDE}`,
|
|
2378
|
+
[ARIA.LABEL]: i18n.clearSearchAriaLabel,
|
|
2218
2379
|
tabindex: "-1"
|
|
2219
2380
|
}, searchWrapper);
|
|
2220
|
-
|
|
2221
|
-
this.searchClearButton.innerHTML = `
|
|
2222
|
-
<svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
|
2223
|
-
<mask id="${maskId}" maskUnits="userSpaceOnUse">
|
|
2224
|
-
<rect width="16" height="16" fill="white" />
|
|
2225
|
-
<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" />
|
|
2226
|
-
</mask>
|
|
2227
|
-
<circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
|
|
2228
|
-
</svg>`;
|
|
2381
|
+
this.searchClearButton.innerHTML = buildClearIcon(this.id);
|
|
2229
2382
|
this.searchResultsA11yText = createEl("span", { class: "iti__a11y-text" }, this.dropdownContent);
|
|
2230
2383
|
this.searchNoResults = createEl("div", {
|
|
2231
|
-
class:
|
|
2232
|
-
|
|
2384
|
+
class: `iti__no-results ${CLASSES.HIDE}`,
|
|
2385
|
+
[ARIA.HIDDEN]: "true"
|
|
2233
2386
|
// all a11y messaging happens in this.searchResultsA11yText
|
|
2234
2387
|
}, this.dropdownContent);
|
|
2235
2388
|
this.searchNoResults.textContent = i18n.zeroSearchResults;
|
|
@@ -2237,7 +2390,7 @@ var UI = class {
|
|
|
2237
2390
|
_maybeUpdateInputPaddingAndReveal() {
|
|
2238
2391
|
if (this.countryContainer) {
|
|
2239
2392
|
this.updateInputPadding();
|
|
2240
|
-
this.countryContainer.classList.remove(
|
|
2393
|
+
this.countryContainer.classList.remove(CLASSES.V_HIDE);
|
|
2241
2394
|
}
|
|
2242
2395
|
}
|
|
2243
2396
|
_maybeBuildHiddenInputs(wrapper) {
|
|
@@ -2278,21 +2431,21 @@ var UI = class {
|
|
|
2278
2431
|
for (let i = 0; i < this.countries.length; i++) {
|
|
2279
2432
|
const c = this.countries[i];
|
|
2280
2433
|
const liClass = buildClassNames({
|
|
2281
|
-
|
|
2282
|
-
|
|
2434
|
+
[CLASSES.COUNTRY_ITEM]: true,
|
|
2435
|
+
[CLASSES.HIGHLIGHT]: i === 0
|
|
2283
2436
|
});
|
|
2284
2437
|
const listItem = createEl("li", {
|
|
2285
2438
|
id: `iti-${this.id}__item-${c.iso2}`,
|
|
2286
2439
|
class: liClass,
|
|
2287
2440
|
tabindex: "-1",
|
|
2288
2441
|
role: "option",
|
|
2289
|
-
|
|
2442
|
+
[ARIA.SELECTED]: "false"
|
|
2290
2443
|
});
|
|
2291
2444
|
listItem.dataset.dialCode = c.dialCode;
|
|
2292
2445
|
listItem.dataset.countryCode = c.iso2;
|
|
2293
2446
|
c.nodeById[this.id] = listItem;
|
|
2294
2447
|
if (this.options.showFlags) {
|
|
2295
|
-
createEl("div", { class:
|
|
2448
|
+
createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
|
|
2296
2449
|
}
|
|
2297
2450
|
const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
|
|
2298
2451
|
nameEl.textContent = c.name;
|
|
@@ -2308,9 +2461,9 @@ var UI = class {
|
|
|
2308
2461
|
//* Update the input padding to make space for the selected country/dial code.
|
|
2309
2462
|
updateInputPadding() {
|
|
2310
2463
|
if (this.selectedCountry) {
|
|
2311
|
-
const
|
|
2312
|
-
const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() ||
|
|
2313
|
-
const inputPadding = selectedCountryWidth +
|
|
2464
|
+
const fallbackWidth = this.options.separateDialCode ? LAYOUT.SANE_SELECTED_WITH_DIAL_WIDTH : LAYOUT.SANE_SELECTED_NO_DIAL_WIDTH;
|
|
2465
|
+
const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || fallbackWidth;
|
|
2466
|
+
const inputPadding = selectedCountryWidth + LAYOUT.INPUT_PADDING_EXTRA_LEFT;
|
|
2314
2467
|
this.telInput.style.paddingLeft = `${inputPadding}px`;
|
|
2315
2468
|
}
|
|
2316
2469
|
}
|
|
@@ -2379,16 +2532,16 @@ var UI = class {
|
|
|
2379
2532
|
highlightListItem(listItem, shouldFocus) {
|
|
2380
2533
|
const prevItem = this.highlightedItem;
|
|
2381
2534
|
if (prevItem) {
|
|
2382
|
-
prevItem.classList.remove(
|
|
2383
|
-
prevItem.setAttribute(
|
|
2535
|
+
prevItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
2536
|
+
prevItem.setAttribute(ARIA.SELECTED, "false");
|
|
2384
2537
|
}
|
|
2385
2538
|
this.highlightedItem = listItem;
|
|
2386
2539
|
if (this.highlightedItem) {
|
|
2387
|
-
this.highlightedItem.classList.add(
|
|
2388
|
-
this.highlightedItem.setAttribute(
|
|
2540
|
+
this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
|
|
2541
|
+
this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
|
|
2389
2542
|
if (this.options.countrySearch) {
|
|
2390
2543
|
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2391
|
-
this.searchInput.setAttribute(
|
|
2544
|
+
this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
|
|
2392
2545
|
}
|
|
2393
2546
|
}
|
|
2394
2547
|
if (shouldFocus) {
|
|
@@ -2412,10 +2565,10 @@ var UI = class {
|
|
|
2412
2565
|
if (noCountriesAddedYet) {
|
|
2413
2566
|
this.highlightListItem(null, false);
|
|
2414
2567
|
if (this.searchNoResults) {
|
|
2415
|
-
this.searchNoResults.classList.remove(
|
|
2568
|
+
this.searchNoResults.classList.remove(CLASSES.HIDE);
|
|
2416
2569
|
}
|
|
2417
2570
|
} else if (this.searchNoResults) {
|
|
2418
|
-
this.searchNoResults.classList.add(
|
|
2571
|
+
this.searchNoResults.classList.add(CLASSES.HIDE);
|
|
2419
2572
|
}
|
|
2420
2573
|
this.countryList.scrollTop = 0;
|
|
2421
2574
|
this.updateSearchResultsA11yText();
|
|
@@ -2454,7 +2607,7 @@ var UI = class {
|
|
|
2454
2607
|
};
|
|
2455
2608
|
|
|
2456
2609
|
// angular/build/temp/modules/data/country-data.js
|
|
2457
|
-
|
|
2610
|
+
var processAllCountries = (options) => {
|
|
2458
2611
|
const { onlyCountries, excludeCountries } = options;
|
|
2459
2612
|
if (onlyCountries.length) {
|
|
2460
2613
|
const lowerCaseOnlyCountries = onlyCountries.map((country) => country.toLowerCase());
|
|
@@ -2464,16 +2617,16 @@ function processAllCountries(options) {
|
|
|
2464
2617
|
return data_default.filter((country) => !lowerCaseExcludeCountries.includes(country.iso2));
|
|
2465
2618
|
}
|
|
2466
2619
|
return data_default;
|
|
2467
|
-
}
|
|
2468
|
-
|
|
2620
|
+
};
|
|
2621
|
+
var translateCountryNames = (countries, options) => {
|
|
2469
2622
|
for (const c of countries) {
|
|
2470
2623
|
const iso2 = c.iso2.toLowerCase();
|
|
2471
2624
|
if (options.i18n[iso2]) {
|
|
2472
2625
|
c.name = options.i18n[iso2];
|
|
2473
2626
|
}
|
|
2474
2627
|
}
|
|
2475
|
-
}
|
|
2476
|
-
|
|
2628
|
+
};
|
|
2629
|
+
var processDialCodes = (countries, options) => {
|
|
2477
2630
|
const dialCodes = /* @__PURE__ */ new Set();
|
|
2478
2631
|
let dialCodeMaxLen = 0;
|
|
2479
2632
|
const dialCodeToIso2Map = {};
|
|
@@ -2524,8 +2677,8 @@ function processDialCodes(countries, options) {
|
|
|
2524
2677
|
}
|
|
2525
2678
|
}
|
|
2526
2679
|
return { dialCodes, dialCodeMaxLen, dialCodeToIso2Map };
|
|
2527
|
-
}
|
|
2528
|
-
|
|
2680
|
+
};
|
|
2681
|
+
var sortCountries = (countries, options) => {
|
|
2529
2682
|
if (options.countryOrder) {
|
|
2530
2683
|
options.countryOrder = options.countryOrder.map((iso2) => iso2.toLowerCase());
|
|
2531
2684
|
}
|
|
@@ -2545,17 +2698,17 @@ function sortCountries(countries, options) {
|
|
|
2545
2698
|
}
|
|
2546
2699
|
return a.name.localeCompare(b.name);
|
|
2547
2700
|
});
|
|
2548
|
-
}
|
|
2549
|
-
|
|
2701
|
+
};
|
|
2702
|
+
var cacheSearchTokens = (countries) => {
|
|
2550
2703
|
for (const c of countries) {
|
|
2551
2704
|
c.normalisedName = normaliseString(c.name);
|
|
2552
|
-
c.initials = c.
|
|
2705
|
+
c.initials = c.normalisedName.split(/[^a-z]/).map((word) => word[0]).join("");
|
|
2553
2706
|
c.dialCodePlus = `+${c.dialCode}`;
|
|
2554
2707
|
}
|
|
2555
|
-
}
|
|
2708
|
+
};
|
|
2556
2709
|
|
|
2557
2710
|
// angular/build/temp/modules/format/formatting.js
|
|
2558
|
-
|
|
2711
|
+
var beforeSetNumber = (fullNumber, dialCode, separateDialCode, selectedCountryData) => {
|
|
2559
2712
|
let number = fullNumber;
|
|
2560
2713
|
if (separateDialCode) {
|
|
2561
2714
|
if (dialCode) {
|
|
@@ -2565,8 +2718,8 @@ function beforeSetNumber(fullNumber, dialCode, separateDialCode, selectedCountry
|
|
|
2565
2718
|
}
|
|
2566
2719
|
}
|
|
2567
2720
|
return number;
|
|
2568
|
-
}
|
|
2569
|
-
|
|
2721
|
+
};
|
|
2722
|
+
var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) => {
|
|
2570
2723
|
const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
|
|
2571
2724
|
const { dialCode } = selectedCountryData;
|
|
2572
2725
|
if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
|
|
@@ -2574,10 +2727,10 @@ function formatNumberAsYouType(fullNumber, telInputValue, utils, selectedCountry
|
|
|
2574
2727
|
return afterDialCode.trim();
|
|
2575
2728
|
}
|
|
2576
2729
|
return result;
|
|
2577
|
-
}
|
|
2730
|
+
};
|
|
2578
2731
|
|
|
2579
2732
|
// angular/build/temp/modules/format/caret.js
|
|
2580
|
-
|
|
2733
|
+
var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
|
|
2581
2734
|
if (prevCaretPos === 0 && !isDeleteForwards) {
|
|
2582
2735
|
return 0;
|
|
2583
2736
|
}
|
|
@@ -2594,7 +2747,7 @@ function translateCursorPosition(relevantChars, formattedValue, prevCaretPos, is
|
|
|
2594
2747
|
}
|
|
2595
2748
|
}
|
|
2596
2749
|
return formattedValue.length;
|
|
2597
|
-
}
|
|
2750
|
+
};
|
|
2598
2751
|
|
|
2599
2752
|
// angular/build/temp/modules/data/nanp-regionless.js
|
|
2600
2753
|
var regionlessNanpNumbers = [
|
|
@@ -2618,7 +2771,7 @@ var regionlessNanpNumbers = [
|
|
|
2618
2771
|
];
|
|
2619
2772
|
var isRegionlessNanp = (number) => {
|
|
2620
2773
|
const numeric = getNumeric(number);
|
|
2621
|
-
if (numeric.
|
|
2774
|
+
if (numeric.startsWith(DIAL.NANP) && numeric.length >= 4) {
|
|
2622
2775
|
const areaCode = numeric.substring(1, 4);
|
|
2623
2776
|
return regionlessNanpNumbers.includes(areaCode);
|
|
2624
2777
|
}
|
|
@@ -2627,7 +2780,7 @@ var isRegionlessNanp = (number) => {
|
|
|
2627
2780
|
|
|
2628
2781
|
// angular/build/temp/intl-tel-input.js
|
|
2629
2782
|
for (const c of data_default) {
|
|
2630
|
-
c.name =
|
|
2783
|
+
c.name = en_default[c.iso2];
|
|
2631
2784
|
}
|
|
2632
2785
|
var id = 0;
|
|
2633
2786
|
var iso2Set = new Set(data_default.map((c) => c.iso2));
|
|
@@ -2636,7 +2789,7 @@ var Iti = class _Iti {
|
|
|
2636
2789
|
constructor(input, customOptions = {}) {
|
|
2637
2790
|
this.id = id++;
|
|
2638
2791
|
this.options = Object.assign(Object.assign({}, defaults), customOptions);
|
|
2639
|
-
applyOptionSideEffects(this.options);
|
|
2792
|
+
applyOptionSideEffects(this.options, en_default);
|
|
2640
2793
|
this.ui = new UI(input, this.options, this.id);
|
|
2641
2794
|
this.isAndroid = _Iti._getIsAndroid();
|
|
2642
2795
|
this.promise = this._createInitPromises();
|
|
@@ -2692,7 +2845,7 @@ var Iti = class _Iti {
|
|
|
2692
2845
|
const dialCode = this._getDialCode(val);
|
|
2693
2846
|
const isRegionlessNanpNumber = isRegionlessNanp(val);
|
|
2694
2847
|
const { initialCountry, geoIpLookup } = this.options;
|
|
2695
|
-
const isAutoCountry = initialCountry ===
|
|
2848
|
+
const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
|
|
2696
2849
|
if (dialCode && !isRegionlessNanpNumber) {
|
|
2697
2850
|
this._updateCountryFromNumber(val);
|
|
2698
2851
|
} else if (!isAutoCountry || overrideAutoCountry) {
|
|
@@ -2701,7 +2854,7 @@ var Iti = class _Iti {
|
|
|
2701
2854
|
this._setCountry(lowerInitialCountry);
|
|
2702
2855
|
} else {
|
|
2703
2856
|
if (dialCode && isRegionlessNanpNumber) {
|
|
2704
|
-
this._setCountry(
|
|
2857
|
+
this._setCountry(US.ISO2);
|
|
2705
2858
|
} else {
|
|
2706
2859
|
this._setCountry("");
|
|
2707
2860
|
}
|
|
@@ -2740,7 +2893,7 @@ var Iti = class _Iti {
|
|
|
2740
2893
|
_initDropdownListeners() {
|
|
2741
2894
|
const signal = this.abortController.signal;
|
|
2742
2895
|
const handleLabelClick = (e) => {
|
|
2743
|
-
if (this.ui.dropdownContent.classList.contains(
|
|
2896
|
+
if (this.ui.dropdownContent.classList.contains(CLASSES.HIDE)) {
|
|
2744
2897
|
this.ui.telInput.focus();
|
|
2745
2898
|
} else {
|
|
2746
2899
|
e.preventDefault();
|
|
@@ -2751,7 +2904,7 @@ var Iti = class _Iti {
|
|
|
2751
2904
|
label.addEventListener("click", handleLabelClick, { signal });
|
|
2752
2905
|
}
|
|
2753
2906
|
const handleClickSelectedCountry = () => {
|
|
2754
|
-
const dropdownClosed = this.ui.dropdownContent.classList.contains(
|
|
2907
|
+
const dropdownClosed = this.ui.dropdownContent.classList.contains(CLASSES.HIDE);
|
|
2755
2908
|
if (dropdownClosed && !this.ui.telInput.disabled && !this.ui.telInput.readOnly) {
|
|
2756
2909
|
this._openDropdown();
|
|
2757
2910
|
}
|
|
@@ -2760,13 +2913,13 @@ var Iti = class _Iti {
|
|
|
2760
2913
|
signal
|
|
2761
2914
|
});
|
|
2762
2915
|
const handleCountryContainerKeydown = (e) => {
|
|
2763
|
-
const isDropdownHidden = this.ui.dropdownContent.classList.contains(
|
|
2764
|
-
if (isDropdownHidden && [
|
|
2916
|
+
const isDropdownHidden = this.ui.dropdownContent.classList.contains(CLASSES.HIDE);
|
|
2917
|
+
if (isDropdownHidden && [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.SPACE, KEYS.ENTER].includes(e.key)) {
|
|
2765
2918
|
e.preventDefault();
|
|
2766
2919
|
e.stopPropagation();
|
|
2767
2920
|
this._openDropdown();
|
|
2768
2921
|
}
|
|
2769
|
-
if (e.key ===
|
|
2922
|
+
if (e.key === KEYS.TAB) {
|
|
2770
2923
|
this._closeDropdown();
|
|
2771
2924
|
}
|
|
2772
2925
|
};
|
|
@@ -2794,7 +2947,7 @@ var Iti = class _Iti {
|
|
|
2794
2947
|
} else {
|
|
2795
2948
|
this.resolveUtilsScriptPromise();
|
|
2796
2949
|
}
|
|
2797
|
-
const isAutoCountry = initialCountry ===
|
|
2950
|
+
const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
|
|
2798
2951
|
if (isAutoCountry && !this.selectedCountryData.iso2) {
|
|
2799
2952
|
this._loadAutoCountry();
|
|
2800
2953
|
} else {
|
|
@@ -2838,7 +2991,7 @@ var Iti = class _Iti {
|
|
|
2838
2991
|
_bindInputListener() {
|
|
2839
2992
|
const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
|
|
2840
2993
|
let userOverrideFormatting = false;
|
|
2841
|
-
if (
|
|
2994
|
+
if (REGEX.ALPHA_UNICODE.test(this.ui.telInput.value)) {
|
|
2842
2995
|
userOverrideFormatting = true;
|
|
2843
2996
|
}
|
|
2844
2997
|
const handleInputEvent = (e) => {
|
|
@@ -2853,19 +3006,19 @@ var Iti = class _Iti {
|
|
|
2853
3006
|
if (this._updateCountryFromNumber(this.ui.telInput.value)) {
|
|
2854
3007
|
this._triggerCountryChange();
|
|
2855
3008
|
}
|
|
2856
|
-
const isFormattingChar = (e === null || e === void 0 ? void 0 : e.data) &&
|
|
2857
|
-
const isPaste = (e === null || e === void 0 ? void 0 : e.inputType) ===
|
|
3009
|
+
const isFormattingChar = (e === null || e === void 0 ? void 0 : e.data) && REGEX.NON_PLUS_NUMERIC.test(e.data);
|
|
3010
|
+
const isPaste = (e === null || e === void 0 ? void 0 : e.inputType) === INPUT_TYPES.PASTE && this.ui.telInput.value;
|
|
2858
3011
|
if (isFormattingChar || isPaste && !strictMode) {
|
|
2859
3012
|
userOverrideFormatting = true;
|
|
2860
|
-
} else if (
|
|
3013
|
+
} else if (!REGEX.NON_PLUS_NUMERIC.test(this.ui.telInput.value)) {
|
|
2861
3014
|
userOverrideFormatting = false;
|
|
2862
3015
|
}
|
|
2863
3016
|
const isSetNumber = (e === null || e === void 0 ? void 0 : e.detail) && e.detail["isSetNumber"];
|
|
2864
3017
|
if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
|
|
2865
3018
|
const currentCaretPos = this.ui.telInput.selectionStart || 0;
|
|
2866
3019
|
const valueBeforeCaret = this.ui.telInput.value.substring(0, currentCaretPos);
|
|
2867
|
-
const relevantCharsBeforeCaret = valueBeforeCaret.replace(
|
|
2868
|
-
const isDeleteForwards = (e === null || e === void 0 ? void 0 : e.inputType) ===
|
|
3020
|
+
const relevantCharsBeforeCaret = valueBeforeCaret.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "").length;
|
|
3021
|
+
const isDeleteForwards = (e === null || e === void 0 ? void 0 : e.inputType) === INPUT_TYPES.DELETE_FWD;
|
|
2869
3022
|
const fullNumber = this._getFullNumber();
|
|
2870
3023
|
const formattedValue = formatNumberAsYouType(fullNumber, this.ui.telInput.value, intlTelInput.utils, this.selectedCountryData, this.options.separateDialCode);
|
|
2871
3024
|
const newCaretPos = translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
|
|
@@ -2923,7 +3076,7 @@ var Iti = class _Iti {
|
|
|
2923
3076
|
const pasted = e.clipboardData.getData("text");
|
|
2924
3077
|
const initialCharSelected = selStart === 0 && selEnd > 0;
|
|
2925
3078
|
const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
|
|
2926
|
-
const allowedChars = pasted.replace(
|
|
3079
|
+
const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
|
|
2927
3080
|
const hasLeadingPlus = allowedChars.startsWith("+");
|
|
2928
3081
|
const numerics = allowedChars.replace(/\+/g, "");
|
|
2929
3082
|
const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
|
|
@@ -2975,8 +3128,8 @@ var Iti = class _Iti {
|
|
|
2975
3128
|
if (fixDropdownWidth) {
|
|
2976
3129
|
this.ui.dropdownContent.style.width = `${this.ui.telInput.offsetWidth}px`;
|
|
2977
3130
|
}
|
|
2978
|
-
this.ui.dropdownContent.classList.remove(
|
|
2979
|
-
this.ui.selectedCountry.setAttribute(
|
|
3131
|
+
this.ui.dropdownContent.classList.remove(CLASSES.HIDE);
|
|
3132
|
+
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
|
|
2980
3133
|
this._setDropdownPosition();
|
|
2981
3134
|
if (countrySearch) {
|
|
2982
3135
|
const firstCountryItem = this.ui.countryList.firstElementChild;
|
|
@@ -2987,8 +3140,8 @@ var Iti = class _Iti {
|
|
|
2987
3140
|
this.ui.searchInput.focus();
|
|
2988
3141
|
}
|
|
2989
3142
|
this._bindDropdownListeners();
|
|
2990
|
-
this.ui.dropdownArrow.classList.add(
|
|
2991
|
-
this._trigger(
|
|
3143
|
+
this.ui.dropdownArrow.classList.add(CLASSES.ARROW_UP);
|
|
3144
|
+
this._trigger(EVENTS.OPEN_COUNTRY_DROPDOWN);
|
|
2992
3145
|
}
|
|
2993
3146
|
//* Set the dropdown position
|
|
2994
3147
|
_setDropdownPosition() {
|
|
@@ -3011,9 +3164,20 @@ var Iti = class _Iti {
|
|
|
3011
3164
|
//* We only bind dropdown listeners when the dropdown is open.
|
|
3012
3165
|
_bindDropdownListeners() {
|
|
3013
3166
|
const signal = this.dropdownAbortController.signal;
|
|
3167
|
+
this._bindDropdownMouseoverListener(signal);
|
|
3168
|
+
this._bindDropdownCountryClickListener(signal);
|
|
3169
|
+
this._bindDropdownClickOffListener(signal);
|
|
3170
|
+
this._bindDropdownKeydownListener(signal);
|
|
3171
|
+
if (this.options.countrySearch) {
|
|
3172
|
+
this._bindDropdownSearchListeners(signal);
|
|
3173
|
+
}
|
|
3174
|
+
}
|
|
3175
|
+
//* When mouse over a list item, just highlight that one
|
|
3176
|
+
//* we add the class "highlight", so if they hit "enter" we know which one to select.
|
|
3177
|
+
_bindDropdownMouseoverListener(signal) {
|
|
3014
3178
|
const handleMouseoverCountryList = (e) => {
|
|
3015
3179
|
var _a;
|
|
3016
|
-
const listItem = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(
|
|
3180
|
+
const listItem = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`.${CLASSES.COUNTRY_ITEM}`);
|
|
3017
3181
|
if (listItem) {
|
|
3018
3182
|
this.ui.highlightListItem(listItem, false);
|
|
3019
3183
|
}
|
|
@@ -3021,9 +3185,12 @@ var Iti = class _Iti {
|
|
|
3021
3185
|
this.ui.countryList.addEventListener("mouseover", handleMouseoverCountryList, {
|
|
3022
3186
|
signal
|
|
3023
3187
|
});
|
|
3188
|
+
}
|
|
3189
|
+
//* Listen for country selection.
|
|
3190
|
+
_bindDropdownCountryClickListener(signal) {
|
|
3024
3191
|
const handleClickCountryList = (e) => {
|
|
3025
3192
|
var _a;
|
|
3026
|
-
const listItem = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(
|
|
3193
|
+
const listItem = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`.${CLASSES.COUNTRY_ITEM}`);
|
|
3027
3194
|
if (listItem) {
|
|
3028
3195
|
this._selectListItem(listItem);
|
|
3029
3196
|
}
|
|
@@ -3031,6 +3198,10 @@ var Iti = class _Iti {
|
|
|
3031
3198
|
this.ui.countryList.addEventListener("click", handleClickCountryList, {
|
|
3032
3199
|
signal
|
|
3033
3200
|
});
|
|
3201
|
+
}
|
|
3202
|
+
//* Click off to close (except when this initial opening click is bubbling up).
|
|
3203
|
+
//* We cannot just stopPropagation as it may be needed to close another instance.
|
|
3204
|
+
_bindDropdownClickOffListener(signal) {
|
|
3034
3205
|
const handleClickOffToClose = (e) => {
|
|
3035
3206
|
const target = e.target;
|
|
3036
3207
|
const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
|
|
@@ -3041,21 +3212,33 @@ var Iti = class _Iti {
|
|
|
3041
3212
|
setTimeout(() => {
|
|
3042
3213
|
document.documentElement.addEventListener("click", handleClickOffToClose, { signal });
|
|
3043
3214
|
}, 0);
|
|
3215
|
+
}
|
|
3216
|
+
//* Listen for up/down scrolling, enter to select, or escape to close.
|
|
3217
|
+
//* Use keydown as keypress doesn't fire for non-char keys and we want to catch if they
|
|
3218
|
+
//* just hit down and hold it to scroll down (no keyup event).
|
|
3219
|
+
//* Listen on the document because that's where key events are triggered if no input has focus.
|
|
3220
|
+
_bindDropdownKeydownListener(signal) {
|
|
3044
3221
|
let query = "";
|
|
3045
3222
|
let queryTimer = null;
|
|
3046
3223
|
const handleKeydownOnDropdown = (e) => {
|
|
3047
|
-
|
|
3224
|
+
const allowedKeys = [
|
|
3225
|
+
KEYS.ARROW_UP,
|
|
3226
|
+
KEYS.ARROW_DOWN,
|
|
3227
|
+
KEYS.ENTER,
|
|
3228
|
+
KEYS.ESC
|
|
3229
|
+
];
|
|
3230
|
+
if (allowedKeys.includes(e.key)) {
|
|
3048
3231
|
e.preventDefault();
|
|
3049
3232
|
e.stopPropagation();
|
|
3050
|
-
if (e.key ===
|
|
3233
|
+
if (e.key === KEYS.ARROW_UP || e.key === KEYS.ARROW_DOWN) {
|
|
3051
3234
|
this._handleUpDownKey(e.key);
|
|
3052
|
-
} else if (e.key ===
|
|
3235
|
+
} else if (e.key === KEYS.ENTER) {
|
|
3053
3236
|
this._handleEnterKey();
|
|
3054
|
-
} else if (e.key ===
|
|
3237
|
+
} else if (e.key === KEYS.ESC) {
|
|
3055
3238
|
this._closeDropdown();
|
|
3056
3239
|
}
|
|
3057
3240
|
}
|
|
3058
|
-
if (!this.options.countrySearch &&
|
|
3241
|
+
if (!this.options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
|
|
3059
3242
|
e.stopPropagation();
|
|
3060
3243
|
if (queryTimer) {
|
|
3061
3244
|
clearTimeout(queryTimer);
|
|
@@ -3064,53 +3247,51 @@ var Iti = class _Iti {
|
|
|
3064
3247
|
this._searchForCountry(query);
|
|
3065
3248
|
queryTimer = setTimeout(() => {
|
|
3066
3249
|
query = "";
|
|
3067
|
-
},
|
|
3250
|
+
}, TIMINGS.HIDDEN_SEARCH_RESET_MS);
|
|
3068
3251
|
}
|
|
3069
3252
|
};
|
|
3070
3253
|
document.addEventListener("keydown", handleKeydownOnDropdown, { signal });
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
keyupTimer
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
}, 100);
|
|
3090
|
-
};
|
|
3091
|
-
this.ui.searchInput.addEventListener("input", handleSearchChange, {
|
|
3092
|
-
signal
|
|
3093
|
-
});
|
|
3094
|
-
const handleSearchClear = () => {
|
|
3095
|
-
this.ui.searchInput.value = "";
|
|
3096
|
-
this.ui.searchInput.focus();
|
|
3254
|
+
}
|
|
3255
|
+
//* Search input listeners when countrySearch enabled.
|
|
3256
|
+
_bindDropdownSearchListeners(signal) {
|
|
3257
|
+
const doFilter = () => {
|
|
3258
|
+
const inputQuery = this.ui.searchInput.value.trim();
|
|
3259
|
+
this._filterCountriesByQuery(inputQuery);
|
|
3260
|
+
if (this.ui.searchInput.value) {
|
|
3261
|
+
this.ui.searchClearButton.classList.remove(CLASSES.HIDE);
|
|
3262
|
+
} else {
|
|
3263
|
+
this.ui.searchClearButton.classList.add(CLASSES.HIDE);
|
|
3264
|
+
}
|
|
3265
|
+
};
|
|
3266
|
+
let keyupTimer = null;
|
|
3267
|
+
const handleSearchChange = () => {
|
|
3268
|
+
if (keyupTimer) {
|
|
3269
|
+
clearTimeout(keyupTimer);
|
|
3270
|
+
}
|
|
3271
|
+
keyupTimer = setTimeout(() => {
|
|
3097
3272
|
doFilter();
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3273
|
+
keyupTimer = null;
|
|
3274
|
+
}, 100);
|
|
3275
|
+
};
|
|
3276
|
+
this.ui.searchInput.addEventListener("input", handleSearchChange, {
|
|
3277
|
+
signal
|
|
3278
|
+
});
|
|
3279
|
+
const handleSearchClear = () => {
|
|
3280
|
+
this.ui.searchInput.value = "";
|
|
3281
|
+
this.ui.searchInput.focus();
|
|
3282
|
+
doFilter();
|
|
3283
|
+
};
|
|
3284
|
+
this.ui.searchClearButton.addEventListener("click", handleSearchClear, {
|
|
3285
|
+
signal
|
|
3286
|
+
});
|
|
3103
3287
|
}
|
|
3104
3288
|
//* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
|
|
3105
3289
|
_searchForCountry(query) {
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
this.ui.scrollTo(listItem);
|
|
3112
|
-
break;
|
|
3113
|
-
}
|
|
3290
|
+
const match = findFirstCountryStartingWith(this.countries, query);
|
|
3291
|
+
if (match) {
|
|
3292
|
+
const listItem = match.nodeById[this.id];
|
|
3293
|
+
this.ui.highlightListItem(listItem, false);
|
|
3294
|
+
this.ui.scrollTo(listItem);
|
|
3114
3295
|
}
|
|
3115
3296
|
}
|
|
3116
3297
|
//* Country search: Filter the countries according to the search query.
|
|
@@ -3119,48 +3300,16 @@ var Iti = class _Iti {
|
|
|
3119
3300
|
if (query === "") {
|
|
3120
3301
|
matchedCountries = this.countries;
|
|
3121
3302
|
} else {
|
|
3122
|
-
matchedCountries = this.
|
|
3303
|
+
matchedCountries = getMatchedCountries(this.countries, query);
|
|
3123
3304
|
}
|
|
3124
3305
|
this.ui.filterCountries(matchedCountries);
|
|
3125
3306
|
}
|
|
3126
|
-
_getMatchedCountries(query) {
|
|
3127
|
-
const normalisedQuery = normaliseString(query);
|
|
3128
|
-
const iso2Matches = [];
|
|
3129
|
-
const nameStartWith = [];
|
|
3130
|
-
const nameContains = [];
|
|
3131
|
-
const dialCodeMatches = [];
|
|
3132
|
-
const dialCodeContains = [];
|
|
3133
|
-
const initialsMatches = [];
|
|
3134
|
-
for (const c of this.countries) {
|
|
3135
|
-
if (c.iso2 === normalisedQuery) {
|
|
3136
|
-
iso2Matches.push(c);
|
|
3137
|
-
} else if (c.normalisedName.startsWith(normalisedQuery)) {
|
|
3138
|
-
nameStartWith.push(c);
|
|
3139
|
-
} else if (c.normalisedName.includes(normalisedQuery)) {
|
|
3140
|
-
nameContains.push(c);
|
|
3141
|
-
} else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
|
|
3142
|
-
dialCodeMatches.push(c);
|
|
3143
|
-
} else if (c.dialCodePlus.includes(normalisedQuery)) {
|
|
3144
|
-
dialCodeContains.push(c);
|
|
3145
|
-
} else if (c.initials.includes(normalisedQuery)) {
|
|
3146
|
-
initialsMatches.push(c);
|
|
3147
|
-
}
|
|
3148
|
-
}
|
|
3149
|
-
return [
|
|
3150
|
-
...iso2Matches.sort((a, b) => a.priority - b.priority),
|
|
3151
|
-
...nameStartWith.sort((a, b) => a.priority - b.priority),
|
|
3152
|
-
...nameContains.sort((a, b) => a.priority - b.priority),
|
|
3153
|
-
...dialCodeMatches.sort((a, b) => a.priority - b.priority),
|
|
3154
|
-
...dialCodeContains.sort((a, b) => a.priority - b.priority),
|
|
3155
|
-
...initialsMatches.sort((a, b) => a.priority - b.priority)
|
|
3156
|
-
];
|
|
3157
|
-
}
|
|
3158
3307
|
//* Highlight the next/prev item in the list (and ensure it is visible).
|
|
3159
3308
|
_handleUpDownKey(key) {
|
|
3160
3309
|
var _a, _b;
|
|
3161
|
-
let next = key ===
|
|
3310
|
+
let next = key === KEYS.ARROW_UP ? (_a = this.ui.highlightedItem) === null || _a === void 0 ? void 0 : _a.previousElementSibling : (_b = this.ui.highlightedItem) === null || _b === void 0 ? void 0 : _b.nextElementSibling;
|
|
3162
3311
|
if (!next && this.ui.countryList.childElementCount > 1) {
|
|
3163
|
-
next = key ===
|
|
3312
|
+
next = key === KEYS.ARROW_UP ? this.ui.countryList.lastElementChild : this.ui.countryList.firstElementChild;
|
|
3164
3313
|
}
|
|
3165
3314
|
if (next) {
|
|
3166
3315
|
this.ui.scrollTo(next);
|
|
@@ -3229,7 +3378,7 @@ var Iti = class _Iti {
|
|
|
3229
3378
|
if (!selectedIso2 && this.defaultCountry && iso2Codes.includes(this.defaultCountry)) {
|
|
3230
3379
|
return this.defaultCountry;
|
|
3231
3380
|
}
|
|
3232
|
-
const isRegionlessNanpNumber = selectedDialCode ===
|
|
3381
|
+
const isRegionlessNanpNumber = selectedDialCode === DIAL.NANP && isRegionlessNanp(numeric);
|
|
3233
3382
|
if (isRegionlessNanpNumber) {
|
|
3234
3383
|
return null;
|
|
3235
3384
|
}
|
|
@@ -3266,7 +3415,7 @@ var Iti = class _Iti {
|
|
|
3266
3415
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
3267
3416
|
}
|
|
3268
3417
|
if (this.ui.selectedCountry) {
|
|
3269
|
-
const flagClass = iso2 && showFlags ?
|
|
3418
|
+
const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
|
|
3270
3419
|
let ariaLabel, title;
|
|
3271
3420
|
if (iso2) {
|
|
3272
3421
|
const { name, dialCode } = this.selectedCountryData;
|
|
@@ -3278,7 +3427,7 @@ var Iti = class _Iti {
|
|
|
3278
3427
|
}
|
|
3279
3428
|
this.ui.selectedCountryInner.className = flagClass;
|
|
3280
3429
|
this.ui.selectedCountry.setAttribute("title", title);
|
|
3281
|
-
this.ui.selectedCountry.setAttribute(
|
|
3430
|
+
this.ui.selectedCountry.setAttribute(ARIA.LABEL, ariaLabel);
|
|
3282
3431
|
}
|
|
3283
3432
|
if (separateDialCode) {
|
|
3284
3433
|
const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
|
|
@@ -3328,10 +3477,10 @@ var Iti = class _Iti {
|
|
|
3328
3477
|
}
|
|
3329
3478
|
//* Called when the user selects a list item from the dropdown.
|
|
3330
3479
|
_selectListItem(listItem) {
|
|
3331
|
-
const iso2 = listItem.dataset.
|
|
3480
|
+
const iso2 = listItem.dataset[DATA_KEYS.COUNTRY_CODE];
|
|
3332
3481
|
const countryChanged = this._setCountry(iso2);
|
|
3333
3482
|
this._closeDropdown();
|
|
3334
|
-
const dialCode = listItem.dataset.
|
|
3483
|
+
const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
|
|
3335
3484
|
this._updateDialCode(dialCode);
|
|
3336
3485
|
if (this.options.formatOnDisplay) {
|
|
3337
3486
|
this._updateValFromNumber(this.ui.telInput.value);
|
|
@@ -3343,24 +3492,24 @@ var Iti = class _Iti {
|
|
|
3343
3492
|
}
|
|
3344
3493
|
//* Close the dropdown and unbind any listeners.
|
|
3345
3494
|
_closeDropdown() {
|
|
3346
|
-
if (this.ui.dropdownContent.classList.contains(
|
|
3495
|
+
if (this.ui.dropdownContent.classList.contains(CLASSES.HIDE)) {
|
|
3347
3496
|
return;
|
|
3348
3497
|
}
|
|
3349
|
-
this.ui.dropdownContent.classList.add(
|
|
3350
|
-
this.ui.selectedCountry.setAttribute(
|
|
3498
|
+
this.ui.dropdownContent.classList.add(CLASSES.HIDE);
|
|
3499
|
+
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
|
|
3351
3500
|
if (this.ui.highlightedItem) {
|
|
3352
|
-
this.ui.highlightedItem.setAttribute(
|
|
3501
|
+
this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
|
|
3353
3502
|
}
|
|
3354
3503
|
if (this.options.countrySearch) {
|
|
3355
|
-
this.ui.searchInput.removeAttribute(
|
|
3504
|
+
this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
|
|
3356
3505
|
}
|
|
3357
|
-
this.ui.dropdownArrow.classList.remove(
|
|
3506
|
+
this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
|
|
3358
3507
|
this.dropdownAbortController.abort();
|
|
3359
3508
|
this.dropdownAbortController = null;
|
|
3360
3509
|
if (this.options.dropdownContainer) {
|
|
3361
3510
|
this.ui.dropdown.remove();
|
|
3362
3511
|
}
|
|
3363
|
-
this._trigger(
|
|
3512
|
+
this._trigger(EVENTS.CLOSE_COUNTRY_DROPDOWN);
|
|
3364
3513
|
}
|
|
3365
3514
|
//* Replace any existing dial code with the new one
|
|
3366
3515
|
//* Note: called from _selectListItem and setCountry
|
|
@@ -3427,16 +3576,16 @@ var Iti = class _Iti {
|
|
|
3427
3576
|
}
|
|
3428
3577
|
//* Trigger the 'countrychange' event.
|
|
3429
3578
|
_triggerCountryChange() {
|
|
3430
|
-
this._trigger(
|
|
3579
|
+
this._trigger(EVENTS.COUNTRY_CHANGE);
|
|
3431
3580
|
}
|
|
3432
3581
|
//**************************
|
|
3433
3582
|
//* SECRET PUBLIC METHODS
|
|
3434
3583
|
//**************************
|
|
3435
3584
|
//* This is called when the geoip call returns.
|
|
3436
3585
|
handleAutoCountry() {
|
|
3437
|
-
if (this.options.initialCountry ===
|
|
3586
|
+
if (this.options.initialCountry === INITIAL_COUNTRY.AUTO && intlTelInput.autoCountry) {
|
|
3438
3587
|
this.defaultCountry = intlTelInput.autoCountry;
|
|
3439
|
-
const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains(
|
|
3588
|
+
const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
|
|
3440
3589
|
if (!hasSelectedCountryOrGlobe) {
|
|
3441
3590
|
this.setCountry(this.defaultCountry);
|
|
3442
3591
|
}
|
|
@@ -3496,7 +3645,7 @@ var Iti = class _Iti {
|
|
|
3496
3645
|
if (intlTelInput.utils) {
|
|
3497
3646
|
return intlTelInput.utils.getNumberType(this._getFullNumber(), this.selectedCountryData.iso2);
|
|
3498
3647
|
}
|
|
3499
|
-
return
|
|
3648
|
+
return SENTINELS.UNKNOWN_NUMBER_TYPE;
|
|
3500
3649
|
}
|
|
3501
3650
|
//* Get the country data for the currently selected country.
|
|
3502
3651
|
getSelectedCountryData() {
|
|
@@ -3508,15 +3657,15 @@ var Iti = class _Iti {
|
|
|
3508
3657
|
const { iso2 } = this.selectedCountryData;
|
|
3509
3658
|
return intlTelInput.utils.getValidationError(this._getFullNumber(), iso2);
|
|
3510
3659
|
}
|
|
3511
|
-
return
|
|
3660
|
+
return SENTINELS.UNKNOWN_VALIDATION_ERROR;
|
|
3512
3661
|
}
|
|
3513
3662
|
//* Validate the input val using number length only
|
|
3514
3663
|
isValidNumber() {
|
|
3515
3664
|
const { dialCode, iso2 } = this.selectedCountryData;
|
|
3516
|
-
if (dialCode ===
|
|
3665
|
+
if (dialCode === UK.DIAL_CODE && intlTelInput.utils) {
|
|
3517
3666
|
const number = this._getFullNumber();
|
|
3518
3667
|
const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
|
|
3519
|
-
if (coreNumber[0] ===
|
|
3668
|
+
if (coreNumber[0] === UK.MOBILE_PREFIX && coreNumber.length !== UK.MOBILE_CORE_LENGTH) {
|
|
3520
3669
|
return false;
|
|
3521
3670
|
}
|
|
3522
3671
|
}
|
|
@@ -3539,7 +3688,7 @@ var Iti = class _Iti {
|
|
|
3539
3688
|
}
|
|
3540
3689
|
const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
|
|
3541
3690
|
const val = this._getFullNumber();
|
|
3542
|
-
const alphaCharPosition = val.search(
|
|
3691
|
+
const alphaCharPosition = val.search(REGEX.ALPHA_UNICODE);
|
|
3543
3692
|
const hasAlphaChar = alphaCharPosition > -1;
|
|
3544
3693
|
if (hasAlphaChar && !this.options.allowPhonewords) {
|
|
3545
3694
|
const beforeAlphaChar = val.substring(0, alphaCharPosition);
|
|
@@ -3576,7 +3725,7 @@ var Iti = class _Iti {
|
|
|
3576
3725
|
if (countryChanged) {
|
|
3577
3726
|
this._triggerCountryChange();
|
|
3578
3727
|
}
|
|
3579
|
-
this._trigger(
|
|
3728
|
+
this._trigger(EVENTS.INPUT, { isSetNumber: true });
|
|
3580
3729
|
}
|
|
3581
3730
|
//* Set the placeholder number typ
|
|
3582
3731
|
setPlaceholderNumberType(type) {
|
|
@@ -3649,7 +3798,7 @@ var intlTelInput = Object.assign((input, options) => {
|
|
|
3649
3798
|
attachUtils,
|
|
3650
3799
|
startedLoadingUtilsScript: false,
|
|
3651
3800
|
startedLoadingAutoCountry: false,
|
|
3652
|
-
version: "25.11.
|
|
3801
|
+
version: "25.11.1"
|
|
3653
3802
|
});
|
|
3654
3803
|
var intl_tel_input_default = intlTelInput;
|
|
3655
3804
|
|