intl-tel-input 25.8.0 → 25.8.2

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 CHANGED
@@ -77,16 +77,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
77
77
  ## Getting Started (Using a CDN)
78
78
  1. Add the CSS
79
79
  ```html
80
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/css/intlTelInput.css">
80
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/css/intlTelInput.css">
81
81
  ```
82
82
 
83
83
  2. Add the plugin script and initialise it on your input element
84
84
  ```html
85
- <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/intlTelInput.min.js"></script>
85
+ <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/intlTelInput.min.js"></script>
86
86
  <script>
87
87
  const input = document.querySelector("#phone");
88
88
  window.intlTelInput(input, {
89
- loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/utils.js"),
89
+ loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/utils.js"),
90
90
  });
91
91
  </script>
92
92
  ```
@@ -284,9 +284,9 @@ intlTelInput(input, {
284
284
  ad: "Andorra",
285
285
  ...
286
286
  // Aria label for the selected country element
287
- selectedCountryAriaLabel: "Selected country",
287
+ selectedCountryAriaLabel: "Change country, selected ${country}",
288
288
  // Screen reader text for when no country is selected
289
- noCountrySelected: "No country selected",
289
+ noCountrySelected: "Select country",
290
290
  // Aria label for the country list element
291
291
  countryListAriaLabel: "List of countries",
292
292
  // Placeholder for the search input in the dropdown
@@ -322,7 +322,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
322
322
  ```js
323
323
  // (A) import utils module from a CDN
324
324
  intlTelInput(htmlInputElement, {
325
- loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/utils.js"),
325
+ loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/utils.js"),
326
326
  });
327
327
 
328
328
  // (B) import utils module from your own hosted version of utils.js
@@ -606,7 +606,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
606
606
  ```js
607
607
  // (A) import utils module from a CDN
608
608
  intlTelInput(htmlInputElement, {
609
- loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/utils.js"),
609
+ loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/utils.js"),
610
610
  });
611
611
 
612
612
  // (B) import utils module from your own hosted version of utils.js
package/angular/README.md CHANGED
@@ -29,7 +29,7 @@ import "intl-tel-input/styles";
29
29
 
30
30
  See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) for a more fleshed-out example of how to handle validation.
31
31
 
32
- A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/utils.js"`.
32
+ A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/utils.js"`.
33
33
 
34
34
  ## Props
35
35
  Here's a list of all of the current props you can pass to the IntlTelInput Angular component.
@@ -1588,8 +1588,8 @@ var countries_default = countryTranslations;
1588
1588
 
1589
1589
  // angular/build/temp/intl-tel-input/i18n/en/interface.js
1590
1590
  var interfaceTranslations = {
1591
- selectedCountryAriaLabel: "Selected country",
1592
- noCountrySelected: "No country selected",
1591
+ selectedCountryAriaLabel: "Change country, selected ${country}",
1592
+ noCountrySelected: "Select country",
1593
1593
  countryListAriaLabel: "List of countries",
1594
1594
  searchPlaceholder: "Search",
1595
1595
  clearSearchAriaLabel: "Clear search",
@@ -1930,7 +1930,7 @@ var Iti = class _Iti {
1930
1930
  type: "button",
1931
1931
  class: "iti__selected-country",
1932
1932
  "aria-expanded": "false",
1933
- "aria-label": this.options.i18n.selectedCountryAriaLabel,
1933
+ "aria-label": this.options.i18n.noCountrySelected,
1934
1934
  "aria-haspopup": "dialog",
1935
1935
  "aria-controls": `iti-${this.id}__dropdown-content`
1936
1936
  }, this.countryContainer);
@@ -1942,7 +1942,6 @@ var Iti = class _Iti {
1942
1942
  }
1943
1943
  const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
1944
1944
  this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
1945
- this.selectedCountryA11yText = createEl("span", { class: "iti__a11y-text" }, this.selectedCountryInner);
1946
1945
  if (allowDropdown) {
1947
1946
  this.dropdownArrow = createEl("div", { class: "iti__arrow", "aria-hidden": "true" }, selectedCountryPrimary);
1948
1947
  }
@@ -2153,7 +2152,8 @@ var Iti = class _Iti {
2153
2152
  label.addEventListener("click", this._handleLabelClick);
2154
2153
  }
2155
2154
  this._handleClickSelectedCountry = () => {
2156
- if (this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly) {
2155
+ const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
2156
+ if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
2157
2157
  this._openDropdown();
2158
2158
  }
2159
2159
  };
@@ -2362,14 +2362,16 @@ var Iti = class _Iti {
2362
2362
  }
2363
2363
  };
2364
2364
  this.countryList.addEventListener("click", this._handleClickCountryList);
2365
- let isOpening = true;
2366
- this._handleClickOffToClose = () => {
2367
- if (!isOpening) {
2365
+ this._handleClickOffToClose = (e) => {
2366
+ const target = e.target;
2367
+ const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
2368
+ if (!clickedInsideDropdown) {
2368
2369
  this._closeDropdown();
2369
2370
  }
2370
- isOpening = false;
2371
2371
  };
2372
- document.documentElement.addEventListener("click", this._handleClickOffToClose);
2372
+ setTimeout(() => {
2373
+ document.documentElement.addEventListener("click", this._handleClickOffToClose);
2374
+ }, 0);
2373
2375
  let query = "";
2374
2376
  let queryTimer = null;
2375
2377
  this._handleKeydownOnDropdown = (e) => {
@@ -2422,14 +2424,12 @@ var Iti = class _Iti {
2422
2424
  }, 100);
2423
2425
  };
2424
2426
  this.searchInput.addEventListener("input", this._handleSearchChange);
2425
- this._handleSearchClear = (e) => {
2426
- e.stopPropagation();
2427
+ this._handleSearchClear = () => {
2427
2428
  this.searchInput.value = "";
2428
2429
  this.searchInput.focus();
2429
2430
  doFilter();
2430
2431
  };
2431
2432
  this.searchClearButton.addEventListener("click", this._handleSearchClear);
2432
- this.searchInput.addEventListener("click", (e) => e.stopPropagation());
2433
2433
  }
2434
2434
  }
2435
2435
  //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -2647,16 +2647,16 @@ var Iti = class _Iti {
2647
2647
  }
2648
2648
  if (this.selectedCountryInner) {
2649
2649
  let flagClass = "";
2650
- let a11yText = "";
2650
+ let ariaLabel = "";
2651
2651
  if (iso2 && showFlags) {
2652
2652
  flagClass = `iti__flag iti__${iso2}`;
2653
- a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
2653
+ ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
2654
2654
  } else {
2655
2655
  flagClass = "iti__flag iti__globe";
2656
- a11yText = i18n.noCountrySelected;
2656
+ ariaLabel = i18n.noCountrySelected;
2657
2657
  }
2658
2658
  this.selectedCountryInner.className = flagClass;
2659
- this.selectedCountryA11yText.textContent = a11yText;
2659
+ this.selectedCountry.setAttribute("aria-label", ariaLabel);
2660
2660
  }
2661
2661
  this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
2662
2662
  if (separateDialCode) {
@@ -2713,7 +2713,7 @@ var Iti = class _Iti {
2713
2713
  } else if (iso2) {
2714
2714
  title = this.selectedCountryData.name;
2715
2715
  } else {
2716
- title = "Unknown";
2716
+ title = this.options.i18n.noCountrySelected;
2717
2717
  }
2718
2718
  this.selectedCountry.setAttribute("title", title);
2719
2719
  }
@@ -3108,7 +3108,7 @@ var intlTelInput = Object.assign((input, options) => {
3108
3108
  attachUtils,
3109
3109
  startedLoadingUtilsScript: false,
3110
3110
  startedLoadingAutoCountry: false,
3111
- version: "25.8.0"
3111
+ version: "25.8.2"
3112
3112
  });
3113
3113
  var intl_tel_input_default = intlTelInput;
3114
3114
 
@@ -1588,8 +1588,8 @@ var countries_default = countryTranslations;
1588
1588
 
1589
1589
  // angular/build/temp/intl-tel-input/i18n/en/interface.js
1590
1590
  var interfaceTranslations = {
1591
- selectedCountryAriaLabel: "Selected country",
1592
- noCountrySelected: "No country selected",
1591
+ selectedCountryAriaLabel: "Change country, selected ${country}",
1592
+ noCountrySelected: "Select country",
1593
1593
  countryListAriaLabel: "List of countries",
1594
1594
  searchPlaceholder: "Search",
1595
1595
  clearSearchAriaLabel: "Clear search",
@@ -1930,7 +1930,7 @@ var Iti = class _Iti {
1930
1930
  type: "button",
1931
1931
  class: "iti__selected-country",
1932
1932
  "aria-expanded": "false",
1933
- "aria-label": this.options.i18n.selectedCountryAriaLabel,
1933
+ "aria-label": this.options.i18n.noCountrySelected,
1934
1934
  "aria-haspopup": "dialog",
1935
1935
  "aria-controls": `iti-${this.id}__dropdown-content`
1936
1936
  }, this.countryContainer);
@@ -1942,7 +1942,6 @@ var Iti = class _Iti {
1942
1942
  }
1943
1943
  const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
1944
1944
  this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
1945
- this.selectedCountryA11yText = createEl("span", { class: "iti__a11y-text" }, this.selectedCountryInner);
1946
1945
  if (allowDropdown) {
1947
1946
  this.dropdownArrow = createEl("div", { class: "iti__arrow", "aria-hidden": "true" }, selectedCountryPrimary);
1948
1947
  }
@@ -2153,7 +2152,8 @@ var Iti = class _Iti {
2153
2152
  label.addEventListener("click", this._handleLabelClick);
2154
2153
  }
2155
2154
  this._handleClickSelectedCountry = () => {
2156
- if (this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly) {
2155
+ const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
2156
+ if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
2157
2157
  this._openDropdown();
2158
2158
  }
2159
2159
  };
@@ -2362,14 +2362,16 @@ var Iti = class _Iti {
2362
2362
  }
2363
2363
  };
2364
2364
  this.countryList.addEventListener("click", this._handleClickCountryList);
2365
- let isOpening = true;
2366
- this._handleClickOffToClose = () => {
2367
- if (!isOpening) {
2365
+ this._handleClickOffToClose = (e) => {
2366
+ const target = e.target;
2367
+ const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
2368
+ if (!clickedInsideDropdown) {
2368
2369
  this._closeDropdown();
2369
2370
  }
2370
- isOpening = false;
2371
2371
  };
2372
- document.documentElement.addEventListener("click", this._handleClickOffToClose);
2372
+ setTimeout(() => {
2373
+ document.documentElement.addEventListener("click", this._handleClickOffToClose);
2374
+ }, 0);
2373
2375
  let query = "";
2374
2376
  let queryTimer = null;
2375
2377
  this._handleKeydownOnDropdown = (e) => {
@@ -2422,14 +2424,12 @@ var Iti = class _Iti {
2422
2424
  }, 100);
2423
2425
  };
2424
2426
  this.searchInput.addEventListener("input", this._handleSearchChange);
2425
- this._handleSearchClear = (e) => {
2426
- e.stopPropagation();
2427
+ this._handleSearchClear = () => {
2427
2428
  this.searchInput.value = "";
2428
2429
  this.searchInput.focus();
2429
2430
  doFilter();
2430
2431
  };
2431
2432
  this.searchClearButton.addEventListener("click", this._handleSearchClear);
2432
- this.searchInput.addEventListener("click", (e) => e.stopPropagation());
2433
2433
  }
2434
2434
  }
2435
2435
  //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -2647,16 +2647,16 @@ var Iti = class _Iti {
2647
2647
  }
2648
2648
  if (this.selectedCountryInner) {
2649
2649
  let flagClass = "";
2650
- let a11yText = "";
2650
+ let ariaLabel = "";
2651
2651
  if (iso2 && showFlags) {
2652
2652
  flagClass = `iti__flag iti__${iso2}`;
2653
- a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
2653
+ ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
2654
2654
  } else {
2655
2655
  flagClass = "iti__flag iti__globe";
2656
- a11yText = i18n.noCountrySelected;
2656
+ ariaLabel = i18n.noCountrySelected;
2657
2657
  }
2658
2658
  this.selectedCountryInner.className = flagClass;
2659
- this.selectedCountryA11yText.textContent = a11yText;
2659
+ this.selectedCountry.setAttribute("aria-label", ariaLabel);
2660
2660
  }
2661
2661
  this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
2662
2662
  if (separateDialCode) {
@@ -2713,7 +2713,7 @@ var Iti = class _Iti {
2713
2713
  } else if (iso2) {
2714
2714
  title = this.selectedCountryData.name;
2715
2715
  } else {
2716
- title = "Unknown";
2716
+ title = this.options.i18n.noCountrySelected;
2717
2717
  }
2718
2718
  this.selectedCountry.setAttribute("title", title);
2719
2719
  }
@@ -3108,7 +3108,7 @@ var intlTelInput = Object.assign((input, options) => {
3108
3108
  attachUtils,
3109
3109
  startedLoadingUtilsScript: false,
3110
3110
  startedLoadingAutoCountry: false,
3111
- version: "25.8.0"
3111
+ version: "25.8.2"
3112
3112
  });
3113
3113
  var intl_tel_input_default = intlTelInput;
3114
3114
 
@@ -99,7 +99,6 @@ export declare class Iti {
99
99
  private countryContainer;
100
100
  private selectedCountry;
101
101
  private selectedCountryInner;
102
- private selectedCountryA11yText;
103
102
  private selectedDialCode;
104
103
  private dropdownArrow;
105
104
  private dropdownContent;
@@ -121,6 +121,9 @@
121
121
  .iti__search-input + .iti__country-list {
122
122
  border-top: 1px solid var(--iti-border-color);
123
123
  }
124
+ .iti__search-input::-webkit-search-cancel-button {
125
+ appearance: none;
126
+ }
124
127
  .iti__search-input-wrapper {
125
128
  position: relative;
126
129
  display: flex;
@@ -178,6 +181,7 @@
178
181
  list-style: none;
179
182
  padding: 0;
180
183
  margin: 0;
184
+ cursor: pointer;
181
185
  overflow-y: scroll;
182
186
  -webkit-overflow-scrolling: touch;
183
187
  }
@@ -211,7 +215,7 @@
211
215
  margin-right: 0;
212
216
  margin-left: var(--iti-spacer-horizontal);
213
217
  }
214
- .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
218
+ .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) button.iti__selected-country {
215
219
  cursor: pointer;
216
220
  }
217
221
  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
@@ -1 +1 @@
1
- :root{--iti-hover-color:rgba(0, 0, 0, 0.05);--iti-border-color:#ccc;--iti-dialcode-color:#999;--iti-dropdown-bg:white;--iti-search-icon-color:#999;--iti-spacer-horizontal:8px;--iti-flag-height:12px;--iti-flag-width:16px;--iti-border-width:1px;--iti-arrow-height:4px;--iti-arrow-width:6px;--iti-triangle-border:calc(var(--iti-arrow-width) / 2);--iti-arrow-padding:6px;--iti-arrow-color:#555;--iti-path-flags-1x:url("../img/flags.webp");--iti-path-flags-2x:url("../img/flags@2x.webp");--iti-path-globe-1x:url("../img/globe.webp");--iti-path-globe-2x:url("../img/globe@2x.webp");--iti-flag-sprite-width:3904px;--iti-flag-sprite-height:12px;--iti-mobile-popup-margin:30px}.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti input.iti__tel-input,.iti input.iti__tel-input[type=tel],.iti input.iti__tel-input[type=text]{position:relative;z-index:0;margin:0!important}[dir=rtl] .iti input.iti__tel-input,[dir=rtl] .iti input.iti__tel-input[type=tel],[dir=rtl] .iti input.iti__tel-input[type=text]{text-align:right}.iti__country-container{position:absolute;top:0;bottom:0;padding:var(--iti-border-width)}.iti__selected-country{z-index:1;position:relative;display:flex;align-items:center;height:100%;background:0 0;border:0;margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;font-weight:inherit;line-height:inherit;text-decoration:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.iti__arrow{margin-left:var(--iti-arrow-padding);width:0;height:0;border-left:var(--iti-triangle-border) solid transparent;border-right:var(--iti-triangle-border) solid transparent;border-top:var(--iti-arrow-height) solid var(--iti-arrow-color)}[dir=rtl] .iti__arrow{margin-right:var(--iti-arrow-padding);margin-left:0}.iti__arrow--up{border-top:none;border-bottom:var(--iti-arrow-height) solid var(--iti-arrow-color)}.iti__dropdown-content{border-radius:3px;background-color:var(--iti-dropdown-bg)}.iti--inline-dropdown .iti__dropdown-content{position:absolute;z-index:2;margin-top:3px;margin-left:calc(var(--iti-border-width) * -1);border:var(--iti-border-width) solid var(--iti-border-color);box-shadow:1px 1px 4px rgba(0,0,0,.2)}.iti__search-input{width:100%;border-width:0;border-radius:3px;padding-left:30px;padding-right:28px}[dir=rtl] .iti__search-input{padding-left:inherit;padding-right:30px;background-position:right 8px center}.iti__search-input+.iti__country-list{border-top:1px solid var(--iti-border-color)}.iti__search-input-wrapper{position:relative;display:flex;align-items:center}.iti__search-icon{position:absolute;left:8px;display:flex;pointer-events:none}[dir=rtl] .iti__search-icon{left:auto;right:8px}.iti__search-icon-svg{stroke:var(--iti-search-icon-color);fill:none;stroke-width:3}.iti__search-clear{position:absolute;right:4px;background:0 0;border:0;border-radius:3px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease;width:24px;height:24px}.iti__search-clear .iti__search-clear-x{stroke-width:2}.iti__search-clear .iti__search-clear-bg{fill:var(--iti-search-icon-color)}[dir=rtl] .iti__search-clear{right:auto;left:4px}.iti__search-clear:focus-visible,.iti__search-clear:hover{background:var(--iti-hover-color);outline:0}.iti__no-results{text-align:center;padding:30px 0}.iti__country-list{list-style:none;padding:0;margin:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti--inline-dropdown .iti__country-list{max-height:185px}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}@media (max-width:500px){.iti--flexible-dropdown-width .iti__country-list{white-space:normal}}.iti__country{display:flex;align-items:center;padding:8px var(--iti-spacer-horizontal);outline:0}.iti__dial-code{color:var(--iti-dialcode-color)}.iti__country.iti__highlight{background-color:var(--iti-hover-color)}.iti__country-list .iti__flag,.iti__country-name{margin-right:var(--iti-spacer-horizontal)}[dir=rtl] .iti__country-list .iti__flag,[dir=rtl] .iti__country-name{margin-right:0;margin-left:var(--iti-spacer-horizontal)}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover,.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button{cursor:pointer}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary{background-color:var(--iti-hover-color)}.iti .iti__selected-dial-code{margin-left:4px}[dir=rtl] .iti .iti__selected-dial-code{margin-left:0;margin-right:4px}.iti--container{position:fixed;top:-1000px;left:-1000px;z-index:1060;padding:var(--iti-border-width)}.iti--container:hover{cursor:pointer}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti--fullscreen-popup.iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:var(--iti-mobile-popup-margin);display:flex;flex-direction:column;justify-content:flex-start}.iti--fullscreen-popup .iti__dropdown-content{display:flex;flex-direction:column;max-height:100%;position:relative}.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{--iti-flag-offset:100px;height:var(--iti-flag-height);width:var(--iti-flag-width);border-radius:1px;box-shadow:0 0 1px 0 #888;background-image:var(--iti-path-flags-1x);background-repeat:no-repeat;background-position:var(--iti-flag-offset) 0;background-size:var(--iti-flag-sprite-width) var(--iti-flag-sprite-height)}.iti__ac{--iti-flag-offset:0px}.iti__ad{--iti-flag-offset:-16px}.iti__ae{--iti-flag-offset:-32px}.iti__af{--iti-flag-offset:-48px}.iti__ag{--iti-flag-offset:-64px}.iti__ai{--iti-flag-offset:-80px}.iti__al{--iti-flag-offset:-96px}.iti__am{--iti-flag-offset:-112px}.iti__ao{--iti-flag-offset:-128px}.iti__ar{--iti-flag-offset:-144px}.iti__as{--iti-flag-offset:-160px}.iti__at{--iti-flag-offset:-176px}.iti__au{--iti-flag-offset:-192px}.iti__aw{--iti-flag-offset:-208px}.iti__ax{--iti-flag-offset:-224px}.iti__az{--iti-flag-offset:-240px}.iti__ba{--iti-flag-offset:-256px}.iti__bb{--iti-flag-offset:-272px}.iti__bd{--iti-flag-offset:-288px}.iti__be{--iti-flag-offset:-304px}.iti__bf{--iti-flag-offset:-320px}.iti__bg{--iti-flag-offset:-336px}.iti__bh{--iti-flag-offset:-352px}.iti__bi{--iti-flag-offset:-368px}.iti__bj{--iti-flag-offset:-384px}.iti__bl{--iti-flag-offset:-400px}.iti__bm{--iti-flag-offset:-416px}.iti__bn{--iti-flag-offset:-432px}.iti__bo{--iti-flag-offset:-448px}.iti__bq{--iti-flag-offset:-464px}.iti__br{--iti-flag-offset:-480px}.iti__bs{--iti-flag-offset:-496px}.iti__bt{--iti-flag-offset:-512px}.iti__bw{--iti-flag-offset:-528px}.iti__by{--iti-flag-offset:-544px}.iti__bz{--iti-flag-offset:-560px}.iti__ca{--iti-flag-offset:-576px}.iti__cc{--iti-flag-offset:-592px}.iti__cd{--iti-flag-offset:-608px}.iti__cf{--iti-flag-offset:-624px}.iti__cg{--iti-flag-offset:-640px}.iti__ch{--iti-flag-offset:-656px}.iti__ci{--iti-flag-offset:-672px}.iti__ck{--iti-flag-offset:-688px}.iti__cl{--iti-flag-offset:-704px}.iti__cm{--iti-flag-offset:-720px}.iti__cn{--iti-flag-offset:-736px}.iti__co{--iti-flag-offset:-752px}.iti__cr{--iti-flag-offset:-768px}.iti__cu{--iti-flag-offset:-784px}.iti__cv{--iti-flag-offset:-800px}.iti__cw{--iti-flag-offset:-816px}.iti__cx{--iti-flag-offset:-832px}.iti__cy{--iti-flag-offset:-848px}.iti__cz{--iti-flag-offset:-864px}.iti__de{--iti-flag-offset:-880px}.iti__dj{--iti-flag-offset:-896px}.iti__dk{--iti-flag-offset:-912px}.iti__dm{--iti-flag-offset:-928px}.iti__do{--iti-flag-offset:-944px}.iti__dz{--iti-flag-offset:-960px}.iti__ec{--iti-flag-offset:-976px}.iti__ee{--iti-flag-offset:-992px}.iti__eg{--iti-flag-offset:-1008px}.iti__eh{--iti-flag-offset:-1024px}.iti__er{--iti-flag-offset:-1040px}.iti__es{--iti-flag-offset:-1056px}.iti__et{--iti-flag-offset:-1072px}.iti__fi{--iti-flag-offset:-1088px}.iti__fj{--iti-flag-offset:-1104px}.iti__fk{--iti-flag-offset:-1120px}.iti__fm{--iti-flag-offset:-1136px}.iti__fo{--iti-flag-offset:-1152px}.iti__fr{--iti-flag-offset:-1168px}.iti__ga{--iti-flag-offset:-1184px}.iti__gb{--iti-flag-offset:-1200px}.iti__gd{--iti-flag-offset:-1216px}.iti__ge{--iti-flag-offset:-1232px}.iti__gf{--iti-flag-offset:-1248px}.iti__gg{--iti-flag-offset:-1264px}.iti__gh{--iti-flag-offset:-1280px}.iti__gi{--iti-flag-offset:-1296px}.iti__gl{--iti-flag-offset:-1312px}.iti__gm{--iti-flag-offset:-1328px}.iti__gn{--iti-flag-offset:-1344px}.iti__gp{--iti-flag-offset:-1360px}.iti__gq{--iti-flag-offset:-1376px}.iti__gr{--iti-flag-offset:-1392px}.iti__gt{--iti-flag-offset:-1408px}.iti__gu{--iti-flag-offset:-1424px}.iti__gw{--iti-flag-offset:-1440px}.iti__gy{--iti-flag-offset:-1456px}.iti__hk{--iti-flag-offset:-1472px}.iti__hn{--iti-flag-offset:-1488px}.iti__hr{--iti-flag-offset:-1504px}.iti__ht{--iti-flag-offset:-1520px}.iti__hu{--iti-flag-offset:-1536px}.iti__id{--iti-flag-offset:-1552px}.iti__ie{--iti-flag-offset:-1568px}.iti__il{--iti-flag-offset:-1584px}.iti__im{--iti-flag-offset:-1600px}.iti__in{--iti-flag-offset:-1616px}.iti__io{--iti-flag-offset:-1632px}.iti__iq{--iti-flag-offset:-1648px}.iti__ir{--iti-flag-offset:-1664px}.iti__is{--iti-flag-offset:-1680px}.iti__it{--iti-flag-offset:-1696px}.iti__je{--iti-flag-offset:-1712px}.iti__jm{--iti-flag-offset:-1728px}.iti__jo{--iti-flag-offset:-1744px}.iti__jp{--iti-flag-offset:-1760px}.iti__ke{--iti-flag-offset:-1776px}.iti__kg{--iti-flag-offset:-1792px}.iti__kh{--iti-flag-offset:-1808px}.iti__ki{--iti-flag-offset:-1824px}.iti__km{--iti-flag-offset:-1840px}.iti__kn{--iti-flag-offset:-1856px}.iti__kp{--iti-flag-offset:-1872px}.iti__kr{--iti-flag-offset:-1888px}.iti__kw{--iti-flag-offset:-1904px}.iti__ky{--iti-flag-offset:-1920px}.iti__kz{--iti-flag-offset:-1936px}.iti__la{--iti-flag-offset:-1952px}.iti__lb{--iti-flag-offset:-1968px}.iti__lc{--iti-flag-offset:-1984px}.iti__li{--iti-flag-offset:-2000px}.iti__lk{--iti-flag-offset:-2016px}.iti__lr{--iti-flag-offset:-2032px}.iti__ls{--iti-flag-offset:-2048px}.iti__lt{--iti-flag-offset:-2064px}.iti__lu{--iti-flag-offset:-2080px}.iti__lv{--iti-flag-offset:-2096px}.iti__ly{--iti-flag-offset:-2112px}.iti__ma{--iti-flag-offset:-2128px}.iti__mc{--iti-flag-offset:-2144px}.iti__md{--iti-flag-offset:-2160px}.iti__me{--iti-flag-offset:-2176px}.iti__mf{--iti-flag-offset:-2192px}.iti__mg{--iti-flag-offset:-2208px}.iti__mh{--iti-flag-offset:-2224px}.iti__mk{--iti-flag-offset:-2240px}.iti__ml{--iti-flag-offset:-2256px}.iti__mm{--iti-flag-offset:-2272px}.iti__mn{--iti-flag-offset:-2288px}.iti__mo{--iti-flag-offset:-2304px}.iti__mp{--iti-flag-offset:-2320px}.iti__mq{--iti-flag-offset:-2336px}.iti__mr{--iti-flag-offset:-2352px}.iti__ms{--iti-flag-offset:-2368px}.iti__mt{--iti-flag-offset:-2384px}.iti__mu{--iti-flag-offset:-2400px}.iti__mv{--iti-flag-offset:-2416px}.iti__mw{--iti-flag-offset:-2432px}.iti__mx{--iti-flag-offset:-2448px}.iti__my{--iti-flag-offset:-2464px}.iti__mz{--iti-flag-offset:-2480px}.iti__na{--iti-flag-offset:-2496px}.iti__nc{--iti-flag-offset:-2512px}.iti__ne{--iti-flag-offset:-2528px}.iti__nf{--iti-flag-offset:-2544px}.iti__ng{--iti-flag-offset:-2560px}.iti__ni{--iti-flag-offset:-2576px}.iti__nl{--iti-flag-offset:-2592px}.iti__no{--iti-flag-offset:-2608px}.iti__np{--iti-flag-offset:-2624px}.iti__nr{--iti-flag-offset:-2640px}.iti__nu{--iti-flag-offset:-2656px}.iti__nz{--iti-flag-offset:-2672px}.iti__om{--iti-flag-offset:-2688px}.iti__pa{--iti-flag-offset:-2704px}.iti__pe{--iti-flag-offset:-2720px}.iti__pf{--iti-flag-offset:-2736px}.iti__pg{--iti-flag-offset:-2752px}.iti__ph{--iti-flag-offset:-2768px}.iti__pk{--iti-flag-offset:-2784px}.iti__pl{--iti-flag-offset:-2800px}.iti__pm{--iti-flag-offset:-2816px}.iti__pr{--iti-flag-offset:-2832px}.iti__ps{--iti-flag-offset:-2848px}.iti__pt{--iti-flag-offset:-2864px}.iti__pw{--iti-flag-offset:-2880px}.iti__py{--iti-flag-offset:-2896px}.iti__qa{--iti-flag-offset:-2912px}.iti__re{--iti-flag-offset:-2928px}.iti__ro{--iti-flag-offset:-2944px}.iti__rs{--iti-flag-offset:-2960px}.iti__ru{--iti-flag-offset:-2976px}.iti__rw{--iti-flag-offset:-2992px}.iti__sa{--iti-flag-offset:-3008px}.iti__sb{--iti-flag-offset:-3024px}.iti__sc{--iti-flag-offset:-3040px}.iti__sd{--iti-flag-offset:-3056px}.iti__se{--iti-flag-offset:-3072px}.iti__sg{--iti-flag-offset:-3088px}.iti__sh{--iti-flag-offset:-3104px}.iti__si{--iti-flag-offset:-3120px}.iti__sj{--iti-flag-offset:-3136px}.iti__sk{--iti-flag-offset:-3152px}.iti__sl{--iti-flag-offset:-3168px}.iti__sm{--iti-flag-offset:-3184px}.iti__sn{--iti-flag-offset:-3200px}.iti__so{--iti-flag-offset:-3216px}.iti__sr{--iti-flag-offset:-3232px}.iti__ss{--iti-flag-offset:-3248px}.iti__st{--iti-flag-offset:-3264px}.iti__sv{--iti-flag-offset:-3280px}.iti__sx{--iti-flag-offset:-3296px}.iti__sy{--iti-flag-offset:-3312px}.iti__sz{--iti-flag-offset:-3328px}.iti__tc{--iti-flag-offset:-3344px}.iti__td{--iti-flag-offset:-3360px}.iti__tg{--iti-flag-offset:-3376px}.iti__th{--iti-flag-offset:-3392px}.iti__tj{--iti-flag-offset:-3408px}.iti__tk{--iti-flag-offset:-3424px}.iti__tl{--iti-flag-offset:-3440px}.iti__tm{--iti-flag-offset:-3456px}.iti__tn{--iti-flag-offset:-3472px}.iti__to{--iti-flag-offset:-3488px}.iti__tr{--iti-flag-offset:-3504px}.iti__tt{--iti-flag-offset:-3520px}.iti__tv{--iti-flag-offset:-3536px}.iti__tw{--iti-flag-offset:-3552px}.iti__tz{--iti-flag-offset:-3568px}.iti__ua{--iti-flag-offset:-3584px}.iti__ug{--iti-flag-offset:-3600px}.iti__us{--iti-flag-offset:-3616px}.iti__uy{--iti-flag-offset:-3632px}.iti__uz{--iti-flag-offset:-3648px}.iti__va{--iti-flag-offset:-3664px}.iti__vc{--iti-flag-offset:-3680px}.iti__ve{--iti-flag-offset:-3696px}.iti__vg{--iti-flag-offset:-3712px}.iti__vi{--iti-flag-offset:-3728px}.iti__vn{--iti-flag-offset:-3744px}.iti__vu{--iti-flag-offset:-3760px}.iti__wf{--iti-flag-offset:-3776px}.iti__ws{--iti-flag-offset:-3792px}.iti__xk{--iti-flag-offset:-3808px}.iti__ye{--iti-flag-offset:-3824px}.iti__yt{--iti-flag-offset:-3840px}.iti__za{--iti-flag-offset:-3856px}.iti__zm{--iti-flag-offset:-3872px}.iti__zw{--iti-flag-offset:-3888px}.iti__globe{background-image:var(--iti-path-globe-1x);background-size:contain;background-position:right;box-shadow:none;height:19px}@media (min-resolution:2x){.iti__flag{background-image:var(--iti-path-flags-2x)}.iti__globe{background-image:var(--iti-path-globe-2x)}}
1
+ :root{--iti-hover-color:rgba(0, 0, 0, 0.05);--iti-border-color:#ccc;--iti-dialcode-color:#999;--iti-dropdown-bg:white;--iti-search-icon-color:#999;--iti-spacer-horizontal:8px;--iti-flag-height:12px;--iti-flag-width:16px;--iti-border-width:1px;--iti-arrow-height:4px;--iti-arrow-width:6px;--iti-triangle-border:calc(var(--iti-arrow-width) / 2);--iti-arrow-padding:6px;--iti-arrow-color:#555;--iti-path-flags-1x:url("../img/flags.webp");--iti-path-flags-2x:url("../img/flags@2x.webp");--iti-path-globe-1x:url("../img/globe.webp");--iti-path-globe-2x:url("../img/globe@2x.webp");--iti-flag-sprite-width:3904px;--iti-flag-sprite-height:12px;--iti-mobile-popup-margin:30px}.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti input.iti__tel-input,.iti input.iti__tel-input[type=tel],.iti input.iti__tel-input[type=text]{position:relative;z-index:0;margin:0!important}[dir=rtl] .iti input.iti__tel-input,[dir=rtl] .iti input.iti__tel-input[type=tel],[dir=rtl] .iti input.iti__tel-input[type=text]{text-align:right}.iti__country-container{position:absolute;top:0;bottom:0;padding:var(--iti-border-width)}.iti__selected-country{z-index:1;position:relative;display:flex;align-items:center;height:100%;background:0 0;border:0;margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;font-weight:inherit;line-height:inherit;text-decoration:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.iti__arrow{margin-left:var(--iti-arrow-padding);width:0;height:0;border-left:var(--iti-triangle-border) solid transparent;border-right:var(--iti-triangle-border) solid transparent;border-top:var(--iti-arrow-height) solid var(--iti-arrow-color)}[dir=rtl] .iti__arrow{margin-right:var(--iti-arrow-padding);margin-left:0}.iti__arrow--up{border-top:none;border-bottom:var(--iti-arrow-height) solid var(--iti-arrow-color)}.iti__dropdown-content{border-radius:3px;background-color:var(--iti-dropdown-bg)}.iti--inline-dropdown .iti__dropdown-content{position:absolute;z-index:2;margin-top:3px;margin-left:calc(var(--iti-border-width) * -1);border:var(--iti-border-width) solid var(--iti-border-color);box-shadow:1px 1px 4px rgba(0,0,0,.2)}.iti__search-input{width:100%;border-width:0;border-radius:3px;padding-left:30px;padding-right:28px}[dir=rtl] .iti__search-input{padding-left:inherit;padding-right:30px;background-position:right 8px center}.iti__search-input+.iti__country-list{border-top:1px solid var(--iti-border-color)}.iti__search-input::-webkit-search-cancel-button{appearance:none}.iti__search-input-wrapper{position:relative;display:flex;align-items:center}.iti__search-icon{position:absolute;left:8px;display:flex;pointer-events:none}[dir=rtl] .iti__search-icon{left:auto;right:8px}.iti__search-icon-svg{stroke:var(--iti-search-icon-color);fill:none;stroke-width:3}.iti__search-clear{position:absolute;right:4px;background:0 0;border:0;border-radius:3px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease;width:24px;height:24px}.iti__search-clear .iti__search-clear-x{stroke-width:2}.iti__search-clear .iti__search-clear-bg{fill:var(--iti-search-icon-color)}[dir=rtl] .iti__search-clear{right:auto;left:4px}.iti__search-clear:focus-visible,.iti__search-clear:hover{background:var(--iti-hover-color);outline:0}.iti__no-results{text-align:center;padding:30px 0}.iti__country-list{list-style:none;padding:0;margin:0;cursor:pointer;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti--inline-dropdown .iti__country-list{max-height:185px}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}@media (max-width:500px){.iti--flexible-dropdown-width .iti__country-list{white-space:normal}}.iti__country{display:flex;align-items:center;padding:8px var(--iti-spacer-horizontal);outline:0}.iti__dial-code{color:var(--iti-dialcode-color)}.iti__country.iti__highlight{background-color:var(--iti-hover-color)}.iti__country-list .iti__flag,.iti__country-name{margin-right:var(--iti-spacer-horizontal)}[dir=rtl] .iti__country-list .iti__flag,[dir=rtl] .iti__country-name{margin-right:0;margin-left:var(--iti-spacer-horizontal)}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) button.iti__selected-country{cursor:pointer}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary{background-color:var(--iti-hover-color)}.iti .iti__selected-dial-code{margin-left:4px}[dir=rtl] .iti .iti__selected-dial-code{margin-left:0;margin-right:4px}.iti--container{position:fixed;top:-1000px;left:-1000px;z-index:1060;padding:var(--iti-border-width)}.iti--container:hover{cursor:pointer}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti--fullscreen-popup.iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:var(--iti-mobile-popup-margin);display:flex;flex-direction:column;justify-content:flex-start}.iti--fullscreen-popup .iti__dropdown-content{display:flex;flex-direction:column;max-height:100%;position:relative}.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{--iti-flag-offset:100px;height:var(--iti-flag-height);width:var(--iti-flag-width);border-radius:1px;box-shadow:0 0 1px 0 #888;background-image:var(--iti-path-flags-1x);background-repeat:no-repeat;background-position:var(--iti-flag-offset) 0;background-size:var(--iti-flag-sprite-width) var(--iti-flag-sprite-height)}.iti__ac{--iti-flag-offset:0px}.iti__ad{--iti-flag-offset:-16px}.iti__ae{--iti-flag-offset:-32px}.iti__af{--iti-flag-offset:-48px}.iti__ag{--iti-flag-offset:-64px}.iti__ai{--iti-flag-offset:-80px}.iti__al{--iti-flag-offset:-96px}.iti__am{--iti-flag-offset:-112px}.iti__ao{--iti-flag-offset:-128px}.iti__ar{--iti-flag-offset:-144px}.iti__as{--iti-flag-offset:-160px}.iti__at{--iti-flag-offset:-176px}.iti__au{--iti-flag-offset:-192px}.iti__aw{--iti-flag-offset:-208px}.iti__ax{--iti-flag-offset:-224px}.iti__az{--iti-flag-offset:-240px}.iti__ba{--iti-flag-offset:-256px}.iti__bb{--iti-flag-offset:-272px}.iti__bd{--iti-flag-offset:-288px}.iti__be{--iti-flag-offset:-304px}.iti__bf{--iti-flag-offset:-320px}.iti__bg{--iti-flag-offset:-336px}.iti__bh{--iti-flag-offset:-352px}.iti__bi{--iti-flag-offset:-368px}.iti__bj{--iti-flag-offset:-384px}.iti__bl{--iti-flag-offset:-400px}.iti__bm{--iti-flag-offset:-416px}.iti__bn{--iti-flag-offset:-432px}.iti__bo{--iti-flag-offset:-448px}.iti__bq{--iti-flag-offset:-464px}.iti__br{--iti-flag-offset:-480px}.iti__bs{--iti-flag-offset:-496px}.iti__bt{--iti-flag-offset:-512px}.iti__bw{--iti-flag-offset:-528px}.iti__by{--iti-flag-offset:-544px}.iti__bz{--iti-flag-offset:-560px}.iti__ca{--iti-flag-offset:-576px}.iti__cc{--iti-flag-offset:-592px}.iti__cd{--iti-flag-offset:-608px}.iti__cf{--iti-flag-offset:-624px}.iti__cg{--iti-flag-offset:-640px}.iti__ch{--iti-flag-offset:-656px}.iti__ci{--iti-flag-offset:-672px}.iti__ck{--iti-flag-offset:-688px}.iti__cl{--iti-flag-offset:-704px}.iti__cm{--iti-flag-offset:-720px}.iti__cn{--iti-flag-offset:-736px}.iti__co{--iti-flag-offset:-752px}.iti__cr{--iti-flag-offset:-768px}.iti__cu{--iti-flag-offset:-784px}.iti__cv{--iti-flag-offset:-800px}.iti__cw{--iti-flag-offset:-816px}.iti__cx{--iti-flag-offset:-832px}.iti__cy{--iti-flag-offset:-848px}.iti__cz{--iti-flag-offset:-864px}.iti__de{--iti-flag-offset:-880px}.iti__dj{--iti-flag-offset:-896px}.iti__dk{--iti-flag-offset:-912px}.iti__dm{--iti-flag-offset:-928px}.iti__do{--iti-flag-offset:-944px}.iti__dz{--iti-flag-offset:-960px}.iti__ec{--iti-flag-offset:-976px}.iti__ee{--iti-flag-offset:-992px}.iti__eg{--iti-flag-offset:-1008px}.iti__eh{--iti-flag-offset:-1024px}.iti__er{--iti-flag-offset:-1040px}.iti__es{--iti-flag-offset:-1056px}.iti__et{--iti-flag-offset:-1072px}.iti__fi{--iti-flag-offset:-1088px}.iti__fj{--iti-flag-offset:-1104px}.iti__fk{--iti-flag-offset:-1120px}.iti__fm{--iti-flag-offset:-1136px}.iti__fo{--iti-flag-offset:-1152px}.iti__fr{--iti-flag-offset:-1168px}.iti__ga{--iti-flag-offset:-1184px}.iti__gb{--iti-flag-offset:-1200px}.iti__gd{--iti-flag-offset:-1216px}.iti__ge{--iti-flag-offset:-1232px}.iti__gf{--iti-flag-offset:-1248px}.iti__gg{--iti-flag-offset:-1264px}.iti__gh{--iti-flag-offset:-1280px}.iti__gi{--iti-flag-offset:-1296px}.iti__gl{--iti-flag-offset:-1312px}.iti__gm{--iti-flag-offset:-1328px}.iti__gn{--iti-flag-offset:-1344px}.iti__gp{--iti-flag-offset:-1360px}.iti__gq{--iti-flag-offset:-1376px}.iti__gr{--iti-flag-offset:-1392px}.iti__gt{--iti-flag-offset:-1408px}.iti__gu{--iti-flag-offset:-1424px}.iti__gw{--iti-flag-offset:-1440px}.iti__gy{--iti-flag-offset:-1456px}.iti__hk{--iti-flag-offset:-1472px}.iti__hn{--iti-flag-offset:-1488px}.iti__hr{--iti-flag-offset:-1504px}.iti__ht{--iti-flag-offset:-1520px}.iti__hu{--iti-flag-offset:-1536px}.iti__id{--iti-flag-offset:-1552px}.iti__ie{--iti-flag-offset:-1568px}.iti__il{--iti-flag-offset:-1584px}.iti__im{--iti-flag-offset:-1600px}.iti__in{--iti-flag-offset:-1616px}.iti__io{--iti-flag-offset:-1632px}.iti__iq{--iti-flag-offset:-1648px}.iti__ir{--iti-flag-offset:-1664px}.iti__is{--iti-flag-offset:-1680px}.iti__it{--iti-flag-offset:-1696px}.iti__je{--iti-flag-offset:-1712px}.iti__jm{--iti-flag-offset:-1728px}.iti__jo{--iti-flag-offset:-1744px}.iti__jp{--iti-flag-offset:-1760px}.iti__ke{--iti-flag-offset:-1776px}.iti__kg{--iti-flag-offset:-1792px}.iti__kh{--iti-flag-offset:-1808px}.iti__ki{--iti-flag-offset:-1824px}.iti__km{--iti-flag-offset:-1840px}.iti__kn{--iti-flag-offset:-1856px}.iti__kp{--iti-flag-offset:-1872px}.iti__kr{--iti-flag-offset:-1888px}.iti__kw{--iti-flag-offset:-1904px}.iti__ky{--iti-flag-offset:-1920px}.iti__kz{--iti-flag-offset:-1936px}.iti__la{--iti-flag-offset:-1952px}.iti__lb{--iti-flag-offset:-1968px}.iti__lc{--iti-flag-offset:-1984px}.iti__li{--iti-flag-offset:-2000px}.iti__lk{--iti-flag-offset:-2016px}.iti__lr{--iti-flag-offset:-2032px}.iti__ls{--iti-flag-offset:-2048px}.iti__lt{--iti-flag-offset:-2064px}.iti__lu{--iti-flag-offset:-2080px}.iti__lv{--iti-flag-offset:-2096px}.iti__ly{--iti-flag-offset:-2112px}.iti__ma{--iti-flag-offset:-2128px}.iti__mc{--iti-flag-offset:-2144px}.iti__md{--iti-flag-offset:-2160px}.iti__me{--iti-flag-offset:-2176px}.iti__mf{--iti-flag-offset:-2192px}.iti__mg{--iti-flag-offset:-2208px}.iti__mh{--iti-flag-offset:-2224px}.iti__mk{--iti-flag-offset:-2240px}.iti__ml{--iti-flag-offset:-2256px}.iti__mm{--iti-flag-offset:-2272px}.iti__mn{--iti-flag-offset:-2288px}.iti__mo{--iti-flag-offset:-2304px}.iti__mp{--iti-flag-offset:-2320px}.iti__mq{--iti-flag-offset:-2336px}.iti__mr{--iti-flag-offset:-2352px}.iti__ms{--iti-flag-offset:-2368px}.iti__mt{--iti-flag-offset:-2384px}.iti__mu{--iti-flag-offset:-2400px}.iti__mv{--iti-flag-offset:-2416px}.iti__mw{--iti-flag-offset:-2432px}.iti__mx{--iti-flag-offset:-2448px}.iti__my{--iti-flag-offset:-2464px}.iti__mz{--iti-flag-offset:-2480px}.iti__na{--iti-flag-offset:-2496px}.iti__nc{--iti-flag-offset:-2512px}.iti__ne{--iti-flag-offset:-2528px}.iti__nf{--iti-flag-offset:-2544px}.iti__ng{--iti-flag-offset:-2560px}.iti__ni{--iti-flag-offset:-2576px}.iti__nl{--iti-flag-offset:-2592px}.iti__no{--iti-flag-offset:-2608px}.iti__np{--iti-flag-offset:-2624px}.iti__nr{--iti-flag-offset:-2640px}.iti__nu{--iti-flag-offset:-2656px}.iti__nz{--iti-flag-offset:-2672px}.iti__om{--iti-flag-offset:-2688px}.iti__pa{--iti-flag-offset:-2704px}.iti__pe{--iti-flag-offset:-2720px}.iti__pf{--iti-flag-offset:-2736px}.iti__pg{--iti-flag-offset:-2752px}.iti__ph{--iti-flag-offset:-2768px}.iti__pk{--iti-flag-offset:-2784px}.iti__pl{--iti-flag-offset:-2800px}.iti__pm{--iti-flag-offset:-2816px}.iti__pr{--iti-flag-offset:-2832px}.iti__ps{--iti-flag-offset:-2848px}.iti__pt{--iti-flag-offset:-2864px}.iti__pw{--iti-flag-offset:-2880px}.iti__py{--iti-flag-offset:-2896px}.iti__qa{--iti-flag-offset:-2912px}.iti__re{--iti-flag-offset:-2928px}.iti__ro{--iti-flag-offset:-2944px}.iti__rs{--iti-flag-offset:-2960px}.iti__ru{--iti-flag-offset:-2976px}.iti__rw{--iti-flag-offset:-2992px}.iti__sa{--iti-flag-offset:-3008px}.iti__sb{--iti-flag-offset:-3024px}.iti__sc{--iti-flag-offset:-3040px}.iti__sd{--iti-flag-offset:-3056px}.iti__se{--iti-flag-offset:-3072px}.iti__sg{--iti-flag-offset:-3088px}.iti__sh{--iti-flag-offset:-3104px}.iti__si{--iti-flag-offset:-3120px}.iti__sj{--iti-flag-offset:-3136px}.iti__sk{--iti-flag-offset:-3152px}.iti__sl{--iti-flag-offset:-3168px}.iti__sm{--iti-flag-offset:-3184px}.iti__sn{--iti-flag-offset:-3200px}.iti__so{--iti-flag-offset:-3216px}.iti__sr{--iti-flag-offset:-3232px}.iti__ss{--iti-flag-offset:-3248px}.iti__st{--iti-flag-offset:-3264px}.iti__sv{--iti-flag-offset:-3280px}.iti__sx{--iti-flag-offset:-3296px}.iti__sy{--iti-flag-offset:-3312px}.iti__sz{--iti-flag-offset:-3328px}.iti__tc{--iti-flag-offset:-3344px}.iti__td{--iti-flag-offset:-3360px}.iti__tg{--iti-flag-offset:-3376px}.iti__th{--iti-flag-offset:-3392px}.iti__tj{--iti-flag-offset:-3408px}.iti__tk{--iti-flag-offset:-3424px}.iti__tl{--iti-flag-offset:-3440px}.iti__tm{--iti-flag-offset:-3456px}.iti__tn{--iti-flag-offset:-3472px}.iti__to{--iti-flag-offset:-3488px}.iti__tr{--iti-flag-offset:-3504px}.iti__tt{--iti-flag-offset:-3520px}.iti__tv{--iti-flag-offset:-3536px}.iti__tw{--iti-flag-offset:-3552px}.iti__tz{--iti-flag-offset:-3568px}.iti__ua{--iti-flag-offset:-3584px}.iti__ug{--iti-flag-offset:-3600px}.iti__us{--iti-flag-offset:-3616px}.iti__uy{--iti-flag-offset:-3632px}.iti__uz{--iti-flag-offset:-3648px}.iti__va{--iti-flag-offset:-3664px}.iti__vc{--iti-flag-offset:-3680px}.iti__ve{--iti-flag-offset:-3696px}.iti__vg{--iti-flag-offset:-3712px}.iti__vi{--iti-flag-offset:-3728px}.iti__vn{--iti-flag-offset:-3744px}.iti__vu{--iti-flag-offset:-3760px}.iti__wf{--iti-flag-offset:-3776px}.iti__ws{--iti-flag-offset:-3792px}.iti__xk{--iti-flag-offset:-3808px}.iti__ye{--iti-flag-offset:-3824px}.iti__yt{--iti-flag-offset:-3840px}.iti__za{--iti-flag-offset:-3856px}.iti__zm{--iti-flag-offset:-3872px}.iti__zw{--iti-flag-offset:-3888px}.iti__globe{background-image:var(--iti-path-globe-1x);background-size:contain;background-position:right;box-shadow:none;height:19px}@media (min-resolution:2x){.iti__flag{background-image:var(--iti-path-flags-2x)}.iti__globe{background-image:var(--iti-path-globe-2x)}}
package/build/js/data.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v25.8.0
2
+ * International Telephone Input v25.8.2
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v25.8.0
2
+ * International Telephone Input v25.8.2
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1,6 +1,6 @@
1
1
  const interfaceTranslations = {
2
- selectedCountryAriaLabel: "Selected country",
3
- noCountrySelected: "No country selected",
2
+ selectedCountryAriaLabel: "Change country, selected ${country}",
3
+ noCountrySelected: "Select country",
4
4
  countryListAriaLabel: "List of countries",
5
5
  searchPlaceholder: "Search",
6
6
  clearSearchAriaLabel: "Clear search",
@@ -393,7 +393,6 @@ declare module "intl-tel-input" {
393
393
  private countryContainer;
394
394
  private selectedCountry;
395
395
  private selectedCountryInner;
396
- private selectedCountryA11yText;
397
396
  private selectedDialCode;
398
397
  private dropdownArrow;
399
398
  private dropdownContent;
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v25.8.0
2
+ * International Telephone Input v25.8.2
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1629,8 +1629,8 @@ var factoryOutput = (() => {
1629
1629
 
1630
1630
  // src/js/intl-tel-input/i18n/en/interface.ts
1631
1631
  var interfaceTranslations = {
1632
- selectedCountryAriaLabel: "Selected country",
1633
- noCountrySelected: "No country selected",
1632
+ selectedCountryAriaLabel: "Change country, selected ${country}",
1633
+ noCountrySelected: "Select country",
1634
1634
  countryListAriaLabel: "List of countries",
1635
1635
  searchPlaceholder: "Search",
1636
1636
  clearSearchAriaLabel: "Clear search",
@@ -1995,7 +1995,7 @@ var factoryOutput = (() => {
1995
1995
  type: "button",
1996
1996
  class: "iti__selected-country",
1997
1997
  "aria-expanded": "false",
1998
- "aria-label": this.options.i18n.selectedCountryAriaLabel,
1998
+ "aria-label": this.options.i18n.noCountrySelected,
1999
1999
  "aria-haspopup": "dialog",
2000
2000
  "aria-controls": `iti-${this.id}__dropdown-content`
2001
2001
  },
@@ -2011,12 +2011,15 @@ var factoryOutput = (() => {
2011
2011
  this.countryContainer
2012
2012
  );
2013
2013
  }
2014
- const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
2015
- this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
2016
- this.selectedCountryA11yText = createEl(
2017
- "span",
2018
- { class: "iti__a11y-text" },
2019
- this.selectedCountryInner
2014
+ const selectedCountryPrimary = createEl(
2015
+ "div",
2016
+ { class: "iti__selected-country-primary" },
2017
+ this.selectedCountry
2018
+ );
2019
+ this.selectedCountryInner = createEl(
2020
+ "div",
2021
+ { class: "iti__flag" },
2022
+ selectedCountryPrimary
2020
2023
  );
2021
2024
  if (allowDropdown) {
2022
2025
  this.dropdownArrow = createEl(
@@ -2270,7 +2273,8 @@ var factoryOutput = (() => {
2270
2273
  label.addEventListener("click", this._handleLabelClick);
2271
2274
  }
2272
2275
  this._handleClickSelectedCountry = () => {
2273
- if (this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly) {
2276
+ const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
2277
+ if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
2274
2278
  this._openDropdown();
2275
2279
  }
2276
2280
  };
@@ -2485,17 +2489,19 @@ var factoryOutput = (() => {
2485
2489
  }
2486
2490
  };
2487
2491
  this.countryList.addEventListener("click", this._handleClickCountryList);
2488
- let isOpening = true;
2489
- this._handleClickOffToClose = () => {
2490
- if (!isOpening) {
2492
+ this._handleClickOffToClose = (e) => {
2493
+ const target = e.target;
2494
+ const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
2495
+ if (!clickedInsideDropdown) {
2491
2496
  this._closeDropdown();
2492
2497
  }
2493
- isOpening = false;
2494
2498
  };
2495
- document.documentElement.addEventListener(
2496
- "click",
2497
- this._handleClickOffToClose
2498
- );
2499
+ setTimeout(() => {
2500
+ document.documentElement.addEventListener(
2501
+ "click",
2502
+ this._handleClickOffToClose
2503
+ );
2504
+ }, 0);
2499
2505
  let query = "";
2500
2506
  let queryTimer = null;
2501
2507
  this._handleKeydownOnDropdown = (e) => {
@@ -2548,14 +2554,12 @@ var factoryOutput = (() => {
2548
2554
  }, 100);
2549
2555
  };
2550
2556
  this.searchInput.addEventListener("input", this._handleSearchChange);
2551
- this._handleSearchClear = (e) => {
2552
- e.stopPropagation();
2557
+ this._handleSearchClear = () => {
2553
2558
  this.searchInput.value = "";
2554
2559
  this.searchInput.focus();
2555
2560
  doFilter();
2556
2561
  };
2557
2562
  this.searchClearButton.addEventListener("click", this._handleSearchClear);
2558
- this.searchInput.addEventListener("click", (e) => e.stopPropagation());
2559
2563
  }
2560
2564
  }
2561
2565
  //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -2776,16 +2780,16 @@ var factoryOutput = (() => {
2776
2780
  }
2777
2781
  if (this.selectedCountryInner) {
2778
2782
  let flagClass = "";
2779
- let a11yText = "";
2783
+ let ariaLabel = "";
2780
2784
  if (iso2 && showFlags) {
2781
2785
  flagClass = `iti__flag iti__${iso2}`;
2782
- a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
2786
+ ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
2783
2787
  } else {
2784
2788
  flagClass = "iti__flag iti__globe";
2785
- a11yText = i18n.noCountrySelected;
2789
+ ariaLabel = i18n.noCountrySelected;
2786
2790
  }
2787
2791
  this.selectedCountryInner.className = flagClass;
2788
- this.selectedCountryA11yText.textContent = a11yText;
2792
+ this.selectedCountry.setAttribute("aria-label", ariaLabel);
2789
2793
  }
2790
2794
  this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
2791
2795
  if (separateDialCode) {
@@ -2847,7 +2851,7 @@ var factoryOutput = (() => {
2847
2851
  } else if (iso2) {
2848
2852
  title = this.selectedCountryData.name;
2849
2853
  } else {
2850
- title = "Unknown";
2854
+ title = this.options.i18n.noCountrySelected;
2851
2855
  }
2852
2856
  this.selectedCountry.setAttribute("title", title);
2853
2857
  }
@@ -3276,7 +3280,7 @@ var factoryOutput = (() => {
3276
3280
  attachUtils,
3277
3281
  startedLoadingUtilsScript: false,
3278
3282
  startedLoadingAutoCountry: false,
3279
- version: "25.8.0"
3283
+ version: "25.8.2"
3280
3284
  }
3281
3285
  );
3282
3286
  var intl_tel_input_default = intlTelInput;