intl-tel-input 28.0.2 → 28.0.4

package/dist/js/intlTelInput.mjs

@@ -1965,7 +1965,7 @@ var defaults = {
   //* A function to load the utils script.
   loadUtils: null,
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
-  nationalMode: true,
+  nationalMode: false,
   //* Display only these countries.
   onlyCountries: null,
   //* Number type to use for placeholders.
@@ -2250,31 +2250,50 @@ 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 buildSearchTokens = (countries) => {
@@ -2627,7 +2646,7 @@ var UI = class _UI {
       },
       searchWrapper
     );
-    this.#searchIconEl.innerHTML = buildSearchIcon();
+    this.#searchIconEl.appendChild(buildSearchIcon());
     this.#searchInputEl = createEl(
       "input",
       {
@@ -2656,7 +2675,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 +3175,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 +3320,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 +4659,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.2",
+    version: "28.0.4",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR

package/dist/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v28.0.2
+ * International Telephone Input v28.0.4
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1996,7 +1996,7 @@ var _factory = (() => {
     //* A function to load the utils script.
     loadUtils: null,
     //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
-    nationalMode: true,
+    nationalMode: false,
     //* Display only these countries.
     onlyCountries: null,
     //* Number type to use for placeholders.
@@ -2281,31 +2281,50 @@ var _factory = (() => {
   };
 
   // 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 buildSearchTokens = (countries) => {
@@ -2658,7 +2677,7 @@ var _factory = (() => {
         },
         searchWrapper
       );
-      this.#searchIconEl.innerHTML = buildSearchIcon();
+      this.#searchIconEl.appendChild(buildSearchIcon());
       this.#searchInputEl = createEl(
         "input",
         {
@@ -2687,7 +2706,7 @@ var _factory = (() => {
         },
         searchWrapper
       );
-      this.#searchClearButtonEl.innerHTML = buildClearIcon(this.#id);
+      this.#searchClearButtonEl.appendChild(buildClearIcon(this.#id));
       this.#searchResultsLiveRegionEl = createEl(
         "span",
         { class: "iti__a11y-text" },
@@ -3187,7 +3206,7 @@ var _factory = (() => {
             { class: "iti__country-check", [ARIA.HIDDEN]: "true" },
             newListItem
           );
-          checkIcon.innerHTML = buildCheckIcon();
+          checkIcon.appendChild(buildCheckIcon());
           this.#selectedListItemEl = newListItem;
           if (this.#options.dropdownAlwaysOpen) {
             this.#highlightListItem(newListItem);
@@ -3332,20 +3351,27 @@ var _factory = (() => {
       }
       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}` : "";
@@ -4664,7 +4690,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtils: false,
       startedLoadingAutoCountry: false,
-      version: "28.0.2",
+      version: "28.0.4",
       NUMBER_FORMAT,
       NUMBER_TYPE,
       VALIDATION_ERROR