intl-tel-input 24.3.6 → 24.3.7

package/vue/README.md

@@ -7,7 +7,7 @@ A Vue component wrapper for the [intl-tel-input](https://github.com/jackocnr/int
 - [Props](#props)
 
 ## Demo
-Try it for yourself by downloading the project and running `npm install` and then `npm run vue:demo` and then copying the given URL into your browser.
+Try it for yourself by downloading the project and running `npm install` and then `npm run vue:demo` and then copy the given URL into your browser. NOTE: the component is rendering the plugin correctly, but we still need help hooking up the [validation functionality](https://github.com/jackocnr/intl-tel-input/blob/master/vue/demo/validation/App.vue)!
 
 ## Getting Started
 ```vue
@@ -27,7 +27,7 @@ Try it for yourself by downloading the project and running `npm install` and the
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/vue/demo/validation/App.vue) for a more fleshed-out example of how to handle validation [COMING SOON].
 
-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/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `utilsScript` 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 `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.3.6/build/js/utils.js"`.
+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/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `utilsScript` 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 `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.3.7/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.

package/vue/build/IntlTelInput.mjs

@@ -1,4 +1,4 @@
-import { mergeModels as L, useModel as T, ref as w, onMounted as P, watch as x, onUnmounted as E, withDirectives as M, openBlock as B, createElementBlock as O, vModelText as V } from "vue";
+import { mergeModels as L, useModel as P, ref as v, onMounted as x, watch as E, onUnmounted as M, withDirectives as B, openBlock as O, createElementBlock as V, vModelText as F } from "vue";
 const D = [
   [
     "af",
@@ -1318,7 +1318,7 @@ for (let u = 0; u < D.length; u++) {
     nodeById: {}
   };
 }
-const F = {
+const z = {
   ad: "Andorra",
   ae: "United Arab Emirates",
   af: "Afghanistan",
@@ -1561,7 +1561,7 @@ const F = {
   za: "South Africa",
   zm: "Zambia",
   zw: "Zimbabwe"
-}, z = {
+}, R = {
   selectedCountryAriaLabel: "Selected country",
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
@@ -1572,10 +1572,10 @@ const F = {
   // additional countries (not supported by country-list library)
   ac: "Ascension Island",
   xk: "Kosovo"
-}, S = { ...F, ...z };
+}, S = { ...z, ...R };
 for (let u = 0; u < b.length; u++)
   b[u].name = S[b[u].iso2];
-let R = 0;
+let $ = 0;
 const k = {
   //* Whether or not to allow the dropdown.
   allowDropdown: !0,
@@ -1631,7 +1631,7 @@ const k = {
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
-}, $ = [
+}, j = [
   "800",
   "822",
   "833",
@@ -1653,10 +1653,10 @@ const k = {
   const t = I(u);
   if (t.charAt(0) === "1") {
     const e = t.substr(1, 3);
-    return $.indexOf(e) !== -1;
+    return j.indexOf(e) !== -1;
   }
   return !1;
-}, j = (u, t, e, i) => {
+}, K = (u, t, e, i) => {
   if (e === 0 && !i)
     return 0;
   let s = 0;
@@ -1667,16 +1667,16 @@ const k = {
       return n;
   }
   return t.length;
-}, m = (u, t, e) => {
+}, y = (u, t, e) => {
   const i = document.createElement(u);
   return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
 }, _ = (u) => {
   const { instances: t } = l;
   Object.values(t).forEach((e) => e[u]());
 };
-class K {
+class U {
   constructor(t, e = {}) {
-    this.id = R++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, k, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
+    this.id = $++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, k, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
   _init() {
@@ -1785,16 +1785,13 @@ class K {
     } = this.options;
     let C = "iti";
     t && (C += " iti--allow-dropdown"), i && (C += " iti--show-flags"), s && (C += ` ${s}`), r || (C += " iti--inline-dropdown");
-    const c = m("div", { class: C });
+    const c = y("div", { class: C });
     if ((h = this.telInput.parentNode) == null || h.insertBefore(c, this.telInput), t || i || e) {
-      this.countryContainer = m(
+      this.countryContainer = y(
         "div",
-        {
-          class: "iti__country-container",
-          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
-        },
+        { class: "iti__country-container" },
         c
-      ), t ? (this.selectedCountry = m(
+      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = y(
         "button",
         {
           type: "button",
@@ -1806,30 +1803,30 @@ class K {
           role: "combobox"
         },
         this.countryContainer
-      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m(
+      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = y(
         "div",
         { class: "iti__selected-country" },
         this.countryContainer
       );
-      const y = m("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      if (this.selectedCountryInner = m("div", { class: "iti__flag" }, y), this.selectedCountryA11yText = m(
+      const m = y("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
+      if (this.selectedCountryInner = y("div", { class: "iti__flag" }, m), this.selectedCountryA11yText = y(
         "span",
         { class: "iti__a11y-text" },
         this.selectedCountryInner
-      ), t && (this.dropdownArrow = m(
+      ), t && (this.dropdownArrow = y(
         "div",
         { class: "iti__arrow", "aria-hidden": "true" },
-        y
-      )), e && (this.selectedDialCode = m(
+        m
+      )), e && (this.selectedDialCode = y(
         "div",
         { class: "iti__selected-dial-code" },
         this.selectedCountry
       )), t) {
         const f = a ? "" : "iti--flexible-dropdown-width";
-        if (this.dropdownContent = m("div", {
+        if (this.dropdownContent = y("div", {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${f}`
-        }), p && (this.searchInput = m(
+        }), p && (this.searchInput = y(
           "input",
           {
             type: "text",
@@ -1843,11 +1840,11 @@ class K {
             autocomplete: "off"
           },
           this.dropdownContent
-        ), this.searchResultsA11yText = m(
+        ), this.searchResultsA11yText = y(
           "span",
           { class: "iti__a11y-text" },
           this.dropdownContent
-        )), this.countryList = m(
+        )), this.countryList = y(
           "ul",
           {
             class: "iti__country-list",
@@ -1858,17 +1855,17 @@ class K {
           this.dropdownContent
         ), this._appendListItems(), p && this._updateSearchResultsText(), o) {
           let g = "iti iti--container";
-          r ? g += " iti--fullscreen-popup" : g += " iti--inline-dropdown", this.dropdown = m("div", { class: g }), this.dropdown.appendChild(this.dropdownContent);
+          r ? g += " iti--fullscreen-popup" : g += " iti--inline-dropdown", this.dropdown = y("div", { class: g }), this.dropdown.appendChild(this.dropdownContent);
         } else
           this.countryContainer.appendChild(this.dropdownContent);
       }
     }
     if (c.appendChild(this.telInput), this._updateInputPadding(), n) {
-      const y = this.telInput.getAttribute("name") || "", f = n(y);
-      f.phone && (this.hiddenInput = m("input", {
+      const m = this.telInput.getAttribute("name") || "", f = n(m);
+      f.phone && (this.hiddenInput = y("input", {
         type: "hidden",
         name: f.phone
-      }), c.appendChild(this.hiddenInput)), f.country && (this.hiddenInputCountry = m("input", {
+      }), c.appendChild(this.hiddenInput)), f.country && (this.hiddenInputCountry = y("input", {
         type: "hidden",
         name: f.country
       }), c.appendChild(this.hiddenInputCountry));
@@ -1877,7 +1874,7 @@ class K {
   //* For each country: add a country list item <li> to the countryList <ul> container.
   _appendListItems() {
     for (let t = 0; t < this.countries.length; t++) {
-      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m(
+      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = y(
         "li",
         {
           id: `iti-${this.id}__item-${e.iso2}`,
@@ -1965,8 +1962,8 @@ class K {
     let a = !1;
     new RegExp("\\p{L}", "u").test(this.telInput.value) && (a = !0), this._handleInputEvent = (r) => {
       if (this.isAndroid && (r == null ? void 0 : r.data) === "+" && i && n && o) {
-        const c = this.telInput.selectionStart || 0, h = this.telInput.value.substring(0, c - 1), y = this.telInput.value.substring(c);
-        this.telInput.value = h + y, this._openDropdownWithPlus();
+        const c = this.telInput.selectionStart || 0, h = this.telInput.value.substring(0, c - 1), m = this.telInput.value.substring(c);
+        this.telInput.value = h + m, this._openDropdownWithPlus();
         return;
       }
       this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
@@ -1974,8 +1971,8 @@ class K {
       p || d && !t ? a = !0 : /[^+0-9]/.test(this.telInput.value) || (a = !1);
       const C = (r == null ? void 0 : r.detail) && r.detail.isSetNumber && !s;
       if (e && !a && !C) {
-        const c = this.telInput.selectionStart || 0, y = this.telInput.value.substring(0, c).replace(/[^+0-9]/g, "").length, f = (r == null ? void 0 : r.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), v = j(y, g, c, f);
-        this.telInput.value = g, this.telInput.setSelectionRange(v, v);
+        const c = this.telInput.selectionStart || 0, m = this.telInput.value.substring(0, c).replace(/[^+0-9]/g, "").length, f = (r == null ? void 0 : r.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), w = K(m, g, c, f);
+        this.telInput.value = g, this.telInput.setSelectionRange(w, w);
       }
     }, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (r) => {
       if (r.key && r.key.length === 1 && !r.altKey && !r.ctrlKey && !r.metaKey) {
@@ -1984,8 +1981,8 @@ class K {
           return;
         }
         if (t) {
-          const p = this.telInput.selectionStart === 0 && r.key === "+", d = /^[0-9]$/.test(r.key), C = i ? d : p || d, c = this._getFullNumber(), h = l.utils.getCoreNumber(c, this.selectedCountryData.iso2), y = this.maxCoreNumberLength && h.length >= this.maxCoreNumberLength, f = this.telInput.value.substring(this.telInput.selectionStart, this.telInput.selectionEnd), g = /\d/.test(f);
-          (!C || y && !g) && r.preventDefault();
+          const p = this.telInput.selectionStart === 0 && r.key === "+", d = /^[0-9]$/.test(r.key), C = i ? d : p || d, c = this._getFullNumber(), h = l.utils.getCoreNumber(c, this.selectedCountryData.iso2), m = this.maxCoreNumberLength && h.length >= this.maxCoreNumberLength, f = this.telInput.value.substring(this.telInput.selectionStart, this.telInput.selectionEnd), g = /\d/.test(f), T = (this.telInput.selectionStart || 0) === this.telInput.value.length;
+          (!C || m && !g && T) && r.preventDefault();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
@@ -2442,7 +2439,7 @@ class K {
     this.telInput.disabled = t, t ? this.selectedCountry.setAttribute("disabled", "true") : this.selectedCountry.removeAttribute("disabled");
   }
 }
-const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUtilsScript = !0, new Promise((t, e) => {
+const H = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUtilsScript = !0, new Promise((t, e) => {
   import(
     /* webpackIgnore: true */
     /* @vite-ignore */
@@ -2454,7 +2451,7 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
   });
 })) : null, l = Object.assign(
   (u, t) => {
-    const e = new K(u, t);
+    const e = new U(u, t);
     return e._init(), u.setAttribute("data-intl-tel-input-id", e.id.toString()), l.instances[e.id] = e, e;
   },
   {
@@ -2470,10 +2467,10 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     },
     //* A map from instance ID to instance object.
     instances: {},
-    loadUtils: U,
-    version: "24.3.6"
+    loadUtils: H,
+    version: "24.3.7"
   }
-), G = {
+), W = {
   __name: "IntlTelInput",
   props: /* @__PURE__ */ L({
     options: {
@@ -2496,7 +2493,7 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
   }),
   emits: /* @__PURE__ */ L(["changeNumber", "changeCountry", "changeValidity", "changeErrorCode"], ["update:modelValue"]),
   setup(u, { expose: t, emit: e }) {
-    const i = T(u, "modelValue"), s = u, n = e, o = w(), a = w(), r = w(!1), p = () => a.value ? s.options.strictMode ? a.value.isValidNumberPrecise() : a.value.isValidNumber() : null, d = () => {
+    const i = P(u, "modelValue"), s = u, n = e, o = v(), a = v(), r = v(!1), p = () => a.value ? s.options.strictMode ? a.value.isValidNumberPrecise() : a.value.isValidNumber() : null, d = () => {
       let h = p();
       r.value !== h && (r.value = h, n("changeValidity", !!h), n("changeErrorCode", h ? null : a.value.getValidationError()));
     }, C = () => {
@@ -2506,29 +2503,29 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
       var h;
       n("changeCountry", ((h = a.value) == null ? void 0 : h.getSelectedCountryData().iso2) ?? ""), C(), d();
     };
-    return P(() => {
+    return x(() => {
       o.value && (a.value = l(o.value, s.options), s.value && a.value.setNumber(s.value), s.disabled && a.value.setDisabled(s.disabled));
-    }), x(
+    }), E(
       () => s.disabled,
       (h) => {
-        var y;
-        return (y = a.value) == null ? void 0 : y.setDisabled(h);
+        var m;
+        return (m = a.value) == null ? void 0 : m.setDisabled(h);
       }
-    ), E(() => {
+    ), M(() => {
       var h;
       return (h = a.value) == null ? void 0 : h.destroy();
-    }), t({ instance: a, input: o }), (h, y) => M((B(), O("input", {
+    }), t({ instance: a, input: o }), (h, m) => B((O(), V("input", {
       ref_key: "input",
       ref: o,
-      "onUpdate:modelValue": y[0] || (y[0] = (f) => i.value = f),
+      "onUpdate:modelValue": m[0] || (m[0] = (f) => i.value = f),
       type: "tel",
       onCountrychange: c,
       onInput: C
     }, null, 544)), [
-      [V, i.value]
+      [F, i.value]
     ]);
   }
 };
 export {
-  G as default
+  W as default
 };