intl-tel-input 29.1.3 → 29.2.0

package/dist/js/data.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v29.1.3
+ * International Telephone Input v29.2.0
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/dist/js/data.min.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v29.1.3
+ * International Telephone Input v29.2.0
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/dist/js/intlTelInput.d.ts

@@ -1616,6 +1616,29 @@ export type UiTranslations = {
 	searchSummaryAria?: (count: number) => string;
 	countryNames?: Partial<Record<Iso2, string>>;
 };
+declare const ITI_SLOTS: readonly [
+	"container",
+	"input",
+	"countryContainer",
+	"selectedCountry",
+	"selectedCountryPrimary",
+	"selectedFlag",
+	"arrow",
+	"selectedDialCode",
+	"countrySelector",
+	"countrySelectorContainer",
+	"searchWrapper",
+	"searchIcon",
+	"searchInput",
+	"searchClear",
+	"countryList",
+	"countryListItem",
+	"countryListItemFlag",
+	"countryName",
+	"dialCode",
+	"countryCheck",
+	"noResults"
+];
 export declare const PLACEHOLDER_POLICY: {
 	readonly AGGRESSIVE: "AGGRESSIVE";
 	readonly POLITE: "POLITE";
@@ -1709,11 +1732,63 @@ export type NumberType = ArrayValues<typeof NUMBER_TYPES>;
 export type ValidationError = ArrayValues<typeof VALIDATION_ERRORS>;
 export type ValueOf<T> = T[keyof T];
 export type CountrySelectorMode = ArrayValues<typeof COUNTRY_SELECTOR_MODES>;
+export type ItiSlot = ArrayValues<typeof ITI_SLOTS>;
+export interface ItiClassNames {
+	/** The injected `<div class="iti">` wrapping the input and the selected country. */
+	container?: string;
+	/** The `<input>` itself. */
+	input?: string;
+	/** The `<div>` wrapping the selected country, which overlays the left of the input. */
+	countryContainer?: string;
+	/** The selected country `<button>` (or `<div>` when the country selector is disabled). */
+	selectedCountry?: string;
+	/** The `<div>` inside the selected country that gets the hover highlight. */
+	selectedCountryPrimary?: string;
+	/** The selected country's flag (or globe icon) `<div>`. */
+	selectedFlag?: string;
+	/** The dropdown arrow `<div>`. */
+	arrow?: string;
+	/** The selected country's dial code `<div>`. Requires `separateDialCode`. */
+	selectedDialCode?: string;
+	/** The country selector `<div>` i.e. the dropdown or the fullscreen popup. */
+	countrySelector?: string;
+	/**
+	 * The `<div>` wrapping the country selector when it is rendered outside the
+	 * main container — i.e. the fullscreen popup, or when `dropdownParent` is set.
+	 * This element only handles positioning, so it is mainly useful for getting a
+	 * scoping class (e.g. a theme class) onto a country selector that would
+	 * otherwise escape it. Does not exist for a normal inline dropdown.
+	 */
+	countrySelectorContainer?: string;
+	/** The `<div>` wrapping the country search input and its icons. Requires `countrySearch`. */
+	searchWrapper?: string;
+	/** The search (magnifying glass) icon `<span>`. Requires `countrySearch`. */
+	searchIcon?: string;
+	/** The country search `<input>`. Requires `countrySearch`. */
+	searchInput?: string;
+	/** The clear-search `<button>`. Requires `countrySearch`. */
+	searchClear?: string;
+	/** The country list `<ul>`. */
+	countryList?: string;
+	/** Every country `<li>` in the country list. */
+	countryListItem?: string;
+	/** The flag `<div>` inside every country `<li>`. Requires `showFlags`. */
+	countryListItemFlag?: string;
+	/** The country name `<span>` inside every country `<li>`. */
+	countryName?: string;
+	/** The dial code `<span>` inside every country name. */
+	dialCode?: string;
+	/** The check icon `<span>` added to the currently selected country `<li>`. */
+	countryCheck?: string;
+	/** The "no results" message `<div>`. Requires `countrySearch`. */
+	noResults?: string;
+}
 export interface AllOptions {
 	countrySelectorMode: CountrySelectorMode;
 	allowedNumberTypes: NumberType[] | null;
 	allowNumberExtensions: boolean;
 	allowPhonewords: boolean;
+	classNames: ItiClassNames;
 	containerClass: string;
 	countryNameLocale: string;
 	countryNameOverrides: Partial<Record<Iso2, string>>;

package/dist/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v29.1.3
+ * International Telephone Input v29.2.0
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1798,6 +1798,29 @@ var _factory = (() => {
     // used for synthetic input trigger
     STRICT_REJECT: "strict:reject"
   };
+  var ITI_SLOTS = [
+    "container",
+    "input",
+    "countryContainer",
+    "selectedCountry",
+    "selectedCountryPrimary",
+    "selectedFlag",
+    "arrow",
+    "selectedDialCode",
+    "countrySelector",
+    "countrySelectorContainer",
+    "searchWrapper",
+    "searchIcon",
+    "searchInput",
+    "searchClear",
+    "countryList",
+    "countryListItem",
+    "countryListItemFlag",
+    "countryName",
+    "dialCode",
+    "countryCheck",
+    "noResults"
+  ];
   var CLASSES = {
     HIDE: "iti__hide",
     V_HIDE: "iti__v-hide",
@@ -1974,6 +1997,8 @@ var _factory = (() => {
     allowNumberExtensions: false,
     // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
     allowPhonewords: false,
+    //* Add custom classes to the elements we generate, keyed by slot name e.g. { selectedCountry: "rounded-l-lg" }.
+    classNames: {},
     //* Add a custom class to the (injected) container element.
     containerClass: "",
     //* Locale for localising country names via Intl.DisplayNames.
@@ -2036,6 +2061,7 @@ var _factory = (() => {
     return v.nodeType === 1 && typeof v.tagName === "string" && typeof v.appendChild === "function";
   };
   var placeholderPolicySet = new Set(Object.values(PLACEHOLDER_POLICY));
+  var slotSet = new Set(ITI_SLOTS);
   var warn = (message) => {
     console.warn(`[intl-tel-input] ${message}`);
   };
@@ -2136,6 +2162,26 @@ var _factory = (() => {
           }
           validatedOptions[key] = value;
           break;
+        case "classNames": {
+          if (!isPlainObject(value)) {
+            warnOption("classNames", "an object", value);
+            break;
+          }
+          const validSlots = {};
+          for (const [slot, slotValue] of Object.entries(value)) {
+            if (!slotSet.has(slot)) {
+              warn(
+                `Unknown slot '${slot}' in 'classNames'. Valid slots: ${ITI_SLOTS.join(", ")}. Skipping.`
+              );
+            } else if (typeof slotValue !== "string") {
+              warnOption(`classNames.${slot}`, "a string", slotValue);
+            } else {
+              validSlots[slot] = slotValue.trim().replace(/\s+/g, " ");
+            }
+          }
+          validatedOptions[key] = validSlots;
+          break;
+        }
         case "countryOrder": {
           if (value === null) {
             validatedOptions[key] = value;
@@ -2548,11 +2594,18 @@ var _factory = (() => {
         );
       }
     }
+    //* Append any consumer-supplied classes (via the classNames option) for the given slot to our own classes for that element.
+    #withSlotClass(slot, ourClasses) {
+      const custom = this.#options.classNames[slot];
+      return custom ? `${ourClasses} ${custom}` : ourClasses;
+    }
     //* Generate all of the markup for the core library: the selected country overlay, and the country selector.
     buildMarkup(countries, searchTokens) {
       this.#countries = countries;
       this.#searchTokens = searchTokens;
-      this.telInputEl.classList.add("iti__tel-input");
+      this.telInputEl.classList.add(
+        ...this.#withSlotClass("input", "iti__tel-input").split(" ")
+      );
       if (!this.telInputEl.hasAttribute("type")) {
         this.telInputEl.setAttribute("type", "tel");
       }
@@ -2580,7 +2633,9 @@ var _factory = (() => {
         "iti--inline-country-selector": countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN,
         [containerClass]: Boolean(containerClass)
       });
-      const wrapper = createEl("div", { class: parentClasses });
+      const wrapper = createEl("div", {
+        class: this.#withSlotClass("container", parentClasses)
+      });
       if (this.#isRTL) {
         wrapper.setAttribute("dir", "ltr");
       }
@@ -2596,7 +2651,12 @@ var _factory = (() => {
       this.#countryContainerEl = createEl(
         "div",
         // visibly hidden until we measure its width to set the input padding correctly
-        { class: `iti__country-container ${CLASSES.V_HIDE}` },
+        {
+          class: this.#withSlotClass(
+            "countryContainer",
+            `iti__country-container ${CLASSES.V_HIDE}`
+          )
+        },
         wrapper
       );
       if (enableCountrySelector) {
@@ -2604,7 +2664,7 @@ var _factory = (() => {
           "button",
           {
             type: "button",
-            class: "iti__selected-country",
+            class: this.#withSlotClass("selectedCountry", "iti__selected-country"),
             [ARIA.EXPANDED]: "false",
             [ARIA.LABEL]: this.#options.uiTranslations.noCountrySelected,
             [ARIA.HASPOPUP]: "dialog",
@@ -2618,31 +2678,44 @@ var _factory = (() => {
       } else {
         this.#selectedCountryEl = createEl(
           "div",
-          { class: "iti__selected-country" },
+          { class: this.#withSlotClass("selectedCountry", "iti__selected-country") },
           this.#countryContainerEl
         );
       }
       const selectedCountryPrimary = createEl(
         "div",
-        { class: "iti__selected-country-primary" },
+        {
+          class: this.#withSlotClass(
+            "selectedCountryPrimary",
+            "iti__selected-country-primary"
+          )
+        },
         this.#selectedCountryEl
       );
       this.#selectedFlagEl = createEl(
         "div",
-        { class: CLASSES.FLAG },
+        { class: this.#withSlotClass("selectedFlag", CLASSES.FLAG) },
         selectedCountryPrimary
       );
       if (enableCountrySelector) {
         this.#arrowEl = createEl(
           "div",
-          { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
+          {
+            class: this.#withSlotClass("arrow", "iti__arrow"),
+            [ARIA.HIDDEN]: "true"
+          },
           selectedCountryPrimary
         );
       }
       if (separateDialCode) {
         this.#selectedDialCodeEl = createEl(
           "div",
-          { class: "iti__selected-dial-code" },
+          {
+            class: this.#withSlotClass(
+              "selectedDialCode",
+              "iti__selected-dial-code"
+            )
+          },
           this.#selectedCountryEl
         );
       }
@@ -2673,7 +2746,10 @@ var _factory = (() => {
       const extraClasses = matchDropdownWidth ? "" : "iti--flexible-dropdown-width";
       this.#countrySelectorEl = createEl("div", {
         id: `iti-${this.#id}__country-selector`,
-        class: `iti__country-selector ${CLASSES.HIDE} ${extraClasses}`,
+        class: this.#withSlotClass(
+          "countrySelector",
+          `iti__country-selector ${CLASSES.HIDE} ${extraClasses}`
+        ),
         role: "dialog",
         [ARIA.MODAL]: "true"
       });
@@ -2686,7 +2762,7 @@ var _factory = (() => {
       this.#countryListEl = createEl(
         "ul",
         {
-          class: "iti__country-list",
+          class: this.#withSlotClass("countryList", "iti__country-list"),
           id: `iti-${this.#id}__country-listbox`,
           role: "listbox",
           [ARIA.LABEL]: uiTranslations.countryListAriaLabel
@@ -2705,7 +2781,9 @@ var _factory = (() => {
           "iti--inline-country-selector": !isFullscreen,
           [containerClass]: Boolean(containerClass)
         });
-        this.#detachedCountrySelectorEl = createEl("div", { class: wrapperClasses });
+        this.#detachedCountrySelectorEl = createEl("div", {
+          class: this.#withSlotClass("countrySelectorContainer", wrapperClasses)
+        });
         this.#detachedCountrySelectorEl.appendChild(this.#countrySelectorEl);
       } else {
         this.#countryContainerEl.appendChild(this.#countrySelectorEl);
@@ -2726,13 +2804,13 @@ var _factory = (() => {
       const { uiTranslations, searchInputClass } = this.#options;
       const searchWrapper = createEl(
         "div",
-        { class: "iti__search-input-wrapper" },
+        { class: this.#withSlotClass("searchWrapper", "iti__search-input-wrapper") },
         this.#countrySelectorEl
       );
       this.#searchIconEl = createEl(
         "span",
         {
-          class: "iti__search-icon",
+          class: this.#withSlotClass("searchIcon", "iti__search-icon"),
           [ARIA.HIDDEN]: "true"
         },
         searchWrapper
@@ -2744,7 +2822,10 @@ var _factory = (() => {
           id: `iti-${this.#id}__search-input`,
           // Chrome says inputs need either a name or an id
           type: "search",
-          class: `iti__search-input ${searchInputClass}`,
+          class: this.#withSlotClass(
+            "searchInput",
+            `iti__search-input ${searchInputClass}`
+          ),
           placeholder: uiTranslations.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",
@@ -2760,7 +2841,10 @@ var _factory = (() => {
         "button",
         {
           type: "button",
-          class: `iti__search-clear ${CLASSES.HIDE}`,
+          class: this.#withSlotClass(
+            "searchClear",
+            `iti__search-clear ${CLASSES.HIDE}`
+          ),
           [ARIA.LABEL]: uiTranslations.clearSearchAriaLabel,
           tabindex: "-1"
         },
@@ -2775,7 +2859,7 @@ var _factory = (() => {
       this.#noResultsMessageEl = createEl(
         "div",
         {
-          class: `iti__no-results ${CLASSES.HIDE}`,
+          class: this.#withSlotClass("noResults", `iti__no-results ${CLASSES.HIDE}`),
           [ARIA.HIDDEN]: "true"
           // all a11y messaging happens in this.#searchResultsLiveRegionEl
         },
@@ -2829,11 +2913,9 @@ var _factory = (() => {
     //* For each country: add a country list item <li> to the countryList <ul> container.
     #appendListItems() {
       const frag = document.createDocumentFragment();
+      const liClass = this.#withSlotClass("countryListItem", CLASSES.COUNTRY_ITEM);
       for (let i = 0; i < this.#countries.length; i++) {
         const c = this.#countries[i];
-        const liClass = buildClassNames({
-          [CLASSES.COUNTRY_ITEM]: true
-        });
         const listItem = createEl("li", {
           id: `iti-${this.#id}__item-${c.iso2}`,
           class: liClass,
@@ -2845,11 +2927,28 @@ var _factory = (() => {
         listItem.dataset[DATA_KEYS.ISO2] = c.iso2;
         this.#listItemByIso2.set(c.iso2, listItem);
         if (this.#options.showFlags) {
-          createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
+          createEl(
+            "div",
+            {
+              class: this.#withSlotClass(
+                "countryListItemFlag",
+                `${CLASSES.FLAG} iti__${c.iso2}`
+              )
+            },
+            listItem
+          );
         }
-        const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
+        const nameEl = createEl(
+          "span",
+          { class: this.#withSlotClass("countryName", "iti__country-name") },
+          listItem
+        );
         nameEl.textContent = `${c.name} `;
-        const dialEl = createEl("span", { class: "iti__dial-code" }, nameEl);
+        const dialEl = createEl(
+          "span",
+          { class: this.#withSlotClass("dialCode", "iti__dial-code") },
+          nameEl
+        );
         if (this.#isRTL) {
           dialEl.setAttribute("dir", "ltr");
         }
@@ -3296,7 +3395,10 @@ var _factory = (() => {
           newListItem.setAttribute(ARIA.SELECTED, "true");
           const checkIcon = createEl(
             "span",
-            { class: "iti__country-check", [ARIA.HIDDEN]: "true" },
+            {
+              class: this.#withSlotClass("countryCheck", "iti__country-check"),
+              [ARIA.HIDDEN]: "true"
+            },
             newListItem
           );
           checkIcon.appendChild(buildCheckIcon());
@@ -3483,7 +3585,10 @@ var _factory = (() => {
         this.#updateSelectedListItem(iso2);
       }
       if (this.#selectedCountryEl) {
-        const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
+        const flagClass = this.#withSlotClass(
+          "selectedFlag",
+          iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`
+        );
         let ariaLabel, title;
         let flagContent = null;
         if (iso2) {
@@ -4880,7 +4985,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtils: false,
       startedLoadingAutoCountry: false,
-      version: "29.1.3",
+      version: "29.2.0",
       NUMBER_FORMAT,
       NUMBER_TYPE,
       VALIDATION_ERROR,