intl-tel-input 28.0.3 → 28.0.5

package/dist/js/intlTelInput.mjs

@@ -2250,40 +2250,62 @@ var createEl = (tagName, attrs, container) => {
 };
 
 // packages/core/src/js/core/icons.ts
-var buildSearchIcon = () => `
-  <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
-    <circle cx="11" cy="11" r="7" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  </svg>`;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var buildSvg = ([tag, attrs, children]) => {
+  const el = document.createElementNS(SVG_NS, tag);
+  if (attrs) {
+    for (const k in attrs) {
+      el.setAttribute(k, String(attrs[k]));
+    }
+  }
+  if (children) {
+    for (const c of children) {
+      el.appendChild(buildSvg(c));
+    }
+  }
+  return el;
+};
+var buildSearchIcon = () => buildSvg(
+  ["svg", { class: "iti__search-icon-svg", width: 14, height: 14, viewBox: "0 0 24 24", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["circle", { cx: 11, cy: 11, r: 7 }],
+    ["line", { x1: 21, y1: 21, x2: 16.65, y2: 16.65 }]
+  ]]
+);
 var buildClearIcon = (id) => {
   const maskId = `iti-${id}-clear-mask`;
-  return `
-    <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" ${ARIA.HIDDEN}="true" focusable="false">
-      <mask id="${maskId}" maskUnits="userSpaceOnUse">
-        <rect width="16" height="16" fill="white" />
-        <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
-      </mask>
-      <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
-    </svg>`;
+  return buildSvg(
+    ["svg", { class: "iti__search-clear-svg", width: 12, height: 12, viewBox: "0 0 16 16", [ARIA.HIDDEN]: "true", focusable: "false" }, [
+      ["mask", { id: maskId, maskUnits: "userSpaceOnUse" }, [
+        ["rect", { width: 16, height: 16, fill: "white" }],
+        ["path", { d: "M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8", stroke: "black", "stroke-linecap": "round", class: "iti__search-clear-x" }]
+      ]],
+      ["circle", { cx: 8, cy: 8, r: 8, class: "iti__search-clear-bg", mask: `url(#${maskId})` }]
+    ]]
+  );
 };
-var buildCheckIcon = () => `
-  <svg class="iti__country-check-svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" focusable="false" ${ARIA.HIDDEN}="true">
-    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-  </svg>`;
-var buildGlobeIcon = () => `
-  <svg width="256" height="256" viewBox="0 0 512 512" class="iti__globe-svg">
-    <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
-    <path d="m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40"/>
-  </svg>`;
+var buildCheckIcon = () => buildSvg(
+  ["svg", { class: "iti__country-check-svg", width: 14, height: 14, viewBox: "0 0 16 16", fill: "currentColor", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }]
+  ]]
+);
+var buildGlobeIcon = () => buildSvg(
+  ["svg", { width: 256, height: 256, viewBox: "0 0 512 512", class: "iti__globe-svg" }, [
+    ["path", { d: "M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39" }],
+    ["path", { d: "m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40" }]
+  ]]
+);
 
 // packages/core/src/js/core/countrySearch.ts
+var normaliseName = (s) => normaliseString(s).replace(/[^\p{L}]+/gu, " ").trim();
 var buildSearchTokens = (countries) => {
   const tokens = /* @__PURE__ */ new Map();
   for (const c of countries) {
-    const normalisedName = normaliseString(c.name);
-    const initials = normalisedName.split(/[^a-z]/).map((word) => word[0]).join("");
+    const normalisedName = normaliseName(c.name);
+    const words = normalisedName.split(" ").filter(Boolean);
+    const initials = words.map((w) => w[0] || "").join("");
     tokens.set(c.iso2, {
       normalisedName,
+      words,
       initials,
       dialCodePlus: `+${c.dialCode}`
     });
@@ -2291,29 +2313,49 @@ var buildSearchTokens = (countries) => {
   return tokens;
 };
 var getMatchedCountries = (countries, searchTokens, query) => {
-  const normalisedQuery = normaliseString(query);
+  const lowerQuery = normaliseString(query);
+  const nameQuery = normaliseName(query);
+  const skipNameBuckets = lowerQuery !== "" && nameQuery === "";
   const iso2Matches = [];
   const nameStartsWith = [];
   const nameContains = [];
   const dialCodeMatches = [];
   const dialCodeContains = [];
   const initialsMatches = [];
+  const wordMatches = [];
   for (const c of countries) {
     const t = searchTokens.get(c.iso2);
-    if (c.iso2 === normalisedQuery) {
+    if (c.iso2 === lowerQuery) {
       iso2Matches.push(c);
-    } else if (t.normalisedName.startsWith(normalisedQuery)) {
+    } else if (!skipNameBuckets && t.normalisedName.startsWith(nameQuery)) {
       nameStartsWith.push(c);
-    } else if (t.normalisedName.includes(normalisedQuery)) {
+    } else if (!skipNameBuckets && t.normalisedName.includes(nameQuery)) {
       nameContains.push(c);
-    } else if (normalisedQuery === c.dialCode || normalisedQuery === t.dialCodePlus) {
+    } else if (lowerQuery === c.dialCode || lowerQuery === t.dialCodePlus) {
       dialCodeMatches.push(c);
-    } else if (t.dialCodePlus.includes(normalisedQuery)) {
+    } else if (t.dialCodePlus.includes(lowerQuery)) {
       dialCodeContains.push(c);
-    } else if (t.initials.includes(normalisedQuery)) {
+    } else if (t.initials.includes(lowerQuery)) {
       initialsMatches.push(c);
     }
   }
+  const queryWords = nameQuery.split(" ").filter(Boolean);
+  if (queryWords.length > 1 && iso2Matches.length === 0 && nameStartsWith.length === 0 && nameContains.length === 0) {
+    const claimed = /* @__PURE__ */ new Set([
+      ...dialCodeMatches.map((c) => c.iso2),
+      ...dialCodeContains.map((c) => c.iso2),
+      ...initialsMatches.map((c) => c.iso2)
+    ]);
+    for (const c of countries) {
+      if (claimed.has(c.iso2)) {
+        continue;
+      }
+      const t = searchTokens.get(c.iso2);
+      if (queryWords.some((qw) => t.words.some((sw) => sw.startsWith(qw)))) {
+        wordMatches.push(c);
+      }
+    }
+  }
   const sortByPriority = (a, b) => a.priority - b.priority;
   return [
     ...iso2Matches,
@@ -2322,14 +2364,15 @@ var getMatchedCountries = (countries, searchTokens, query) => {
     // priority sort is only relevant when showing multiple countries with the same dial code (that's what the priority field is used to distinguish between)
     ...dialCodeMatches.sort(sortByPriority),
     ...dialCodeContains.sort(sortByPriority),
-    ...initialsMatches
+    ...initialsMatches,
+    ...wordMatches
   ];
 };
 var findFirstCountryStartingWith = (countries, searchTokens, query) => {
-  const normalisedQuery = normaliseString(query);
+  const nameQuery = normaliseName(query);
   for (const c of countries) {
     const { normalisedName } = searchTokens.get(c.iso2);
-    if (normalisedName.startsWith(normalisedQuery)) {
+    if (normalisedName.startsWith(nameQuery)) {
       return c;
     }
   }
@@ -2627,7 +2670,7 @@ var UI = class _UI {
       },
       searchWrapper
     );
-    this.#searchIconEl.innerHTML = buildSearchIcon();
+    this.#searchIconEl.appendChild(buildSearchIcon());
     this.#searchInputEl = createEl(
       "input",
       {
@@ -2656,7 +2699,7 @@ var UI = class _UI {
       },
       searchWrapper
     );
-    this.#searchClearButtonEl.innerHTML = buildClearIcon(this.#id);
+    this.#searchClearButtonEl.appendChild(buildClearIcon(this.#id));
     this.#searchResultsLiveRegionEl = createEl(
       "span",
       { class: "iti__a11y-text" },
@@ -3156,7 +3199,7 @@ var UI = class _UI {
           { class: "iti__country-check", [ARIA.HIDDEN]: "true" },
           newListItem
         );
-        checkIcon.innerHTML = buildCheckIcon();
+        checkIcon.appendChild(buildCheckIcon());
         this.#selectedListItemEl = newListItem;
         if (this.#options.dropdownAlwaysOpen) {
           this.#highlightListItem(newListItem);
@@ -3301,20 +3344,27 @@ var UI = class _UI {
     }
     if (this.#selectedCountryEl) {
       const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
-      let ariaLabel, title, flagInnerHtml;
+      let ariaLabel, title;
+      let flagContent = null;
       if (iso2) {
         title = name;
         ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
-        flagInnerHtml = showFlags ? "" : buildGlobeIcon();
+        if (!showFlags) {
+          flagContent = buildGlobeIcon();
+        }
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
-        flagInnerHtml = buildGlobeIcon();
+        flagContent = buildGlobeIcon();
       }
       this.#selectedFlagEl.className = flagClass;
       this.#selectedCountryEl.setAttribute("title", title);
       this.#selectedCountryEl.setAttribute(ARIA.LABEL, ariaLabel);
-      this.#selectedFlagEl.innerHTML = flagInnerHtml;
+      if (flagContent) {
+        this.#selectedFlagEl.replaceChildren(flagContent);
+      } else {
+        this.#selectedFlagEl.replaceChildren();
+      }
     }
     if (separateDialCode) {
       const fullDialCode = dialCode ? `+${dialCode}` : "";
@@ -4633,7 +4683,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.3",
+    version: "28.0.5",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR