intl-tel-input 26.5.2 → 26.7.0

package/README.md

@@ -2,7 +2,7 @@
 
 A JavaScript plugin for entering, formatting and validating international telephone numbers. Includes TypeScript definitions, plus React, Vue, Angular and Svelte components.
 
-[Explore docs »](https://intl-tel-input.com/docs/getting-started)
+[Explore docs »](https://intl-tel-input.com/docs/choose-integration)
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/vanilla-dark.png">

package/angular/build/IntlTelInput.js

@@ -1753,8 +1753,10 @@ var LAYOUT = {
   // px width fallback when separateDialCode enabled
   SANE_SELECTED_NO_DIAL_WIDTH: 42,
   // px width fallback when no separate dial code
-  INPUT_PADDING_EXTRA_LEFT: 6
+  INPUT_PADDING_EXTRA_LEFT: 6,
   // px gap between selected country container and input text
+  DROPDOWN_MARGIN: 3
+  // px margin between dropdown and tel input
 };
 var DIAL = {
   PLUS: "+",
@@ -1856,7 +1858,7 @@ var defaults = {
   allowPhonewords: false,
   //* Add a placeholder in the input with an example number for the selected country.
   autoPlaceholder: PLACEHOLDER_MODES.POLITE,
-  //* Modify the parentClass.
+  //* Add a custom class to the (injected) container element.
   containerClass: "",
   //* Locale for localising country names via Intl.DisplayNames.
   countryNameLocale: "en",
@@ -1894,10 +1896,12 @@ var defaults = {
   onlyCountries: [],
   //* Number type to use for placeholders.
   placeholderNumberType: "MOBILE",
-  //* Show flags - for both the selected country, and in the country dropdown
-  showFlags: true,
+  //* Add custom classes to the search input element.
+  searchInputClass: "",
   //* Display the international dial code next to the selected flag.
   separateDialCode: false,
+  //* Show flags - for both the selected country, and in the country dropdown
+  showFlags: true,
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
   strictMode: false,
   //* Use full screen popup instead of dropdown for country list.
@@ -1985,6 +1989,7 @@ var validateOptions = (customOptions) => {
         validatedOptions[key] = value;
         break;
       case "containerClass":
+      case "searchInputClass":
       case "countryNameLocale":
         if (typeof value !== "string") {
           warnOption(key, "a string", value);
@@ -2190,9 +2195,11 @@ var buildGlobeIcon = () => `
   </svg>`;
 
 // angular/build/temp/modules/core/ui.js
-var UI = class {
+var UI = class _UI {
   constructor(input, options, id2) {
     this.searchKeyupTimer = null;
+    this.dropdownHeight = null;
+    this.dropdownForContainer = null;
     this.highlightedItem = null;
     this.selectedItem = null;
     input.dataset.intlTelInputId = id2.toString();
@@ -2308,6 +2315,13 @@ var UI = class {
     if (countrySearch) {
       this.updateSearchResultsA11yText();
     }
+    if (fixDropdownWidth) {
+      this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
+    }
+    this.dropdownHeight = this.getHiddenDropdownHeight();
+    if (countrySearch && !useFullscreenPopup) {
+      this.dropdownContent.style.height = `${this.dropdownHeight}px`;
+    }
     if (dropdownContainer) {
       const dropdownClasses = buildClassNames({
         iti: true,
@@ -2316,14 +2330,14 @@ var UI = class {
         "iti--inline-dropdown": !useFullscreenPopup,
         [containerClass]: Boolean(containerClass)
       });
-      this.dropdown = createEl("div", { class: dropdownClasses });
-      this.dropdown.appendChild(this.dropdownContent);
+      this.dropdownForContainer = createEl("div", { class: dropdownClasses });
+      this.dropdownForContainer.appendChild(this.dropdownContent);
     } else {
       this.countryContainer.appendChild(this.dropdownContent);
     }
   }
   _buildSearchUI() {
-    const { i18n } = this.options;
+    const { i18n, searchInputClass } = this.options;
     const searchWrapper = createEl("div", { class: "iti__search-input-wrapper" }, this.dropdownContent);
     this.searchIcon = createEl("span", {
       class: "iti__search-icon",
@@ -2334,7 +2348,7 @@ var UI = class {
       id: `iti-${this.id}__search-input`,
       // Chrome says inputs need either a name or an id
       type: "search",
-      class: "iti__search-input",
+      class: `iti__search-input ${searchInputClass}`,
       placeholder: i18n.searchPlaceholder,
       // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
       role: "combobox",
@@ -2419,12 +2433,12 @@ var UI = class {
         createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
       }
       const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
-      nameEl.textContent = c.name;
+      nameEl.textContent = `${c.name} `;
       const dialEl = createEl("span", { class: "iti__dial-code" }, nameEl);
       if (this.isRTL) {
         dialEl.setAttribute("dir", "ltr");
       }
-      dialEl.textContent = `+${c.dialCode}`;
+      dialEl.textContent = `(+${c.dialCode})`;
       frag.appendChild(listItem);
     }
     this.countryList.appendChild(frag);
@@ -2438,18 +2452,22 @@ var UI = class {
       this.telInput.style.paddingLeft = `${inputPadding}px`;
     }
   }
+  static getBody() {
+    let body;
+    try {
+      body = window.top.document.body;
+    } catch (e) {
+      body = document.body;
+    }
+    return body;
+  }
   //* When input is in a hidden container during init, we cannot calculate the selected country width.
   //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
   //* To get the right styling to apply, all we need is a shallow clone of the container,
   //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
-      let body;
-      try {
-        body = window.top.document.body;
-      } catch (e) {
-        body = document.body;
-      }
+      const body = _UI.getBody();
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
       body.appendChild(containerClone);
@@ -2463,6 +2481,20 @@ var UI = class {
     }
     return 0;
   }
+  // this is run before we add the dropdown to the DOM
+  getHiddenDropdownHeight() {
+    const body = _UI.getBody();
+    this.dropdownContent.classList.remove(CLASSES.HIDE);
+    const tempContainer = createEl("div", { class: "iti iti--inline-dropdown" });
+    tempContainer.appendChild(this.dropdownContent);
+    tempContainer.style.visibility = "hidden";
+    body.appendChild(tempContainer);
+    const height = this.dropdownContent.offsetHeight;
+    body.removeChild(tempContainer);
+    tempContainer.style.visibility = "";
+    this.dropdownContent.classList.add(CLASSES.HIDE);
+    return height;
+  }
   //* Update search results text (for a11y).
   updateSearchResultsA11yText() {
     const { i18n } = this.options;
@@ -2616,7 +2648,7 @@ var UI = class {
     this.searchNoResults = null;
     this.searchResultsA11yText = null;
     this.countryList = null;
-    this.dropdown = null;
+    this.dropdownForContainer = null;
     this.hiddenInput = null;
     this.hiddenInputCountry = null;
     this.highlightedItem = null;
@@ -2628,13 +2660,20 @@ var UI = class {
   }
   // UI: Open the dropdown (DOM only).
   openDropdown() {
-    const { fixDropdownWidth, countrySearch, dropdownAlwaysOpen } = this.options;
-    if (fixDropdownWidth) {
-      this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
+    const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.options;
+    if (dropdownContainer) {
+      this._handleDropdownContainer();
+    } else {
+      const positionBelow = this._shouldPositionDropdownBelowInput();
+      const distance = this.telInput.offsetHeight + LAYOUT.DROPDOWN_MARGIN;
+      if (positionBelow) {
+        this.dropdownContent.style.top = `${distance}px`;
+      } else {
+        this.dropdownContent.style.bottom = `${distance}px`;
+      }
     }
     this.dropdownContent.classList.remove(CLASSES.HIDE);
     this.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
-    this.setDropdownPosition();
     if (countrySearch) {
       const firstCountryItem = this.countryList.firstElementChild;
       if (firstCountryItem) {
@@ -2661,21 +2700,33 @@ var UI = class {
     }
     this.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
     if (dropdownContainer) {
-      this.dropdown.remove();
+      this.dropdownForContainer.remove();
+      this.dropdownForContainer.style.top = "";
+    } else {
+      this.dropdownContent.style.top = "";
+      this.dropdownContent.style.bottom = "";
     }
   }
-  // UI: Position the dropdown (DOM only). Does not bind scroll listeners.
-  setDropdownPosition() {
+  _shouldPositionDropdownBelowInput() {
+    const inputPos = this.telInput.getBoundingClientRect();
+    const spaceAbove = inputPos.top;
+    const spaceBelow = window.innerHeight - inputPos.bottom;
+    return spaceBelow >= this.dropdownHeight || spaceBelow >= spaceAbove;
+  }
+  // inject dropdown into container and apply positioning styles
+  _handleDropdownContainer() {
     const { dropdownContainer, useFullscreenPopup } = this.options;
     if (dropdownContainer) {
-      dropdownContainer.appendChild(this.dropdown);
-    }
-    if (!useFullscreenPopup) {
-      const inputPosRelativeToVP = this.telInput.getBoundingClientRect();
-      const inputHeight = this.telInput.offsetHeight;
-      if (dropdownContainer && this.dropdown) {
-        this.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
-        this.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
+      dropdownContainer.appendChild(this.dropdownForContainer);
+      if (!useFullscreenPopup) {
+        const inputPos = this.telInput.getBoundingClientRect();
+        this.dropdownForContainer.style.left = `${inputPos.left}px`;
+        const positionBelow = this._shouldPositionDropdownBelowInput();
+        if (positionBelow) {
+          this.dropdownForContainer.style.top = `${inputPos.bottom + LAYOUT.DROPDOWN_MARGIN}px`;
+        } else {
+          this.dropdownForContainer.style.top = `${inputPos.top - this.dropdownHeight - LAYOUT.DROPDOWN_MARGIN}px`;
+        }
       }
     }
   }
@@ -3975,7 +4026,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "26.5.2"
+  version: "26.7.0"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/IntlTelInputWithUtils.js

@@ -1753,8 +1753,10 @@ var LAYOUT = {
   // px width fallback when separateDialCode enabled
   SANE_SELECTED_NO_DIAL_WIDTH: 42,
   // px width fallback when no separate dial code
-  INPUT_PADDING_EXTRA_LEFT: 6
+  INPUT_PADDING_EXTRA_LEFT: 6,
   // px gap between selected country container and input text
+  DROPDOWN_MARGIN: 3
+  // px margin between dropdown and tel input
 };
 var DIAL = {
   PLUS: "+",
@@ -1856,7 +1858,7 @@ var defaults = {
   allowPhonewords: false,
   //* Add a placeholder in the input with an example number for the selected country.
   autoPlaceholder: PLACEHOLDER_MODES.POLITE,
-  //* Modify the parentClass.
+  //* Add a custom class to the (injected) container element.
   containerClass: "",
   //* Locale for localising country names via Intl.DisplayNames.
   countryNameLocale: "en",
@@ -1894,10 +1896,12 @@ var defaults = {
   onlyCountries: [],
   //* Number type to use for placeholders.
   placeholderNumberType: "MOBILE",
-  //* Show flags - for both the selected country, and in the country dropdown
-  showFlags: true,
+  //* Add custom classes to the search input element.
+  searchInputClass: "",
   //* Display the international dial code next to the selected flag.
   separateDialCode: false,
+  //* Show flags - for both the selected country, and in the country dropdown
+  showFlags: true,
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
   strictMode: false,
   //* Use full screen popup instead of dropdown for country list.
@@ -1985,6 +1989,7 @@ var validateOptions = (customOptions) => {
         validatedOptions[key] = value;
         break;
       case "containerClass":
+      case "searchInputClass":
       case "countryNameLocale":
         if (typeof value !== "string") {
           warnOption(key, "a string", value);
@@ -2190,9 +2195,11 @@ var buildGlobeIcon = () => `
   </svg>`;
 
 // angular/build/temp/modules/core/ui.js
-var UI = class {
+var UI = class _UI {
   constructor(input, options, id2) {
     this.searchKeyupTimer = null;
+    this.dropdownHeight = null;
+    this.dropdownForContainer = null;
     this.highlightedItem = null;
     this.selectedItem = null;
     input.dataset.intlTelInputId = id2.toString();
@@ -2308,6 +2315,13 @@ var UI = class {
     if (countrySearch) {
       this.updateSearchResultsA11yText();
     }
+    if (fixDropdownWidth) {
+      this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
+    }
+    this.dropdownHeight = this.getHiddenDropdownHeight();
+    if (countrySearch && !useFullscreenPopup) {
+      this.dropdownContent.style.height = `${this.dropdownHeight}px`;
+    }
     if (dropdownContainer) {
       const dropdownClasses = buildClassNames({
         iti: true,
@@ -2316,14 +2330,14 @@ var UI = class {
         "iti--inline-dropdown": !useFullscreenPopup,
         [containerClass]: Boolean(containerClass)
       });
-      this.dropdown = createEl("div", { class: dropdownClasses });
-      this.dropdown.appendChild(this.dropdownContent);
+      this.dropdownForContainer = createEl("div", { class: dropdownClasses });
+      this.dropdownForContainer.appendChild(this.dropdownContent);
     } else {
       this.countryContainer.appendChild(this.dropdownContent);
     }
   }
   _buildSearchUI() {
-    const { i18n } = this.options;
+    const { i18n, searchInputClass } = this.options;
     const searchWrapper = createEl("div", { class: "iti__search-input-wrapper" }, this.dropdownContent);
     this.searchIcon = createEl("span", {
       class: "iti__search-icon",
@@ -2334,7 +2348,7 @@ var UI = class {
       id: `iti-${this.id}__search-input`,
       // Chrome says inputs need either a name or an id
       type: "search",
-      class: "iti__search-input",
+      class: `iti__search-input ${searchInputClass}`,
       placeholder: i18n.searchPlaceholder,
       // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
       role: "combobox",
@@ -2419,12 +2433,12 @@ var UI = class {
         createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
       }
       const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
-      nameEl.textContent = c.name;
+      nameEl.textContent = `${c.name} `;
       const dialEl = createEl("span", { class: "iti__dial-code" }, nameEl);
       if (this.isRTL) {
         dialEl.setAttribute("dir", "ltr");
       }
-      dialEl.textContent = `+${c.dialCode}`;
+      dialEl.textContent = `(+${c.dialCode})`;
       frag.appendChild(listItem);
     }
     this.countryList.appendChild(frag);
@@ -2438,18 +2452,22 @@ var UI = class {
       this.telInput.style.paddingLeft = `${inputPadding}px`;
     }
   }
+  static getBody() {
+    let body;
+    try {
+      body = window.top.document.body;
+    } catch (e) {
+      body = document.body;
+    }
+    return body;
+  }
   //* When input is in a hidden container during init, we cannot calculate the selected country width.
   //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
   //* To get the right styling to apply, all we need is a shallow clone of the container,
   //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
-      let body;
-      try {
-        body = window.top.document.body;
-      } catch (e) {
-        body = document.body;
-      }
+      const body = _UI.getBody();
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
       body.appendChild(containerClone);
@@ -2463,6 +2481,20 @@ var UI = class {
     }
     return 0;
   }
+  // this is run before we add the dropdown to the DOM
+  getHiddenDropdownHeight() {
+    const body = _UI.getBody();
+    this.dropdownContent.classList.remove(CLASSES.HIDE);
+    const tempContainer = createEl("div", { class: "iti iti--inline-dropdown" });
+    tempContainer.appendChild(this.dropdownContent);
+    tempContainer.style.visibility = "hidden";
+    body.appendChild(tempContainer);
+    const height = this.dropdownContent.offsetHeight;
+    body.removeChild(tempContainer);
+    tempContainer.style.visibility = "";
+    this.dropdownContent.classList.add(CLASSES.HIDE);
+    return height;
+  }
   //* Update search results text (for a11y).
   updateSearchResultsA11yText() {
     const { i18n } = this.options;
@@ -2616,7 +2648,7 @@ var UI = class {
     this.searchNoResults = null;
     this.searchResultsA11yText = null;
     this.countryList = null;
-    this.dropdown = null;
+    this.dropdownForContainer = null;
     this.hiddenInput = null;
     this.hiddenInputCountry = null;
     this.highlightedItem = null;
@@ -2628,13 +2660,20 @@ var UI = class {
   }
   // UI: Open the dropdown (DOM only).
   openDropdown() {
-    const { fixDropdownWidth, countrySearch, dropdownAlwaysOpen } = this.options;
-    if (fixDropdownWidth) {
-      this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
+    const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.options;
+    if (dropdownContainer) {
+      this._handleDropdownContainer();
+    } else {
+      const positionBelow = this._shouldPositionDropdownBelowInput();
+      const distance = this.telInput.offsetHeight + LAYOUT.DROPDOWN_MARGIN;
+      if (positionBelow) {
+        this.dropdownContent.style.top = `${distance}px`;
+      } else {
+        this.dropdownContent.style.bottom = `${distance}px`;
+      }
     }
     this.dropdownContent.classList.remove(CLASSES.HIDE);
     this.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
-    this.setDropdownPosition();
     if (countrySearch) {
       const firstCountryItem = this.countryList.firstElementChild;
       if (firstCountryItem) {
@@ -2661,21 +2700,33 @@ var UI = class {
     }
     this.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
     if (dropdownContainer) {
-      this.dropdown.remove();
+      this.dropdownForContainer.remove();
+      this.dropdownForContainer.style.top = "";
+    } else {
+      this.dropdownContent.style.top = "";
+      this.dropdownContent.style.bottom = "";
     }
   }
-  // UI: Position the dropdown (DOM only). Does not bind scroll listeners.
-  setDropdownPosition() {
+  _shouldPositionDropdownBelowInput() {
+    const inputPos = this.telInput.getBoundingClientRect();
+    const spaceAbove = inputPos.top;
+    const spaceBelow = window.innerHeight - inputPos.bottom;
+    return spaceBelow >= this.dropdownHeight || spaceBelow >= spaceAbove;
+  }
+  // inject dropdown into container and apply positioning styles
+  _handleDropdownContainer() {
     const { dropdownContainer, useFullscreenPopup } = this.options;
     if (dropdownContainer) {
-      dropdownContainer.appendChild(this.dropdown);
-    }
-    if (!useFullscreenPopup) {
-      const inputPosRelativeToVP = this.telInput.getBoundingClientRect();
-      const inputHeight = this.telInput.offsetHeight;
-      if (dropdownContainer && this.dropdown) {
-        this.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
-        this.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
+      dropdownContainer.appendChild(this.dropdownForContainer);
+      if (!useFullscreenPopup) {
+        const inputPos = this.telInput.getBoundingClientRect();
+        this.dropdownForContainer.style.left = `${inputPos.left}px`;
+        const positionBelow = this._shouldPositionDropdownBelowInput();
+        if (positionBelow) {
+          this.dropdownForContainer.style.top = `${inputPos.bottom + LAYOUT.DROPDOWN_MARGIN}px`;
+        } else {
+          this.dropdownForContainer.style.top = `${inputPos.top - this.dropdownHeight - LAYOUT.DROPDOWN_MARGIN}px`;
+        }
       }
     }
   }
@@ -3975,7 +4026,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "26.5.2"
+  version: "26.7.0"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/types/modules/constants.d.ts

@@ -46,6 +46,7 @@ export declare const LAYOUT: {
     readonly SANE_SELECTED_WITH_DIAL_WIDTH: 78;
     readonly SANE_SELECTED_NO_DIAL_WIDTH: 42;
     readonly INPUT_PADDING_EXTRA_LEFT: 6;
+    readonly DROPDOWN_MARGIN: 3;
 };
 export declare const DIAL: {
     readonly PLUS: "+";

package/angular/build/types/modules/core/ui.d.ts

@@ -7,6 +7,7 @@ export default class UI {
     private readonly originalPaddingLeft;
     private countries;
     private searchKeyupTimer;
+    private dropdownHeight;
     telInput: HTMLInputElement;
     countryContainer: HTMLElement;
     selectedCountry: HTMLElement;
@@ -20,7 +21,7 @@ export default class UI {
     searchNoResults: HTMLElement;
     searchResultsA11yText: HTMLElement;
     countryList: HTMLElement;
-    dropdown: HTMLElement;
+    dropdownForContainer: HTMLElement | null;
     hiddenInput: HTMLInputElement;
     hiddenInputCountry: HTMLInputElement;
     highlightedItem: HTMLElement | null;
@@ -37,7 +38,9 @@ export default class UI {
     private _maybeBuildHiddenInputs;
     private _appendListItems;
     updateInputPadding(): void;
+    private static getBody;
     private _getHiddenSelectedCountryWidth;
+    private getHiddenDropdownHeight;
     updateSearchResultsA11yText(): void;
     filterCountriesByQuery(query: string): void;
     private doFilter;
@@ -51,7 +54,8 @@ export default class UI {
     destroy(): void;
     openDropdown(): void;
     closeDropdown(): void;
-    setDropdownPosition(): void;
+    _shouldPositionDropdownBelowInput(): boolean;
+    _handleDropdownContainer(): void;
     isDropdownClosed(): boolean;
     setCountry(selectedCountryData: SelectedCountryData): void;
 }

package/angular/build/types/modules/types/public-api.d.ts

@@ -28,13 +28,14 @@ export type NumberType = SetValues<typeof NUMBER_TYPE_SET>;
 type ValueOf<T> = T[keyof T];
 export interface AllOptions {
     allowDropdown: boolean;
+    allowedNumberTypes: NumberType[] | null;
     allowNumberExtensions: boolean;
     allowPhonewords: boolean;
     autoPlaceholder: ValueOf<typeof PLACEHOLDER_MODES>;
     containerClass: string;
+    countryNameLocale: string;
     countryOrder: Iso2[] | null;
     countrySearch: boolean;
-    countryNameLocale: string;
     customPlaceholder: ((selectedCountryPlaceholder: string, selectedCountryData: SelectedCountryData) => string) | null;
     dropdownAlwaysOpen: boolean;
     dropdownContainer: HTMLElement | null;
@@ -53,11 +54,11 @@ export interface AllOptions {
     nationalMode: boolean;
     onlyCountries: Iso2[];
     placeholderNumberType: NumberType;
-    showFlags: boolean;
+    searchInputClass: string;
     separateDialCode: boolean;
+    showFlags: boolean;
     strictMode: boolean;
     useFullscreenPopup: boolean;
-    allowedNumberTypes: NumberType[] | null;
 }
 export type SomeOptions = Partial<AllOptions>;
 export interface IntlTelInputInterface {

package/build/css/demo.css

@@ -11,9 +11,8 @@ body {
 
 input,
 .button {
-  height: 35px;
   margin: 0;
-  padding: 6px 12px;
+  padding: 8px 12px;
   border-radius: 2px;
   font-family: inherit;
   font-size: 100%;
@@ -67,7 +66,6 @@ input::placeholder {
   }
   .iti {
     --iti-border-color: #5b5b5b;
-    --iti-dialcode-color: #999999;
     --iti-dropdown-bg: #0d1117;
     --iti-hover-color: #30363d;
     --iti-icon-color: #aaa;