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.
Files changed (31) hide show
  1. package/README.md +5 -5
  2. package/angular/README.md +1 -1
  3. package/angular/build/IntlTelInput.js +349 -200
  4. package/angular/build/IntlTelInputWithUtils.js +349 -200
  5. package/angular/build/types/intl-tel-input/data.d.ts +3 -3
  6. package/angular/build/types/intl-tel-input.d.ts +5 -1
  7. package/angular/build/types/modules/constants.d.ts +84 -0
  8. package/angular/build/types/modules/core/countrySearch.d.ts +17 -0
  9. package/angular/build/types/modules/core/icons.d.ts +7 -0
  10. package/angular/build/types/modules/core/options.d.ts +2 -1
  11. package/angular/build/types/modules/data/country-data.d.ts +5 -5
  12. package/angular/build/types/modules/format/caret.d.ts +1 -1
  13. package/angular/build/types/modules/format/formatting.d.ts +2 -2
  14. package/angular/build/types/modules/types/events.d.ts +5 -4
  15. package/build/js/data.js +8 -2
  16. package/build/js/data.min.js +2 -2
  17. package/build/js/intlTelInput.d.ts +137 -17
  18. package/build/js/intlTelInput.js +397 -226
  19. package/build/js/intlTelInput.min.js +13 -13
  20. package/build/js/intlTelInputWithUtils.js +397 -226
  21. package/build/js/intlTelInputWithUtils.min.js +13 -13
  22. package/package.json +2 -1
  23. package/react/README.md +1 -1
  24. package/react/build/IntlTelInput.cjs +396 -225
  25. package/react/build/IntlTelInput.d.ts +137 -17
  26. package/react/build/IntlTelInput.js +396 -225
  27. package/react/build/IntlTelInputWithUtils.cjs +396 -225
  28. package/react/build/IntlTelInputWithUtils.js +396 -225
  29. package/vue/README.md +1 -1
  30. package/vue/build/IntlTelInput.mjs +514 -390
  31. package/vue/build/IntlTelInputWithUtils.mjs +923 -799
@@ -1724,7 +1724,13 @@ for (const c of rawCountryData) {
1724
1724
  areaCodes: c[3] || null,
1725
1725
  nodeById: {},
1726
1726
  // populated by the plugin
1727
- nationalPrefix: c[4] || null
1727
+ nationalPrefix: c[4] || null,
1728
+ normalisedName: "",
1729
+ // populated in the plugin
1730
+ initials: "",
1731
+ // populated in the plugin
1732
+ dialCodePlus: ""
1733
+ // populated in the plugin
1728
1734
  });
1729
1735
  }
1730
1736
  var data_default = allCountries;
@@ -1996,13 +2002,111 @@ var interface_default = interfaceTranslations;
1996
2002
  var allTranslations = { ...countries_default, ...interface_default };
1997
2003
  var en_default = allTranslations;
1998
2004
 
1999
- // src/js/modules/core/options.ts
2000
- var mq = (q) => {
2001
- return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
2005
+ // src/js/modules/constants.ts
2006
+ var EVENTS = {
2007
+ OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
2008
+ CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
2009
+ COUNTRY_CHANGE: "countrychange",
2010
+ INPUT: "input"
2011
+ // used for synthetic input trigger
2012
+ };
2013
+ var CLASSES = {
2014
+ HIDE: "iti__hide",
2015
+ V_HIDE: "iti__v-hide",
2016
+ ARROW_UP: "iti__arrow--up",
2017
+ GLOBE: "iti__globe",
2018
+ FLAG: "iti__flag",
2019
+ COUNTRY_ITEM: "iti__country",
2020
+ HIGHLIGHT: "iti__highlight"
2021
+ };
2022
+ var KEYS = {
2023
+ ARROW_UP: "ArrowUp",
2024
+ ARROW_DOWN: "ArrowDown",
2025
+ SPACE: " ",
2026
+ ENTER: "Enter",
2027
+ ESC: "Escape",
2028
+ TAB: "Tab"
2029
+ };
2030
+ var INPUT_TYPES = {
2031
+ PASTE: "insertFromPaste",
2032
+ DELETE_FWD: "deleteContentForward"
2033
+ };
2034
+ var REGEX = {
2035
+ ALPHA_UNICODE: /\p{L}/u,
2036
+ // any kind of letter from any language
2037
+ NON_PLUS_NUMERIC: /[^+0-9]/,
2038
+ // chars that are NOT + or digit
2039
+ NON_PLUS_NUMERIC_GLOBAL: /[^+0-9]/g,
2040
+ // chars that are NOT + or digit (global)
2041
+ HIDDEN_SEARCH_CHAR: /^[a-zA-ZÀ-ÿа-яА-Я ]$/
2042
+ // single acceptable hidden-search char
2043
+ };
2044
+ var TIMINGS = {
2045
+ SEARCH_DEBOUNCE_MS: 100,
2046
+ HIDDEN_SEARCH_RESET_MS: 1e3,
2047
+ NEXT_TICK: 0
2048
+ };
2049
+ var SENTINELS = {
2050
+ UNKNOWN_NUMBER_TYPE: -99,
2051
+ UNKNOWN_VALIDATION_ERROR: -99
2052
+ };
2053
+ var LAYOUT = {
2054
+ SANE_SELECTED_WITH_DIAL_WIDTH: 78,
2055
+ // px width fallback when separateDialCode enabled
2056
+ SANE_SELECTED_NO_DIAL_WIDTH: 42,
2057
+ // px width fallback when no separate dial code
2058
+ INPUT_PADDING_EXTRA_LEFT: 6
2059
+ // px gap between selected country container and input text
2060
+ };
2061
+ var DIAL = {
2062
+ PLUS: "+",
2063
+ NANP: "1"
2064
+ // North American Numbering Plan
2065
+ };
2066
+ var UK = {
2067
+ ISO2: "gb",
2068
+ DIAL_CODE: "44",
2069
+ // +44 United Kingdom
2070
+ MOBILE_PREFIX: "7",
2071
+ // UK mobile numbers start with 7 after national trunk (0) or core section
2072
+ MOBILE_CORE_LENGTH: 10
2073
+ // core number length (excluding dial code / national prefix) for mobiles
2074
+ };
2075
+ var US = {
2076
+ ISO2: "us",
2077
+ DIAL_CODE: "1"
2078
+ // +1 United States
2079
+ };
2080
+ var PLACEHOLDER_MODES = {
2081
+ AGGRESSIVE: "aggressive",
2082
+ POLITE: "polite"
2083
+ };
2084
+ var INITIAL_COUNTRY = {
2085
+ AUTO: "auto"
2002
2086
  };
2087
+ var DATA_KEYS = {
2088
+ COUNTRY_CODE: "countryCode",
2089
+ DIAL_CODE: "dialCode"
2090
+ };
2091
+ var ARIA = {
2092
+ EXPANDED: "aria-expanded",
2093
+ LABEL: "aria-label",
2094
+ SELECTED: "aria-selected",
2095
+ ACTIVE_DESCENDANT: "aria-activedescendant",
2096
+ HASPOPUP: "aria-haspopup",
2097
+ CONTROLS: "aria-controls",
2098
+ HIDDEN: "aria-hidden",
2099
+ AUTOCOMPLETE: "aria-autocomplete",
2100
+ MODAL: "aria-modal"
2101
+ };
2102
+
2103
+ // src/js/modules/core/options.ts
2104
+ var mq = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
2003
2105
  var computeDefaultUseFullscreenPopup = () => {
2004
2106
  if (typeof navigator !== "undefined" && typeof window !== "undefined") {
2005
- const isMobileUserAgent = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
2107
+ const isMobileUserAgent = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
2108
+ navigator.userAgent
2109
+ );
2006
2110
  const isNarrowViewport = mq("(max-width: 500px)");
2007
2111
  const isShortViewport = mq("(max-height: 600px)");
2008
2112
  const isCoarsePointer = mq("(pointer: coarse)");
@@ -2016,7 +2120,7 @@ var defaults = {
2016
2120
  //* Whether or not to allow the dropdown.
2017
2121
  allowDropdown: true,
2018
2122
  //* Add a placeholder in the input with an example number for the selected country.
2019
- autoPlaceholder: "polite",
2123
+ autoPlaceholder: PLACEHOLDER_MODES.POLITE,
2020
2124
  //* Modify the parentClass.
2021
2125
  containerClass: "",
2022
2126
  //* The order of the countries in the dropdown. Defaults to alphabetical.
@@ -2062,7 +2166,7 @@ var defaults = {
2062
2166
  //* The number type to enforce during validation.
2063
2167
  validationNumberTypes: ["MOBILE"]
2064
2168
  };
2065
- function applyOptionSideEffects(o) {
2169
+ var applyOptionSideEffects = (o, defaultEnglishStrings) => {
2066
2170
  if (o.useFullscreenPopup) {
2067
2171
  o.fixDropdownWidth = false;
2068
2172
  }
@@ -2078,19 +2182,66 @@ function applyOptionSideEffects(o) {
2078
2182
  if (o.useFullscreenPopup && !o.dropdownContainer) {
2079
2183
  o.dropdownContainer = document.body;
2080
2184
  }
2081
- o.i18n = { ...en_default, ...o.i18n };
2082
- }
2185
+ o.i18n = { ...defaultEnglishStrings, ...o.i18n };
2186
+ };
2083
2187
 
2084
2188
  // src/js/modules/utils/string.ts
2085
2189
  var getNumeric = (s) => s.replace(/\D/g, "");
2086
2190
  var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
2087
2191
 
2192
+ // src/js/modules/core/countrySearch.ts
2193
+ var getMatchedCountries = (countries, query) => {
2194
+ const normalisedQuery = normaliseString(query);
2195
+ const iso2Matches = [];
2196
+ const nameStartWith = [];
2197
+ const nameContains = [];
2198
+ const dialCodeMatches = [];
2199
+ const dialCodeContains = [];
2200
+ const initialsMatches = [];
2201
+ for (const c of countries) {
2202
+ if (c.iso2 === normalisedQuery) {
2203
+ iso2Matches.push(c);
2204
+ } else if (c.normalisedName.startsWith(normalisedQuery)) {
2205
+ nameStartWith.push(c);
2206
+ } else if (c.normalisedName.includes(normalisedQuery)) {
2207
+ nameContains.push(c);
2208
+ } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
2209
+ dialCodeMatches.push(c);
2210
+ } else if (c.dialCodePlus.includes(normalisedQuery)) {
2211
+ dialCodeContains.push(c);
2212
+ } else if (c.initials.includes(normalisedQuery)) {
2213
+ initialsMatches.push(c);
2214
+ }
2215
+ }
2216
+ const sortByPriority = (a, b) => a.priority - b.priority;
2217
+ return [
2218
+ ...iso2Matches.sort(sortByPriority),
2219
+ ...nameStartWith.sort(sortByPriority),
2220
+ ...nameContains.sort(sortByPriority),
2221
+ ...dialCodeMatches.sort(sortByPriority),
2222
+ ...dialCodeContains.sort(sortByPriority),
2223
+ ...initialsMatches.sort(sortByPriority)
2224
+ ];
2225
+ };
2226
+ var findFirstCountryStartingWith = (countries, query) => {
2227
+ const lowerQuery = query.toLowerCase();
2228
+ for (const c of countries) {
2229
+ const lowerName = c.name.toLowerCase();
2230
+ if (lowerName.startsWith(lowerQuery)) {
2231
+ return c;
2232
+ }
2233
+ }
2234
+ return null;
2235
+ };
2236
+
2088
2237
  // src/js/modules/utils/dom.ts
2089
2238
  var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
2090
2239
  var createEl = (tagName, attrs, container) => {
2091
2240
  const el = document.createElement(tagName);
2092
2241
  if (attrs) {
2093
- Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
2242
+ Object.entries(attrs).forEach(
2243
+ ([key, value]) => el.setAttribute(key, value)
2244
+ );
2094
2245
  }
2095
2246
  if (container) {
2096
2247
  container.appendChild(el);
@@ -2098,6 +2249,24 @@ var createEl = (tagName, attrs, container) => {
2098
2249
  return el;
2099
2250
  };
2100
2251
 
2252
+ // src/js/modules/core/icons.ts
2253
+ var buildSearchIcon = () => `
2254
+ <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
2255
+ <circle cx="11" cy="11" r="7" />
2256
+ <line x1="21" y1="21" x2="16.65" y2="16.65" />
2257
+ </svg>`;
2258
+ var buildClearIcon = (id2) => {
2259
+ const maskId = `iti-${id2}-clear-mask`;
2260
+ return `
2261
+ <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" ${ARIA.HIDDEN}="true" focusable="false">
2262
+ <mask id="${maskId}" maskUnits="userSpaceOnUse">
2263
+ <rect width="16" height="16" fill="white" />
2264
+ <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" />
2265
+ </mask>
2266
+ <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
2267
+ </svg>`;
2268
+ };
2269
+
2101
2270
  // src/js/modules/core/ui.ts
2102
2271
  var UI = class {
2103
2272
  constructor(input, options, id2) {
@@ -2129,12 +2298,7 @@ var UI = class {
2129
2298
  }
2130
2299
  }
2131
2300
  _createWrapperAndInsert() {
2132
- const {
2133
- allowDropdown,
2134
- showFlags,
2135
- containerClass,
2136
- useFullscreenPopup
2137
- } = this.options;
2301
+ const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.options;
2138
2302
  const parentClasses = buildClassNames({
2139
2303
  iti: true,
2140
2304
  "iti--allow-dropdown": allowDropdown,
@@ -2155,7 +2319,7 @@ var UI = class {
2155
2319
  this.countryContainer = createEl(
2156
2320
  "div",
2157
2321
  // visibly hidden until we measure it's width to set the input padding correctly
2158
- { class: "iti__country-container iti__v-hide" },
2322
+ { class: `iti__country-container ${CLASSES.V_HIDE}` },
2159
2323
  wrapper
2160
2324
  );
2161
2325
  if (allowDropdown) {
@@ -2164,10 +2328,10 @@ var UI = class {
2164
2328
  {
2165
2329
  type: "button",
2166
2330
  class: "iti__selected-country",
2167
- "aria-expanded": "false",
2168
- "aria-label": this.options.i18n.noCountrySelected,
2169
- "aria-haspopup": "dialog",
2170
- "aria-controls": `iti-${this.id}__dropdown-content`
2331
+ [ARIA.EXPANDED]: "false",
2332
+ [ARIA.LABEL]: this.options.i18n.noCountrySelected,
2333
+ [ARIA.HASPOPUP]: "dialog",
2334
+ [ARIA.CONTROLS]: `iti-${this.id}__dropdown-content`
2171
2335
  },
2172
2336
  this.countryContainer
2173
2337
  );
@@ -2188,13 +2352,13 @@ var UI = class {
2188
2352
  );
2189
2353
  this.selectedCountryInner = createEl(
2190
2354
  "div",
2191
- { class: "iti__flag" },
2355
+ { class: CLASSES.FLAG },
2192
2356
  selectedCountryPrimary
2193
2357
  );
2194
2358
  if (allowDropdown) {
2195
2359
  this.dropdownArrow = createEl(
2196
2360
  "div",
2197
- { class: "iti__arrow", "aria-hidden": "true" },
2361
+ { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
2198
2362
  selectedCountryPrimary
2199
2363
  );
2200
2364
  }
@@ -2222,9 +2386,9 @@ var UI = class {
2222
2386
  const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
2223
2387
  this.dropdownContent = createEl("div", {
2224
2388
  id: `iti-${this.id}__dropdown-content`,
2225
- class: `iti__dropdown-content iti__hide ${extraClasses}`,
2389
+ class: `iti__dropdown-content ${CLASSES.HIDE} ${extraClasses}`,
2226
2390
  role: "dialog",
2227
- "aria-modal": "true"
2391
+ [ARIA.MODAL]: "true"
2228
2392
  });
2229
2393
  if (this.isRTL) {
2230
2394
  this.dropdownContent.setAttribute("dir", "rtl");
@@ -2238,12 +2402,12 @@ var UI = class {
2238
2402
  class: "iti__country-list",
2239
2403
  id: `iti-${this.id}__country-listbox`,
2240
2404
  role: "listbox",
2241
- "aria-label": i18n.countryListAriaLabel
2405
+ [ARIA.LABEL]: i18n.countryListAriaLabel
2242
2406
  },
2243
2407
  this.dropdownContent
2244
2408
  );
2245
2409
  this._appendListItems();
2246
- if (this.options.countrySearch) {
2410
+ if (countrySearch) {
2247
2411
  this.updateSearchResultsA11yText();
2248
2412
  }
2249
2413
  if (dropdownContainer) {
@@ -2271,15 +2435,11 @@ var UI = class {
2271
2435
  "span",
2272
2436
  {
2273
2437
  class: "iti__search-icon",
2274
- "aria-hidden": "true"
2438
+ [ARIA.HIDDEN]: "true"
2275
2439
  },
2276
2440
  searchWrapper
2277
2441
  );
2278
- this.searchIcon.innerHTML = `
2279
- <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
2280
- <circle cx="11" cy="11" r="7" />
2281
- <line x1="21" y1="21" x2="16.65" y2="16.65" />
2282
- </svg>`;
2442
+ this.searchIcon.innerHTML = buildSearchIcon();
2283
2443
  this.searchInput = createEl(
2284
2444
  "input",
2285
2445
  {
@@ -2290,10 +2450,10 @@ var UI = class {
2290
2450
  placeholder: i18n.searchPlaceholder,
2291
2451
  // 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
2292
2452
  role: "combobox",
2293
- "aria-expanded": "true",
2294
- "aria-label": i18n.searchPlaceholder,
2295
- "aria-controls": `iti-${this.id}__country-listbox`,
2296
- "aria-autocomplete": "list",
2453
+ [ARIA.EXPANDED]: "true",
2454
+ [ARIA.LABEL]: i18n.searchPlaceholder,
2455
+ [ARIA.CONTROLS]: `iti-${this.id}__country-listbox`,
2456
+ [ARIA.AUTOCOMPLETE]: "list",
2297
2457
  autocomplete: "off"
2298
2458
  },
2299
2459
  searchWrapper
@@ -2302,21 +2462,13 @@ var UI = class {
2302
2462
  "button",
2303
2463
  {
2304
2464
  type: "button",
2305
- class: "iti__search-clear iti__hide",
2306
- "aria-label": i18n.clearSearchAriaLabel,
2465
+ class: `iti__search-clear ${CLASSES.HIDE}`,
2466
+ [ARIA.LABEL]: i18n.clearSearchAriaLabel,
2307
2467
  tabindex: "-1"
2308
2468
  },
2309
2469
  searchWrapper
2310
2470
  );
2311
- const maskId = `iti-${this.id}-clear-mask`;
2312
- this.searchClearButton.innerHTML = `
2313
- <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
2314
- <mask id="${maskId}" maskUnits="userSpaceOnUse">
2315
- <rect width="16" height="16" fill="white" />
2316
- <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" />
2317
- </mask>
2318
- <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
2319
- </svg>`;
2471
+ this.searchClearButton.innerHTML = buildClearIcon(this.id);
2320
2472
  this.searchResultsA11yText = createEl(
2321
2473
  "span",
2322
2474
  { class: "iti__a11y-text" },
@@ -2325,8 +2477,8 @@ var UI = class {
2325
2477
  this.searchNoResults = createEl(
2326
2478
  "div",
2327
2479
  {
2328
- class: "iti__no-results iti__hide",
2329
- "aria-hidden": "true"
2480
+ class: `iti__no-results ${CLASSES.HIDE}`,
2481
+ [ARIA.HIDDEN]: "true"
2330
2482
  // all a11y messaging happens in this.searchResultsA11yText
2331
2483
  },
2332
2484
  this.dropdownContent
@@ -2336,7 +2488,7 @@ var UI = class {
2336
2488
  _maybeUpdateInputPaddingAndReveal() {
2337
2489
  if (this.countryContainer) {
2338
2490
  this.updateInputPadding();
2339
- this.countryContainer.classList.remove("iti__v-hide");
2491
+ this.countryContainer.classList.remove(CLASSES.V_HIDE);
2340
2492
  }
2341
2493
  }
2342
2494
  _maybeBuildHiddenInputs(wrapper) {
@@ -2380,21 +2532,21 @@ var UI = class {
2380
2532
  for (let i = 0; i < this.countries.length; i++) {
2381
2533
  const c = this.countries[i];
2382
2534
  const liClass = buildClassNames({
2383
- iti__country: true,
2384
- iti__highlight: i === 0
2535
+ [CLASSES.COUNTRY_ITEM]: true,
2536
+ [CLASSES.HIGHLIGHT]: i === 0
2385
2537
  });
2386
2538
  const listItem = createEl("li", {
2387
2539
  id: `iti-${this.id}__item-${c.iso2}`,
2388
2540
  class: liClass,
2389
2541
  tabindex: "-1",
2390
2542
  role: "option",
2391
- "aria-selected": "false"
2543
+ [ARIA.SELECTED]: "false"
2392
2544
  });
2393
2545
  listItem.dataset.dialCode = c.dialCode;
2394
2546
  listItem.dataset.countryCode = c.iso2;
2395
2547
  c.nodeById[this.id] = listItem;
2396
2548
  if (this.options.showFlags) {
2397
- createEl("div", { class: `iti__flag iti__${c.iso2}` }, listItem);
2549
+ createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
2398
2550
  }
2399
2551
  const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
2400
2552
  nameEl.textContent = c.name;
@@ -2410,9 +2562,9 @@ var UI = class {
2410
2562
  //* Update the input padding to make space for the selected country/dial code.
2411
2563
  updateInputPadding() {
2412
2564
  if (this.selectedCountry) {
2413
- const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
2414
- const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
2415
- const inputPadding = selectedCountryWidth + 6;
2565
+ const fallbackWidth = this.options.separateDialCode ? LAYOUT.SANE_SELECTED_WITH_DIAL_WIDTH : LAYOUT.SANE_SELECTED_NO_DIAL_WIDTH;
2566
+ const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || fallbackWidth;
2567
+ const inputPadding = selectedCountryWidth + LAYOUT.INPUT_PADDING_EXTRA_LEFT;
2416
2568
  this.telInput.style.paddingLeft = `${inputPadding}px`;
2417
2569
  }
2418
2570
  }
@@ -2488,19 +2640,16 @@ var UI = class {
2488
2640
  highlightListItem(listItem, shouldFocus) {
2489
2641
  const prevItem = this.highlightedItem;
2490
2642
  if (prevItem) {
2491
- prevItem.classList.remove("iti__highlight");
2492
- prevItem.setAttribute("aria-selected", "false");
2643
+ prevItem.classList.remove(CLASSES.HIGHLIGHT);
2644
+ prevItem.setAttribute(ARIA.SELECTED, "false");
2493
2645
  }
2494
2646
  this.highlightedItem = listItem;
2495
2647
  if (this.highlightedItem) {
2496
- this.highlightedItem.classList.add("iti__highlight");
2497
- this.highlightedItem.setAttribute("aria-selected", "true");
2648
+ this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
2649
+ this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
2498
2650
  if (this.options.countrySearch) {
2499
2651
  const activeDescendant = this.highlightedItem.getAttribute("id") || "";
2500
- this.searchInput.setAttribute(
2501
- "aria-activedescendant",
2502
- activeDescendant
2503
- );
2652
+ this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
2504
2653
  }
2505
2654
  }
2506
2655
  if (shouldFocus) {
@@ -2524,10 +2673,10 @@ var UI = class {
2524
2673
  if (noCountriesAddedYet) {
2525
2674
  this.highlightListItem(null, false);
2526
2675
  if (this.searchNoResults) {
2527
- this.searchNoResults.classList.remove("iti__hide");
2676
+ this.searchNoResults.classList.remove(CLASSES.HIDE);
2528
2677
  }
2529
2678
  } else if (this.searchNoResults) {
2530
- this.searchNoResults.classList.add("iti__hide");
2679
+ this.searchNoResults.classList.add(CLASSES.HIDE);
2531
2680
  }
2532
2681
  this.countryList.scrollTop = 0;
2533
2682
  this.updateSearchResultsA11yText();
@@ -2566,26 +2715,34 @@ var UI = class {
2566
2715
  };
2567
2716
 
2568
2717
  // src/js/modules/data/country-data.ts
2569
- function processAllCountries(options) {
2718
+ var processAllCountries = (options) => {
2570
2719
  const { onlyCountries, excludeCountries } = options;
2571
2720
  if (onlyCountries.length) {
2572
- const lowerCaseOnlyCountries = onlyCountries.map((country) => country.toLowerCase());
2573
- return data_default.filter((country) => lowerCaseOnlyCountries.includes(country.iso2));
2721
+ const lowerCaseOnlyCountries = onlyCountries.map(
2722
+ (country) => country.toLowerCase()
2723
+ );
2724
+ return data_default.filter(
2725
+ (country) => lowerCaseOnlyCountries.includes(country.iso2)
2726
+ );
2574
2727
  } else if (excludeCountries.length) {
2575
- const lowerCaseExcludeCountries = excludeCountries.map((country) => country.toLowerCase());
2576
- return data_default.filter((country) => !lowerCaseExcludeCountries.includes(country.iso2));
2728
+ const lowerCaseExcludeCountries = excludeCountries.map(
2729
+ (country) => country.toLowerCase()
2730
+ );
2731
+ return data_default.filter(
2732
+ (country) => !lowerCaseExcludeCountries.includes(country.iso2)
2733
+ );
2577
2734
  }
2578
2735
  return data_default;
2579
- }
2580
- function translateCountryNames(countries, options) {
2736
+ };
2737
+ var translateCountryNames = (countries, options) => {
2581
2738
  for (const c of countries) {
2582
2739
  const iso2 = c.iso2.toLowerCase();
2583
2740
  if (options.i18n[iso2]) {
2584
2741
  c.name = options.i18n[iso2];
2585
2742
  }
2586
2743
  }
2587
- }
2588
- function processDialCodes(countries, options) {
2744
+ };
2745
+ var processDialCodes = (countries, options) => {
2589
2746
  const dialCodes = /* @__PURE__ */ new Set();
2590
2747
  let dialCodeMaxLen = 0;
2591
2748
  const dialCodeToIso2Map = {};
@@ -2636,10 +2793,12 @@ function processDialCodes(countries, options) {
2636
2793
  }
2637
2794
  }
2638
2795
  return { dialCodes, dialCodeMaxLen, dialCodeToIso2Map };
2639
- }
2640
- function sortCountries(countries, options) {
2796
+ };
2797
+ var sortCountries = (countries, options) => {
2641
2798
  if (options.countryOrder) {
2642
- options.countryOrder = options.countryOrder.map((iso2) => iso2.toLowerCase());
2799
+ options.countryOrder = options.countryOrder.map(
2800
+ (iso2) => iso2.toLowerCase()
2801
+ );
2643
2802
  }
2644
2803
  countries.sort((a, b) => {
2645
2804
  const { countryOrder } = options;
@@ -2657,17 +2816,17 @@ function sortCountries(countries, options) {
2657
2816
  }
2658
2817
  return a.name.localeCompare(b.name);
2659
2818
  });
2660
- }
2661
- function cacheSearchTokens(countries) {
2819
+ };
2820
+ var cacheSearchTokens = (countries) => {
2662
2821
  for (const c of countries) {
2663
2822
  c.normalisedName = normaliseString(c.name);
2664
- c.initials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
2823
+ c.initials = c.normalisedName.split(/[^a-z]/).map((word) => word[0]).join("");
2665
2824
  c.dialCodePlus = `+${c.dialCode}`;
2666
2825
  }
2667
- }
2826
+ };
2668
2827
 
2669
2828
  // src/js/modules/format/formatting.ts
2670
- function beforeSetNumber(fullNumber, dialCode, separateDialCode, selectedCountryData) {
2829
+ var beforeSetNumber = (fullNumber, dialCode, separateDialCode, selectedCountryData) => {
2671
2830
  let number = fullNumber;
2672
2831
  if (separateDialCode) {
2673
2832
  if (dialCode) {
@@ -2677,8 +2836,8 @@ function beforeSetNumber(fullNumber, dialCode, separateDialCode, selectedCountry
2677
2836
  }
2678
2837
  }
2679
2838
  return number;
2680
- }
2681
- function formatNumberAsYouType(fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) {
2839
+ };
2840
+ var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) => {
2682
2841
  const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
2683
2842
  const { dialCode } = selectedCountryData;
2684
2843
  if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
@@ -2686,10 +2845,10 @@ function formatNumberAsYouType(fullNumber, telInputValue, utils, selectedCountry
2686
2845
  return afterDialCode.trim();
2687
2846
  }
2688
2847
  return result;
2689
- }
2848
+ };
2690
2849
 
2691
2850
  // src/js/modules/format/caret.ts
2692
- function translateCursorPosition(relevantChars, formattedValue, prevCaretPos, isDeleteForwards) {
2851
+ var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
2693
2852
  if (prevCaretPos === 0 && !isDeleteForwards) {
2694
2853
  return 0;
2695
2854
  }
@@ -2706,7 +2865,7 @@ function translateCursorPosition(relevantChars, formattedValue, prevCaretPos, is
2706
2865
  }
2707
2866
  }
2708
2867
  return formattedValue.length;
2709
- }
2868
+ };
2710
2869
 
2711
2870
  // src/js/modules/data/nanp-regionless.ts
2712
2871
  var regionlessNanpNumbers = [
@@ -2730,7 +2889,7 @@ var regionlessNanpNumbers = [
2730
2889
  ];
2731
2890
  var isRegionlessNanp = (number) => {
2732
2891
  const numeric = getNumeric(number);
2733
- if (numeric.charAt(0) === "1") {
2892
+ if (numeric.startsWith(DIAL.NANP) && numeric.length >= 4) {
2734
2893
  const areaCode = numeric.substring(1, 4);
2735
2894
  return regionlessNanpNumbers.includes(areaCode);
2736
2895
  }
@@ -2739,7 +2898,7 @@ var isRegionlessNanp = (number) => {
2739
2898
 
2740
2899
  // src/js/intl-tel-input.ts
2741
2900
  for (const c of data_default) {
2742
- c.name = countries_default[c.iso2];
2901
+ c.name = en_default[c.iso2];
2743
2902
  }
2744
2903
  var id = 0;
2745
2904
  var iso2Set = new Set(data_default.map((c) => c.iso2));
@@ -2748,7 +2907,7 @@ var Iti = class _Iti {
2748
2907
  constructor(input, customOptions = {}) {
2749
2908
  this.id = id++;
2750
2909
  this.options = { ...defaults, ...customOptions };
2751
- applyOptionSideEffects(this.options);
2910
+ applyOptionSideEffects(this.options, en_default);
2752
2911
  this.ui = new UI(input, this.options, this.id);
2753
2912
  this.isAndroid = _Iti._getIsAndroid();
2754
2913
  this.promise = this._createInitPromises();
@@ -2807,7 +2966,7 @@ var Iti = class _Iti {
2807
2966
  const dialCode = this._getDialCode(val);
2808
2967
  const isRegionlessNanpNumber = isRegionlessNanp(val);
2809
2968
  const { initialCountry, geoIpLookup } = this.options;
2810
- const isAutoCountry = initialCountry === "auto" && geoIpLookup;
2969
+ const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
2811
2970
  if (dialCode && !isRegionlessNanpNumber) {
2812
2971
  this._updateCountryFromNumber(val);
2813
2972
  } else if (!isAutoCountry || overrideAutoCountry) {
@@ -2816,7 +2975,7 @@ var Iti = class _Iti {
2816
2975
  this._setCountry(lowerInitialCountry);
2817
2976
  } else {
2818
2977
  if (dialCode && isRegionlessNanpNumber) {
2819
- this._setCountry("us");
2978
+ this._setCountry(US.ISO2);
2820
2979
  } else {
2821
2980
  this._setCountry("");
2822
2981
  }
@@ -2854,7 +3013,7 @@ var Iti = class _Iti {
2854
3013
  _initDropdownListeners() {
2855
3014
  const signal = this.abortController.signal;
2856
3015
  const handleLabelClick = (e) => {
2857
- if (this.ui.dropdownContent.classList.contains("iti__hide")) {
3016
+ if (this.ui.dropdownContent.classList.contains(CLASSES.HIDE)) {
2858
3017
  this.ui.telInput.focus();
2859
3018
  } else {
2860
3019
  e.preventDefault();
@@ -2865,22 +3024,30 @@ var Iti = class _Iti {
2865
3024
  label.addEventListener("click", handleLabelClick, { signal });
2866
3025
  }
2867
3026
  const handleClickSelectedCountry = () => {
2868
- const dropdownClosed = this.ui.dropdownContent.classList.contains("iti__hide");
3027
+ const dropdownClosed = this.ui.dropdownContent.classList.contains(
3028
+ CLASSES.HIDE
3029
+ );
2869
3030
  if (dropdownClosed && !this.ui.telInput.disabled && !this.ui.telInput.readOnly) {
2870
3031
  this._openDropdown();
2871
3032
  }
2872
3033
  };
2873
- this.ui.selectedCountry.addEventListener("click", handleClickSelectedCountry, {
2874
- signal
2875
- });
3034
+ this.ui.selectedCountry.addEventListener(
3035
+ "click",
3036
+ handleClickSelectedCountry,
3037
+ {
3038
+ signal
3039
+ }
3040
+ );
2876
3041
  const handleCountryContainerKeydown = (e) => {
2877
- const isDropdownHidden = this.ui.dropdownContent.classList.contains("iti__hide");
2878
- if (isDropdownHidden && ["ArrowUp", "ArrowDown", " ", "Enter"].includes(e.key)) {
3042
+ const isDropdownHidden = this.ui.dropdownContent.classList.contains(
3043
+ CLASSES.HIDE
3044
+ );
3045
+ if (isDropdownHidden && [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.SPACE, KEYS.ENTER].includes(e.key)) {
2879
3046
  e.preventDefault();
2880
3047
  e.stopPropagation();
2881
3048
  this._openDropdown();
2882
3049
  }
2883
- if (e.key === "Tab") {
3050
+ if (e.key === KEYS.TAB) {
2884
3051
  this._closeDropdown();
2885
3052
  }
2886
3053
  };
@@ -2911,7 +3078,7 @@ var Iti = class _Iti {
2911
3078
  } else {
2912
3079
  this.resolveUtilsScriptPromise();
2913
3080
  }
2914
- const isAutoCountry = initialCountry === "auto" && geoIpLookup;
3081
+ const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
2915
3082
  if (isAutoCountry && !this.selectedCountryData.iso2) {
2916
3083
  this._loadAutoCountry();
2917
3084
  } else {
@@ -2964,7 +3131,7 @@ var Iti = class _Iti {
2964
3131
  countrySearch
2965
3132
  } = this.options;
2966
3133
  let userOverrideFormatting = false;
2967
- if (/\p{L}/u.test(this.ui.telInput.value)) {
3134
+ if (REGEX.ALPHA_UNICODE.test(this.ui.telInput.value)) {
2968
3135
  userOverrideFormatting = true;
2969
3136
  }
2970
3137
  const handleInputEvent = (e) => {
@@ -2982,11 +3149,11 @@ var Iti = class _Iti {
2982
3149
  if (this._updateCountryFromNumber(this.ui.telInput.value)) {
2983
3150
  this._triggerCountryChange();
2984
3151
  }
2985
- const isFormattingChar = e?.data && /[^+0-9]/.test(e.data);
2986
- const isPaste = e?.inputType === "insertFromPaste" && this.ui.telInput.value;
3152
+ const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
3153
+ const isPaste = e?.inputType === INPUT_TYPES.PASTE && this.ui.telInput.value;
2987
3154
  if (isFormattingChar || isPaste && !strictMode) {
2988
3155
  userOverrideFormatting = true;
2989
- } else if (!/[^+0-9]/.test(this.ui.telInput.value)) {
3156
+ } else if (!REGEX.NON_PLUS_NUMERIC.test(this.ui.telInput.value)) {
2990
3157
  userOverrideFormatting = false;
2991
3158
  }
2992
3159
  const isSetNumber = e?.detail && e.detail["isSetNumber"];
@@ -2997,10 +3164,10 @@ var Iti = class _Iti {
2997
3164
  currentCaretPos
2998
3165
  );
2999
3166
  const relevantCharsBeforeCaret = valueBeforeCaret.replace(
3000
- /[^+0-9]/g,
3167
+ REGEX.NON_PLUS_NUMERIC_GLOBAL,
3001
3168
  ""
3002
3169
  ).length;
3003
- const isDeleteForwards = e?.inputType === "deleteContentForward";
3170
+ const isDeleteForwards = e?.inputType === INPUT_TYPES.DELETE_FWD;
3004
3171
  const fullNumber = this._getFullNumber();
3005
3172
  const formattedValue = formatNumberAsYouType(
3006
3173
  fullNumber,
@@ -3019,9 +3186,13 @@ var Iti = class _Iti {
3019
3186
  this.ui.telInput.setSelectionRange(newCaretPos, newCaretPos);
3020
3187
  }
3021
3188
  };
3022
- this.ui.telInput.addEventListener("input", handleInputEvent, {
3023
- signal: this.abortController.signal
3024
- });
3189
+ this.ui.telInput.addEventListener(
3190
+ "input",
3191
+ handleInputEvent,
3192
+ {
3193
+ signal: this.abortController.signal
3194
+ }
3195
+ );
3025
3196
  }
3026
3197
  _maybeBindKeydownListener() {
3027
3198
  const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.options;
@@ -3072,7 +3243,7 @@ var Iti = class _Iti {
3072
3243
  const pasted = e.clipboardData.getData("text");
3073
3244
  const initialCharSelected = selStart === 0 && selEnd > 0;
3074
3245
  const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
3075
- const allowedChars = pasted.replace(/[^0-9+]/g, "");
3246
+ const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
3076
3247
  const hasLeadingPlus = allowedChars.startsWith("+");
3077
3248
  const numerics = allowedChars.replace(/\+/g, "");
3078
3249
  const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
@@ -3124,8 +3295,8 @@ var Iti = class _Iti {
3124
3295
  if (fixDropdownWidth) {
3125
3296
  this.ui.dropdownContent.style.width = `${this.ui.telInput.offsetWidth}px`;
3126
3297
  }
3127
- this.ui.dropdownContent.classList.remove("iti__hide");
3128
- this.ui.selectedCountry.setAttribute("aria-expanded", "true");
3298
+ this.ui.dropdownContent.classList.remove(CLASSES.HIDE);
3299
+ this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
3129
3300
  this._setDropdownPosition();
3130
3301
  if (countrySearch) {
3131
3302
  const firstCountryItem = this.ui.countryList.firstElementChild;
@@ -3136,8 +3307,8 @@ var Iti = class _Iti {
3136
3307
  this.ui.searchInput.focus();
3137
3308
  }
3138
3309
  this._bindDropdownListeners();
3139
- this.ui.dropdownArrow.classList.add("iti__arrow--up");
3140
- this._trigger("open:countrydropdown");
3310
+ this.ui.dropdownArrow.classList.add(CLASSES.ARROW_UP);
3311
+ this._trigger(EVENTS.OPEN_COUNTRY_DROPDOWN);
3141
3312
  }
3142
3313
  //* Set the dropdown position
3143
3314
  _setDropdownPosition() {
@@ -3160,20 +3331,38 @@ var Iti = class _Iti {
3160
3331
  //* We only bind dropdown listeners when the dropdown is open.
3161
3332
  _bindDropdownListeners() {
3162
3333
  const signal = this.dropdownAbortController.signal;
3334
+ this._bindDropdownMouseoverListener(signal);
3335
+ this._bindDropdownCountryClickListener(signal);
3336
+ this._bindDropdownClickOffListener(signal);
3337
+ this._bindDropdownKeydownListener(signal);
3338
+ if (this.options.countrySearch) {
3339
+ this._bindDropdownSearchListeners(signal);
3340
+ }
3341
+ }
3342
+ //* When mouse over a list item, just highlight that one
3343
+ //* we add the class "highlight", so if they hit "enter" we know which one to select.
3344
+ _bindDropdownMouseoverListener(signal) {
3163
3345
  const handleMouseoverCountryList = (e) => {
3164
3346
  const listItem = e.target?.closest(
3165
- ".iti__country"
3347
+ `.${CLASSES.COUNTRY_ITEM}`
3166
3348
  );
3167
3349
  if (listItem) {
3168
3350
  this.ui.highlightListItem(listItem, false);
3169
3351
  }
3170
3352
  };
3171
- this.ui.countryList.addEventListener("mouseover", handleMouseoverCountryList, {
3172
- signal
3173
- });
3353
+ this.ui.countryList.addEventListener(
3354
+ "mouseover",
3355
+ handleMouseoverCountryList,
3356
+ {
3357
+ signal
3358
+ }
3359
+ );
3360
+ }
3361
+ //* Listen for country selection.
3362
+ _bindDropdownCountryClickListener(signal) {
3174
3363
  const handleClickCountryList = (e) => {
3175
3364
  const listItem = e.target?.closest(
3176
- ".iti__country"
3365
+ `.${CLASSES.COUNTRY_ITEM}`
3177
3366
  );
3178
3367
  if (listItem) {
3179
3368
  this._selectListItem(listItem);
@@ -3182,6 +3371,10 @@ var Iti = class _Iti {
3182
3371
  this.ui.countryList.addEventListener("click", handleClickCountryList, {
3183
3372
  signal
3184
3373
  });
3374
+ }
3375
+ //* Click off to close (except when this initial opening click is bubbling up).
3376
+ //* We cannot just stopPropagation as it may be needed to close another instance.
3377
+ _bindDropdownClickOffListener(signal) {
3185
3378
  const handleClickOffToClose = (e) => {
3186
3379
  const target = e.target;
3187
3380
  const clickedInsideDropdown = !!target.closest(
@@ -3198,21 +3391,33 @@ var Iti = class _Iti {
3198
3391
  { signal }
3199
3392
  );
3200
3393
  }, 0);
3394
+ }
3395
+ //* Listen for up/down scrolling, enter to select, or escape to close.
3396
+ //* Use keydown as keypress doesn't fire for non-char keys and we want to catch if they
3397
+ //* just hit down and hold it to scroll down (no keyup event).
3398
+ //* Listen on the document because that's where key events are triggered if no input has focus.
3399
+ _bindDropdownKeydownListener(signal) {
3201
3400
  let query = "";
3202
3401
  let queryTimer = null;
3203
3402
  const handleKeydownOnDropdown = (e) => {
3204
- if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
3403
+ const allowedKeys = [
3404
+ KEYS.ARROW_UP,
3405
+ KEYS.ARROW_DOWN,
3406
+ KEYS.ENTER,
3407
+ KEYS.ESC
3408
+ ];
3409
+ if (allowedKeys.includes(e.key)) {
3205
3410
  e.preventDefault();
3206
3411
  e.stopPropagation();
3207
- if (e.key === "ArrowUp" || e.key === "ArrowDown") {
3412
+ if (e.key === KEYS.ARROW_UP || e.key === KEYS.ARROW_DOWN) {
3208
3413
  this._handleUpDownKey(e.key);
3209
- } else if (e.key === "Enter") {
3414
+ } else if (e.key === KEYS.ENTER) {
3210
3415
  this._handleEnterKey();
3211
- } else if (e.key === "Escape") {
3416
+ } else if (e.key === KEYS.ESC) {
3212
3417
  this._closeDropdown();
3213
3418
  }
3214
3419
  }
3215
- if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
3420
+ if (!this.options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
3216
3421
  e.stopPropagation();
3217
3422
  if (queryTimer) {
3218
3423
  clearTimeout(queryTimer);
@@ -3221,53 +3426,51 @@ var Iti = class _Iti {
3221
3426
  this._searchForCountry(query);
3222
3427
  queryTimer = setTimeout(() => {
3223
3428
  query = "";
3224
- }, 1e3);
3429
+ }, TIMINGS.HIDDEN_SEARCH_RESET_MS);
3225
3430
  }
3226
3431
  };
3227
3432
  document.addEventListener("keydown", handleKeydownOnDropdown, { signal });
3228
- if (this.options.countrySearch) {
3229
- const doFilter = () => {
3230
- const inputQuery = this.ui.searchInput.value.trim();
3231
- this._filterCountriesByQuery(inputQuery);
3232
- if (this.ui.searchInput.value) {
3233
- this.ui.searchClearButton.classList.remove("iti__hide");
3234
- } else {
3235
- this.ui.searchClearButton.classList.add("iti__hide");
3236
- }
3237
- };
3238
- let keyupTimer = null;
3239
- const handleSearchChange = () => {
3240
- if (keyupTimer) {
3241
- clearTimeout(keyupTimer);
3242
- }
3243
- keyupTimer = setTimeout(() => {
3244
- doFilter();
3245
- keyupTimer = null;
3246
- }, 100);
3247
- };
3248
- this.ui.searchInput.addEventListener("input", handleSearchChange, {
3249
- signal
3250
- });
3251
- const handleSearchClear = () => {
3252
- this.ui.searchInput.value = "";
3253
- this.ui.searchInput.focus();
3433
+ }
3434
+ //* Search input listeners when countrySearch enabled.
3435
+ _bindDropdownSearchListeners(signal) {
3436
+ const doFilter = () => {
3437
+ const inputQuery = this.ui.searchInput.value.trim();
3438
+ this._filterCountriesByQuery(inputQuery);
3439
+ if (this.ui.searchInput.value) {
3440
+ this.ui.searchClearButton.classList.remove(CLASSES.HIDE);
3441
+ } else {
3442
+ this.ui.searchClearButton.classList.add(CLASSES.HIDE);
3443
+ }
3444
+ };
3445
+ let keyupTimer = null;
3446
+ const handleSearchChange = () => {
3447
+ if (keyupTimer) {
3448
+ clearTimeout(keyupTimer);
3449
+ }
3450
+ keyupTimer = setTimeout(() => {
3254
3451
  doFilter();
3255
- };
3256
- this.ui.searchClearButton.addEventListener("click", handleSearchClear, {
3257
- signal
3258
- });
3259
- }
3452
+ keyupTimer = null;
3453
+ }, 100);
3454
+ };
3455
+ this.ui.searchInput.addEventListener("input", handleSearchChange, {
3456
+ signal
3457
+ });
3458
+ const handleSearchClear = () => {
3459
+ this.ui.searchInput.value = "";
3460
+ this.ui.searchInput.focus();
3461
+ doFilter();
3462
+ };
3463
+ this.ui.searchClearButton.addEventListener("click", handleSearchClear, {
3464
+ signal
3465
+ });
3260
3466
  }
3261
3467
  //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
3262
3468
  _searchForCountry(query) {
3263
- for (const c of this.countries) {
3264
- const startsWith = c.name.substring(0, query.length).toLowerCase() === query;
3265
- if (startsWith) {
3266
- const listItem = c.nodeById[this.id];
3267
- this.ui.highlightListItem(listItem, false);
3268
- this.ui.scrollTo(listItem);
3269
- break;
3270
- }
3469
+ const match = findFirstCountryStartingWith(this.countries, query);
3470
+ if (match) {
3471
+ const listItem = match.nodeById[this.id];
3472
+ this.ui.highlightListItem(listItem, false);
3473
+ this.ui.scrollTo(listItem);
3271
3474
  }
3272
3475
  }
3273
3476
  //* Country search: Filter the countries according to the search query.
@@ -3276,47 +3479,15 @@ var Iti = class _Iti {
3276
3479
  if (query === "") {
3277
3480
  matchedCountries = this.countries;
3278
3481
  } else {
3279
- matchedCountries = this._getMatchedCountries(query);
3482
+ matchedCountries = getMatchedCountries(this.countries, query);
3280
3483
  }
3281
3484
  this.ui.filterCountries(matchedCountries);
3282
3485
  }
3283
- _getMatchedCountries(query) {
3284
- const normalisedQuery = normaliseString(query);
3285
- const iso2Matches = [];
3286
- const nameStartWith = [];
3287
- const nameContains = [];
3288
- const dialCodeMatches = [];
3289
- const dialCodeContains = [];
3290
- const initialsMatches = [];
3291
- for (const c of this.countries) {
3292
- if (c.iso2 === normalisedQuery) {
3293
- iso2Matches.push(c);
3294
- } else if (c.normalisedName.startsWith(normalisedQuery)) {
3295
- nameStartWith.push(c);
3296
- } else if (c.normalisedName.includes(normalisedQuery)) {
3297
- nameContains.push(c);
3298
- } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
3299
- dialCodeMatches.push(c);
3300
- } else if (c.dialCodePlus.includes(normalisedQuery)) {
3301
- dialCodeContains.push(c);
3302
- } else if (c.initials.includes(normalisedQuery)) {
3303
- initialsMatches.push(c);
3304
- }
3305
- }
3306
- return [
3307
- ...iso2Matches.sort((a, b) => a.priority - b.priority),
3308
- ...nameStartWith.sort((a, b) => a.priority - b.priority),
3309
- ...nameContains.sort((a, b) => a.priority - b.priority),
3310
- ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
3311
- ...dialCodeContains.sort((a, b) => a.priority - b.priority),
3312
- ...initialsMatches.sort((a, b) => a.priority - b.priority)
3313
- ];
3314
- }
3315
3486
  //* Highlight the next/prev item in the list (and ensure it is visible).
3316
3487
  _handleUpDownKey(key) {
3317
- let next = key === "ArrowUp" ? this.ui.highlightedItem?.previousElementSibling : this.ui.highlightedItem?.nextElementSibling;
3488
+ let next = key === KEYS.ARROW_UP ? this.ui.highlightedItem?.previousElementSibling : this.ui.highlightedItem?.nextElementSibling;
3318
3489
  if (!next && this.ui.countryList.childElementCount > 1) {
3319
- next = key === "ArrowUp" ? this.ui.countryList.lastElementChild : this.ui.countryList.firstElementChild;
3490
+ next = key === KEYS.ARROW_UP ? this.ui.countryList.lastElementChild : this.ui.countryList.firstElementChild;
3320
3491
  }
3321
3492
  if (next) {
3322
3493
  this.ui.scrollTo(next);
@@ -3389,7 +3560,7 @@ var Iti = class _Iti {
3389
3560
  if (!selectedIso2 && this.defaultCountry && iso2Codes.includes(this.defaultCountry)) {
3390
3561
  return this.defaultCountry;
3391
3562
  }
3392
- const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
3563
+ const isRegionlessNanpNumber = selectedDialCode === DIAL.NANP && isRegionlessNanp(numeric);
3393
3564
  if (isRegionlessNanpNumber) {
3394
3565
  return null;
3395
3566
  }
@@ -3428,7 +3599,7 @@ var Iti = class _Iti {
3428
3599
  this.defaultCountry = this.selectedCountryData.iso2;
3429
3600
  }
3430
3601
  if (this.ui.selectedCountry) {
3431
- const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
3602
+ const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
3432
3603
  let ariaLabel, title;
3433
3604
  if (iso2) {
3434
3605
  const { name, dialCode } = this.selectedCountryData;
@@ -3440,7 +3611,7 @@ var Iti = class _Iti {
3440
3611
  }
3441
3612
  this.ui.selectedCountryInner.className = flagClass;
3442
3613
  this.ui.selectedCountry.setAttribute("title", title);
3443
- this.ui.selectedCountry.setAttribute("aria-label", ariaLabel);
3614
+ this.ui.selectedCountry.setAttribute(ARIA.LABEL, ariaLabel);
3444
3615
  }
3445
3616
  if (separateDialCode) {
3446
3617
  const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
@@ -3508,10 +3679,10 @@ var Iti = class _Iti {
3508
3679
  }
3509
3680
  //* Called when the user selects a list item from the dropdown.
3510
3681
  _selectListItem(listItem) {
3511
- const iso2 = listItem.dataset.countryCode;
3682
+ const iso2 = listItem.dataset[DATA_KEYS.COUNTRY_CODE];
3512
3683
  const countryChanged = this._setCountry(iso2);
3513
3684
  this._closeDropdown();
3514
- const dialCode = listItem.dataset.dialCode;
3685
+ const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
3515
3686
  this._updateDialCode(dialCode);
3516
3687
  if (this.options.formatOnDisplay) {
3517
3688
  this._updateValFromNumber(this.ui.telInput.value);
@@ -3523,24 +3694,24 @@ var Iti = class _Iti {
3523
3694
  }
3524
3695
  //* Close the dropdown and unbind any listeners.
3525
3696
  _closeDropdown() {
3526
- if (this.ui.dropdownContent.classList.contains("iti__hide")) {
3697
+ if (this.ui.dropdownContent.classList.contains(CLASSES.HIDE)) {
3527
3698
  return;
3528
3699
  }
3529
- this.ui.dropdownContent.classList.add("iti__hide");
3530
- this.ui.selectedCountry.setAttribute("aria-expanded", "false");
3700
+ this.ui.dropdownContent.classList.add(CLASSES.HIDE);
3701
+ this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
3531
3702
  if (this.ui.highlightedItem) {
3532
- this.ui.highlightedItem.setAttribute("aria-selected", "false");
3703
+ this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
3533
3704
  }
3534
3705
  if (this.options.countrySearch) {
3535
- this.ui.searchInput.removeAttribute("aria-activedescendant");
3706
+ this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
3536
3707
  }
3537
- this.ui.dropdownArrow.classList.remove("iti__arrow--up");
3708
+ this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
3538
3709
  this.dropdownAbortController.abort();
3539
3710
  this.dropdownAbortController = null;
3540
3711
  if (this.options.dropdownContainer) {
3541
3712
  this.ui.dropdown.remove();
3542
3713
  }
3543
- this._trigger("close:countrydropdown");
3714
+ this._trigger(EVENTS.CLOSE_COUNTRY_DROPDOWN);
3544
3715
  }
3545
3716
  //* Replace any existing dial code with the new one
3546
3717
  //* Note: called from _selectListItem and setCountry
@@ -3612,16 +3783,16 @@ var Iti = class _Iti {
3612
3783
  }
3613
3784
  //* Trigger the 'countrychange' event.
3614
3785
  _triggerCountryChange() {
3615
- this._trigger("countrychange");
3786
+ this._trigger(EVENTS.COUNTRY_CHANGE);
3616
3787
  }
3617
3788
  //**************************
3618
3789
  //* SECRET PUBLIC METHODS
3619
3790
  //**************************
3620
3791
  //* This is called when the geoip call returns.
3621
3792
  handleAutoCountry() {
3622
- if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
3793
+ if (this.options.initialCountry === INITIAL_COUNTRY.AUTO && intlTelInput.autoCountry) {
3623
3794
  this.defaultCountry = intlTelInput.autoCountry;
3624
- const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains("iti__globe");
3795
+ const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
3625
3796
  if (!hasSelectedCountryOrGlobe) {
3626
3797
  this.setCountry(this.defaultCountry);
3627
3798
  }
@@ -3691,7 +3862,7 @@ var Iti = class _Iti {
3691
3862
  this.selectedCountryData.iso2
3692
3863
  );
3693
3864
  }
3694
- return -99;
3865
+ return SENTINELS.UNKNOWN_NUMBER_TYPE;
3695
3866
  }
3696
3867
  //* Get the country data for the currently selected country.
3697
3868
  getSelectedCountryData() {
@@ -3703,15 +3874,15 @@ var Iti = class _Iti {
3703
3874
  const { iso2 } = this.selectedCountryData;
3704
3875
  return intlTelInput.utils.getValidationError(this._getFullNumber(), iso2);
3705
3876
  }
3706
- return -99;
3877
+ return SENTINELS.UNKNOWN_VALIDATION_ERROR;
3707
3878
  }
3708
3879
  //* Validate the input val using number length only
3709
3880
  isValidNumber() {
3710
3881
  const { dialCode, iso2 } = this.selectedCountryData;
3711
- if (dialCode === "44" && intlTelInput.utils) {
3882
+ if (dialCode === UK.DIAL_CODE && intlTelInput.utils) {
3712
3883
  const number = this._getFullNumber();
3713
3884
  const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
3714
- if (coreNumber[0] === "7" && coreNumber.length !== 10) {
3885
+ if (coreNumber[0] === UK.MOBILE_PREFIX && coreNumber.length !== UK.MOBILE_CORE_LENGTH) {
3715
3886
  return false;
3716
3887
  }
3717
3888
  }
@@ -3738,7 +3909,7 @@ var Iti = class _Iti {
3738
3909
  }
3739
3910
  const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
3740
3911
  const val = this._getFullNumber();
3741
- const alphaCharPosition = val.search(/\p{L}/u);
3912
+ const alphaCharPosition = val.search(REGEX.ALPHA_UNICODE);
3742
3913
  const hasAlphaChar = alphaCharPosition > -1;
3743
3914
  if (hasAlphaChar && !this.options.allowPhonewords) {
3744
3915
  const beforeAlphaChar = val.substring(0, alphaCharPosition);
@@ -3779,7 +3950,7 @@ var Iti = class _Iti {
3779
3950
  if (countryChanged) {
3780
3951
  this._triggerCountryChange();
3781
3952
  }
3782
- this._trigger("input", { isSetNumber: true });
3953
+ this._trigger(EVENTS.INPUT, { isSetNumber: true });
3783
3954
  }
3784
3955
  //* Set the placeholder number typ
3785
3956
  setPlaceholderNumberType(type) {
@@ -3860,7 +4031,7 @@ var intlTelInput = Object.assign(
3860
4031
  attachUtils,
3861
4032
  startedLoadingUtilsScript: false,
3862
4033
  startedLoadingAutoCountry: false,
3863
- version: "25.11.0"
4034
+ version: "25.11.1"
3864
4035
  }
3865
4036
  );
3866
4037
  var intl_tel_input_default = intlTelInput;