intl-tel-input 24.3.7 → 24.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "24.3.7",
+  "version": "24.4.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-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/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` 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"`.
+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/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` 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.4.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -3102,7 +3102,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.3.7"
+    version: "24.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -3066,7 +3066,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.3.7"
+    version: "24.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -3102,7 +3102,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.3.7"
+    version: "24.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -3066,7 +3066,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.3.7"
+    version: "24.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/README.md

@@ -5,9 +5,12 @@ A Vue component wrapper for the [intl-tel-input](https://github.com/jackocnr/int
 - [Demo](#demo)
 - [Getting Started](#getting-started)
 - [Props](#props)
+- [Events](#events)
+- [Accessing Instance Methods](#accessing-instance-methods)
+- [Accessing Static Methods](#accessing-static-methods)
 
 ## Demo
-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)!
+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.
 
 ## Getting Started
 ```vue
@@ -25,15 +28,56 @@ Try it for yourself by downloading the project and running `npm install` and the
 </template>
 ```
 
-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].
+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. Make sure to change the path in the `package.json` script to the correct demo if you're running it locally e.g.:
 
-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"`.
+```
+"vue:demo": "vite --config vue/demo/[demo variant]/vite.config.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.4.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.
 
-**options**  
-Type: `Object`  
+**disabled**
+Type: `Boolean`, Default: `false`
+Sets the disabled attribute of both the telephone input and selected country button. *Note: we recommend using this instead of `inputProps.disabled`.*
+
+**inputProps**
+Type: `Object`
+The props to pass to the input element e.g. `id`, `class`, `placeholder`, `required`, `onBlur` etc. *Note: we recommend using the separate `disabled` prop instead of `inputProps.disabled`.*
+
+**options**
+Type: `Object`
 An object containing the [initialisation options](https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#initialisation-options) to pass to the plugin. You can use these exactly the same way as with the main JavaScript plugin.
 
-[MORE COMING SOON]
+**value**
+Type: `String`
+The initial value to put in the input. This will get auto-formatted on init (according to `formatOnDisplay` initialisation option). IntlTelInput is an uncontrolled input, and so will ignore any changes to this value.
+
+## Events
+Here's a list of all of the current events you can listen to on the IntlTelInput Vue component.
+
+**changeCountry**
+Type: `Function`
+A handler to be called when the selected country changes. It will be passed the new country iso2 code e.g. "gb" for UK.
+
+**changeErrorCode**
+Type: `Function`
+A handler to be called when the number validation error changes. It will be passed the new error code (or `null`).
+
+**changeNumber**
+Type: `Function`
+A handler to be called when the number changes. It will be passed the new number.
+
+**changeValidity**
+Type: `Function`
+A handler to be called when the number validity changes e.g. to true/false. It will be passed the new isValid boolean.
+
+## Accessing Instance Methods
+
+You can access all of the plugin's [instance methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#instance-methods) (`setNumber`, `setCountry`, `setPlaceholderNumberType` etc) by passing a ref into the IntlTelInput component (using the `ref` prop), and then calling `ref.intlTelInput.instance` e.g. `ref.intlTelInput.instance.setNumber(...);`. See the [Set Number demo](https://github.com/jackocnr/intl-tel-input/blob/master/vue/demo/set-number/App.vue) for a full example. You can also access the input DOM element in a similar way: `ref.intlTelInput.input`.
+
+## Accessing Static Methods
+
+You can access all of the plugin's [static methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#static-methods) by importing `intlTelInput` from the same file as the Vue component e.g. `import { intlTelInput } from "intl-tel-input/vue"` (note the lower case "i" in "intlTelInput"). You can then use this as you would with the main plugin e.g. `intlTelInput.getCountryData()` or `intlTelInput.utils.numberType` etc.

package/vue/build/IntlTelInput.mjs

@@ -1,4 +1,4 @@
-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";
+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, mergeProps as F, vModelText as z } from "vue";
 const D = [
   [
     "af",
@@ -1318,7 +1318,7 @@ for (let u = 0; u < D.length; u++) {
     nodeById: {}
   };
 }
-const z = {
+const R = {
   ad: "Andorra",
   ae: "United Arab Emirates",
   af: "Afghanistan",
@@ -1561,7 +1561,7 @@ const z = {
   za: "South Africa",
   zm: "Zambia",
   zw: "Zimbabwe"
-}, R = {
+}, $ = {
   selectedCountryAriaLabel: "Selected country",
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
@@ -1572,10 +1572,10 @@ const z = {
   // additional countries (not supported by country-list library)
   ac: "Ascension Island",
   xk: "Kosovo"
-}, S = { ...z, ...R };
+}, S = { ...R, ...$ };
 for (let u = 0; u < b.length; u++)
   b[u].name = S[b[u].iso2];
-let $ = 0;
+let j = 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 = [
+}, K = [
   "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 j.indexOf(e) !== -1;
+    return K.indexOf(e) !== -1;
   }
   return !1;
-}, K = (u, t, e, i) => {
+}, U = (u, t, e, i) => {
   if (e === 0 && !i)
     return 0;
   let s = 0;
@@ -1674,9 +1674,9 @@ const k = {
   const { instances: t } = l;
   Object.values(t).forEach((e) => e[u]());
 };
-class U {
+class H {
   constructor(t, e = {}) {
-    this.id = $++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, k, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
+    this.id = j++, 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() {
@@ -1971,7 +1971,7 @@ class U {
       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, 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);
+        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 = U(m, g, c, f);
         this.telInput.value = g, this.telInput.setSelectionRange(w, w);
       }
     }, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (r) => {
@@ -2439,7 +2439,7 @@ class U {
     this.telInput.disabled = t, t ? this.selectedCountry.setAttribute("disabled", "true") : this.selectedCountry.removeAttribute("disabled");
   }
 }
-const H = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUtilsScript = !0, new Promise((t, e) => {
+const G = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUtilsScript = !0, new Promise((t, e) => {
   import(
     /* webpackIgnore: true */
     /* @vite-ignore */
@@ -2451,7 +2451,7 @@ const H = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
   });
 })) : null, l = Object.assign(
   (u, t) => {
-    const e = new U(u, t);
+    const e = new H(u, t);
     return e._init(), u.setAttribute("data-intl-tel-input-id", e.id.toString()), l.instances[e.id] = e, e;
   },
   {
@@ -2467,12 +2467,20 @@ const H = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     },
     //* A map from instance ID to instance object.
     instances: {},
-    loadUtils: H,
-    version: "24.3.7"
+    loadUtils: G,
+    version: "24.4.0"
   }
-), W = {
+), q = {
   __name: "IntlTelInput",
   props: /* @__PURE__ */ L({
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    inputProps: {
+      type: Object,
+      default: () => ({})
+    },
     options: {
       type: Object,
       default: () => ({})
@@ -2480,9 +2488,6 @@ const H = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     value: {
       type: String,
       default: ""
-    },
-    disabled: {
-      type: Boolean
     }
   }, {
     modelValue: {
@@ -2491,11 +2496,19 @@ const H = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ L(["changeNumber", "changeCountry", "changeValidity", "changeErrorCode"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ L([
+    "changeNumber",
+    "changeCountry",
+    "changeValidity",
+    "changeErrorCode"
+  ], ["update:modelValue"]),
   setup(u, { expose: t, emit: e }) {
     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()));
+      r.value !== h && (r.value = h, n("changeValidity", !!h), n(
+        "changeErrorCode",
+        h ? null : a.value.getValidationError()
+      ));
     }, C = () => {
       var h;
       n("changeNumber", ((h = a.value) == null ? void 0 : h.getNumber()) ?? ""), d();
@@ -2514,18 +2527,18 @@ const H = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     ), M(() => {
       var h;
       return (h = a.value) == null ? void 0 : h.destroy();
-    }), t({ instance: a, input: o }), (h, m) => B((O(), V("input", {
+    }), t({ instance: a, input: o }), (h, m) => B((O(), V("input", F({
       ref_key: "input",
       ref: o,
       "onUpdate:modelValue": m[0] || (m[0] = (f) => i.value = f),
       type: "tel",
       onCountrychange: c,
       onInput: C
-    }, null, 544)), [
-      [F, i.value]
+    }, u.inputProps), null, 16)), [
+      [z, i.value]
     ]);
   }
 };
 export {
-  W as default
+  q as default
 };

package/vue/build/IntlTelInputWithUtils.mjs

@@ -1,4 +1,4 @@
-import { mergeModels as e2, useModel as T2, ref as _1, onMounted as L2, watch as N2, onUnmounted as E2, withDirectives as D2, openBlock as M2, createElementBlock as x2, vModelText as P2 } from "vue";
+import { mergeModels as e2, useModel as T2, ref as _1, onMounted as L2, watch as N2, onUnmounted as E2, withDirectives as D2, openBlock as M2, createElementBlock as P2, mergeProps as x2, vModelText as R2 } from "vue";
 const $2 = [
   [
     "af",
@@ -1318,7 +1318,7 @@ for (let y = 0; y < $2.length; y++) {
     nodeById: {}
   };
 }
-const R2 = {
+const B2 = {
   ad: "Andorra",
   ae: "United Arab Emirates",
   af: "Afghanistan",
@@ -1561,7 +1561,7 @@ const R2 = {
   za: "South Africa",
   zm: "Zambia",
   zw: "Zimbabwe"
-}, B2 = {
+}, k2 = {
   selectedCountryAriaLabel: "Selected country",
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
@@ -1572,10 +1572,10 @@ const R2 = {
   // additional countries (not supported by country-list library)
   ac: "Ascension Island",
   xk: "Kosovo"
-}, s2 = { ...R2, ...B2 };
+}, s2 = { ...B2, ...k2 };
 for (let y = 0; y < H.length; y++)
   H[y].name = s2[H[y].iso2];
-let k2 = 0;
+let O2 = 0;
 const r2 = {
   //* Whether or not to allow the dropdown.
   allowDropdown: !0,
@@ -1631,7 +1631,7 @@ const r2 = {
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
-}, O2 = [
+}, G2 = [
   "800",
   "822",
   "833",
@@ -1653,10 +1653,10 @@ const r2 = {
   const e = c1(y);
   if (e.charAt(0) === "1") {
     const i = e.substr(1, 3);
-    return O2.indexOf(i) !== -1;
+    return G2.indexOf(i) !== -1;
   }
   return !1;
-}, G2 = (y, e, i, s) => {
+}, U2 = (y, e, i, s) => {
   if (i === 0 && !s)
     return 0;
   let u = 0;
@@ -1674,9 +1674,9 @@ const r2 = {
   const { instances: e } = C;
   Object.values(e).forEach((i) => i[y]());
 };
-class U2 {
+class F2 {
   constructor(e, i = {}) {
-    this.id = k2++, this.telInput = e, this.highlightedItem = null, this.options = Object.assign({}, r2, i), this.hadInitialPlaceholder = !!e.getAttribute("placeholder");
+    this.id = O2++, this.telInput = e, this.highlightedItem = null, this.options = Object.assign({}, r2, i), this.hadInitialPlaceholder = !!e.getAttribute("placeholder");
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
   _init() {
@@ -1822,10 +1822,10 @@ class U2 {
         { class: "iti__selected-dial-code" },
         this.selectedCountry
       )), e) {
-        const x = p ? "" : "iti--flexible-dropdown-width";
+        const P = p ? "" : "iti--flexible-dropdown-width";
         if (this.dropdownContent = N("div", {
           id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${x}`
+          class: `iti__dropdown-content iti__hide ${P}`
         }), b && (this.searchInput = N(
           "input",
           {
@@ -1861,13 +1861,13 @@ class U2 {
       }
     }
     if (S.appendChild(this.telInput), this._updateInputPadding(), a) {
-      const T = this.telInput.getAttribute("name") || "", x = a(T);
-      x.phone && (this.hiddenInput = N("input", {
+      const T = this.telInput.getAttribute("name") || "", P = a(T);
+      P.phone && (this.hiddenInput = N("input", {
         type: "hidden",
-        name: x.phone
-      }), S.appendChild(this.hiddenInput)), x.country && (this.hiddenInputCountry = N("input", {
+        name: P.phone
+      }), S.appendChild(this.hiddenInput)), P.country && (this.hiddenInputCountry = N("input", {
         type: "hidden",
-        name: x.country
+        name: P.country
       }), S.appendChild(this.hiddenInputCountry));
     }
   }
@@ -1971,7 +1971,7 @@ class U2 {
       b || _ && !e ? p = !0 : /[^+0-9]/.test(this.telInput.value) || (p = !1);
       const A = (g == null ? void 0 : g.detail) && g.detail.isSetNumber && !u;
       if (i && !p && !A) {
-        const S = this.telInput.selectionStart || 0, T = this.telInput.value.substring(0, S).replace(/[^+0-9]/g, "").length, x = (g == null ? void 0 : g.inputType) === "deleteContentForward", O = this._formatNumberAsYouType(), J = G2(T, O, S, x);
+        const S = this.telInput.selectionStart || 0, T = this.telInput.value.substring(0, S).replace(/[^+0-9]/g, "").length, P = (g == null ? void 0 : g.inputType) === "deleteContentForward", O = this._formatNumberAsYouType(), J = U2(T, O, S, P);
         this.telInput.value = O, this.telInput.setSelectionRange(J, J);
       }
     }, this.telInput.addEventListener("input", this._handleInputEvent), (e || s) && (this._handleKeydownEvent = (g) => {
@@ -1981,7 +1981,7 @@ class U2 {
           return;
         }
         if (e) {
-          const b = this.telInput.selectionStart === 0 && g.key === "+", _ = /^[0-9]$/.test(g.key), A = s ? _ : b || _, S = this._getFullNumber(), I = C.utils.getCoreNumber(S, this.selectedCountryData.iso2), T = this.maxCoreNumberLength && I.length >= this.maxCoreNumberLength, x = this.telInput.value.substring(this.telInput.selectionStart, this.telInput.selectionEnd), O = /\d/.test(x), f1 = (this.telInput.selectionStart || 0) === this.telInput.value.length;
+          const b = this.telInput.selectionStart === 0 && g.key === "+", _ = /^[0-9]$/.test(g.key), A = s ? _ : b || _, S = this._getFullNumber(), I = C.utils.getCoreNumber(S, this.selectedCountryData.iso2), T = this.maxCoreNumberLength && I.length >= this.maxCoreNumberLength, P = this.telInput.value.substring(this.telInput.selectionStart, this.telInput.selectionEnd), O = /\d/.test(P), f1 = (this.telInput.selectionStart || 0) === this.telInput.value.length;
           (!A || T && !O && f1) && g.preventDefault();
         }
       }
@@ -2439,7 +2439,7 @@ class U2 {
     this.telInput.disabled = e, e ? this.selectedCountry.setAttribute("disabled", "true") : this.selectedCountry.removeAttribute("disabled");
   }
 }
-const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUtilsScript = !0, new Promise((e, i) => {
+const V2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUtilsScript = !0, new Promise((e, i) => {
   import_INTENTIONALLY_BROKEN(
     /* webpackIgnore: true */
     /* @vite-ignore */
@@ -2451,7 +2451,7 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
   });
 })) : null, C = Object.assign(
   (y, e) => {
-    const i = new U2(y, e);
+    const i = new F2(y, e);
     return i._init(), y.setAttribute("data-intl-tel-input-id", i.id.toString()), C.instances[i.id] = i, i;
   },
   {
@@ -2467,8 +2467,8 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
     },
     //* A map from instance ID to instance object.
     instances: {},
-    loadUtils: F2,
-    version: "24.3.7"
+    loadUtils: V2,
+    version: "24.4.0"
   }
 );
 (function() {
@@ -2537,7 +2537,7 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
   new A();
   function S(d, t) {
     switch (this.g = d, this.l = !!t.aa, this.h = t.i, this.s = t.type, this.o = !1, this.h) {
-      case x:
+      case P:
       case O:
       case J:
       case f1:
@@ -2548,7 +2548,7 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
     }
     this.j = t.defaultValue;
   }
-  var I = 1, T = 2, x = 3, O = 4, J = 6, f1 = 16, o2 = 18;
+  var I = 1, T = 2, P = 3, O = 4, J = 6, f1 = 16, o2 = 18;
   function u2(d, t) {
     for (this.h = d, this.g = {}, d = 0; d < t.length; d++) {
       var $ = t[d];
@@ -2560,16 +2560,16 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
       return t.g - $.g;
     }), d;
   }
-  function P() {
+  function x() {
     this.h = {}, this.j = this.m().g, this.g = this.l = null;
   }
-  P.prototype.has = function(d) {
+  x.prototype.has = function(d) {
     return R(this, d.g);
-  }, P.prototype.get = function(d, t) {
+  }, x.prototype.get = function(d, t) {
     return f(this, d.g, t);
-  }, P.prototype.set = function(d, t) {
+  }, x.prototype.set = function(d, t) {
     E(this, d.g, t);
-  }, P.prototype.add = function(d, t) {
+  }, x.prototype.add = function(d, t) {
     v1(this, d.g, t);
   };
   function I1(d, t) {
@@ -2585,7 +2585,7 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
       }
     }
   }
-  P.prototype.clone = function() {
+  x.prototype.clone = function() {
     var d = new this.constructor();
     return d != this && (d.h = {}, d.g && (d.g = {}), I1(d, this)), d;
   };
@@ -2648,7 +2648,7 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
   s1.prototype.g = function(d) {
     throw new d.h(), Error("Unimplemented");
   }, s1.prototype.h = function(d, t) {
-    if (d.h == 11 || d.h == 10) return t instanceof P ? t : this.g(d.s.prototype.m(), t);
+    if (d.h == 11 || d.h == 10) return t instanceof x ? t : this.g(d.s.prototype.m(), t);
     if (d.h == 14) return typeof t == "string" && S1.test(t) && (d = Number(t), 0 < d) ? d : t;
     if (!d.o) return t;
     if (d = d.s, d === String) {
@@ -2685,19 +2685,19 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
     return this.h;
   };
   function j() {
-    P.call(this);
+    x.call(this);
   }
-  i(j, P);
+  i(j, x);
   var w1 = null;
   function w() {
-    P.call(this);
+    x.call(this);
   }
-  i(w, P);
+  i(w, x);
   var b1 = null;
   function W() {
-    P.call(this);
+    x.call(this);
   }
-  i(W, P);
+  i(W, x);
   var A1 = null;
   j.prototype.m = function() {
     var d = w1;
@@ -2746,9 +2746,9 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
     })), d;
   }, W.m = W.prototype.m;
   function V() {
-    P.call(this);
+    x.call(this);
   }
-  i(V, P);
+  i(V, x);
   var T1 = null, a2 = { ra: 0, qa: 1, pa: 5, oa: 10, na: 20 };
   V.prototype.m = function() {
     var d = T1;
@@ -8060,11 +8060,11 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
   function M1(d) {
     return 2 > d.length ? !1 : G(I2, d);
   }
-  function x1(d) {
+  function P1(d) {
     return G(m2, d) ? r1(d, c2) : r1(d, g1);
   }
-  function P1(d) {
-    var t = x1(d.toString());
+  function x1(d) {
+    var t = P1(d.toString());
     B(d), d.g(t);
   }
   function R1(d) {
@@ -8225,9 +8225,9 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
     $ != null && (l = f($, 11)), l == null && (l = "NonMatch");
     var h = t.toString();
     if (h.length == 0) l = 20;
-    else if (Q.test(h)) h = h.replace(Q, ""), B(t), t.g(x1(h)), l = 1;
+    else if (Q.test(h)) h = h.replace(Q, ""), B(t), t.g(P1(h)), l = 1;
     else {
-      if (h = new RegExp(l), P1(t), l = t.toString(), l.search(h) == 0) {
+      if (h = new RegExp(l), x1(t), l = t.toString(), l.search(h) == 0) {
         h = l.match(h)[0].length;
         var m = l.substring(h).match(N1);
         m && m[1] != null && 0 < m[1].length && r1(m[1], g1) == "0" ? l = !1 : (B(t), t.g(l.substring(h)), l = !0);
@@ -8288,7 +8288,7 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
         if (m = m.replace(Q, ""), h = F1(d, m, l, t, n, o), h == 0) throw y1;
       } else throw y1;
     }
-    if (h != 0 ? (r = e1(h), r != $ && (l = d1(d, h, r))) : (P1(r), t.g(r.toString()), $ != null ? (h = v(l, 10), E(
+    if (h != 0 ? (r = e1(h), r != $ && (l = d1(d, h, r))) : (x1(r), t.g(r.toString()), $ != null ? (h = v(l, 10), E(
       o,
       1,
       h
@@ -8516,12 +8516,20 @@ const F2 = (y) => !C.utils && !C.startedLoadingUtilsScript ? (C.startedLoadingUt
     }
   }), e("intlTelInputUtilsTemp.numberFormat", { E164: 0, INTERNATIONAL: 1, NATIONAL: 2, RFC3966: 3 }), e("intlTelInputUtilsTemp.numberType", h1), e("intlTelInputUtilsTemp.validationError", { IS_POSSIBLE: 0, INVALID_COUNTRY_CODE: 1, TOO_SHORT: 2, TOO_LONG: 3, IS_POSSIBLE_LOCAL_ONLY: 4, INVALID_LENGTH: 5 });
 })();
-const V2 = window.intlTelInputUtilsTemp;
+const K2 = window.intlTelInputUtilsTemp;
 delete window.intlTelInputUtilsTemp;
-C.utils = V2;
-const H2 = {
+C.utils = K2;
+const j2 = {
   __name: "IntlTelInputWithUtils",
   props: /* @__PURE__ */ e2({
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    inputProps: {
+      type: Object,
+      default: () => ({})
+    },
     options: {
       type: Object,
       default: () => ({})
@@ -8529,9 +8537,6 @@ const H2 = {
     value: {
       type: String,
       default: ""
-    },
-    disabled: {
-      type: Boolean
     }
   }, {
     modelValue: {
@@ -8540,11 +8545,19 @@ const H2 = {
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ e2(["changeNumber", "changeCountry", "changeValidity", "changeErrorCode"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ e2([
+    "changeNumber",
+    "changeCountry",
+    "changeValidity",
+    "changeErrorCode"
+  ], ["update:modelValue"]),
   setup(y, { expose: e, emit: i }) {
     const s = T2(y, "modelValue"), u = y, a = i, c = _1(), p = _1(), g = _1(!1), b = () => p.value ? u.options.strictMode ? p.value.isValidNumberPrecise() : p.value.isValidNumber() : null, _ = () => {
       let I = b();
-      g.value !== I && (g.value = I, a("changeValidity", !!I), a("changeErrorCode", I ? null : p.value.getValidationError()));
+      g.value !== I && (g.value = I, a("changeValidity", !!I), a(
+        "changeErrorCode",
+        I ? null : p.value.getValidationError()
+      ));
     }, A = () => {
       var I;
       a("changeNumber", ((I = p.value) == null ? void 0 : I.getNumber()) ?? ""), _();
@@ -8563,18 +8576,18 @@ const H2 = {
     ), E2(() => {
       var I;
       return (I = p.value) == null ? void 0 : I.destroy();
-    }), e({ instance: p, input: c }), (I, T) => D2((M2(), x2("input", {
+    }), e({ instance: p, input: c }), (I, T) => D2((M2(), P2("input", x2({
       ref_key: "input",
       ref: c,
-      "onUpdate:modelValue": T[0] || (T[0] = (x) => s.value = x),
+      "onUpdate:modelValue": T[0] || (T[0] = (P) => s.value = P),
       type: "tel",
       onCountrychange: S,
       onInput: A
-    }, null, 544)), [
-      [P2, s.value]
+    }, y.inputProps), null, 16)), [
+      [R2, s.value]
     ]);
   }
 };
 export {
-  H2 as default
+  j2 as default
 };