intl-tel-input 27.1.3 → 27.2.0

package/dist/js/intlTelInputWithUtils.mjs

@@ -4571,7 +4571,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.3"
+    version: "27.2.0"
   }
 );
 var intlTelInput_default = intlTelInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "27.1.3",
+  "version": "27.2.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "type": "module",
   "license": "MIT",

package/react/README.md

@@ -3,3 +3,11 @@
 A React component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/react/src/IntlTelInput.tsx).
 
 [Explore docs »](https://intl-tel-input.com/docs/react-component)
+
+## Running the demos locally
+
+1. Initialise the submodules: `git submodule update --init --recursive`
+2. Install dependencies: `npm install`
+3. Build: `npm run build`
+
+You can then open `react/demo/validation/index.html` in your browser to try the validation demo. View the full list of [available demos](https://github.com/jackocnr/intl-tel-input/tree/master/react/demo).

package/react/dist/IntlTelInput.d.ts

@@ -2,6 +2,8 @@ import intlTelInput, { Iti } from "intl-tel-input";
 import React from "react";
 export { intlTelInput };
 type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "onInput">;
+export type StrictRejectSource = "key" | "paste";
+export type StrictRejectReason = "invalid" | "max-length";
 export type IntlTelInputRef = {
     getInstance: () => Iti | null;
     getInput: () => HTMLInputElement | null;
@@ -11,6 +13,9 @@ declare const IntlTelInput: React.ForwardRefExoticComponent<Partial<import("intl
     onChangeCountry?: (iso2: string) => void;
     onChangeValidity?: (isValid: boolean) => void;
     onChangeErrorCode?: (errorCode: number | null) => void;
+    onOpenCountryDropdown?: () => void;
+    onCloseCountryDropdown?: () => void;
+    onStrictReject?: (source: StrictRejectSource, rejectedInput: string, reason: StrictRejectReason) => void;
     usePreciseValidation?: boolean;
     inputProps?: InputProps;
     disabled?: boolean | undefined;

package/react/dist/IntlTelInput.js

@@ -4541,7 +4541,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.3"
+    version: "27.2.0"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -4564,6 +4564,9 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   onChangeCountry = noop,
   onChangeValidity = noop,
   onChangeErrorCode = noop,
+  onOpenCountryDropdown,
+  onCloseCountryDropdown,
+  onStrictReject,
   usePreciseValidation = false,
   inputProps = {},
   disabled = void 0,
@@ -4578,6 +4581,12 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   const lastEmittedValidityRef = useRef(void 0);
   const lastEmittedErrorCodeRef = useRef(void 0);
   const pendingUpdateRef = useRef(false);
+  const onOpenCountryDropdownRef = useRef(onOpenCountryDropdown);
+  const onCloseCountryDropdownRef = useRef(onCloseCountryDropdown);
+  const onStrictRejectRef = useRef(onStrictReject);
+  onOpenCountryDropdownRef.current = onOpenCountryDropdown;
+  onCloseCountryDropdownRef.current = onCloseCountryDropdown;
+  onStrictRejectRef.current = onStrictReject;
   useImperativeHandle(ref, () => ({
     getInstance: () => itiRef.current,
     getInput: () => inputRef.current
@@ -4628,10 +4637,24 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     usePreciseValidation
   ]);
   useEffect(() => {
-    if (inputRef.current) {
-      itiRef.current = intlTelInput_default(inputRef.current, initOptions);
-    }
+    const inputEl = inputRef.current;
+    if (!inputEl) {
+      return void 0;
+    }
+    itiRef.current = intlTelInput_default(inputEl, initOptions);
+    const handleOpen = () => onOpenCountryDropdownRef.current?.();
+    const handleClose = () => onCloseCountryDropdownRef.current?.();
+    const handleStrictReject = (e) => {
+      const { source, rejectedInput, reason } = e.detail;
+      onStrictRejectRef.current?.(source, rejectedInput, reason);
+    };
+    inputEl.addEventListener("open:countrydropdown", handleOpen);
+    inputEl.addEventListener("close:countrydropdown", handleClose);
+    inputEl.addEventListener("strict:reject", handleStrictReject);
     return () => {
+      inputEl.removeEventListener("open:countrydropdown", handleOpen);
+      inputEl.removeEventListener("close:countrydropdown", handleClose);
+      inputEl.removeEventListener("strict:reject", handleStrictReject);
       itiRef.current?.destroy();
     };
   }, []);

package/react/dist/IntlTelInputWithUtils.js

@@ -4541,7 +4541,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.3"
+    version: "27.2.0"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -10877,6 +10877,9 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   onChangeCountry = noop,
   onChangeValidity = noop,
   onChangeErrorCode = noop,
+  onOpenCountryDropdown,
+  onCloseCountryDropdown,
+  onStrictReject,
   usePreciseValidation = false,
   inputProps = {},
   disabled = void 0,
@@ -10891,6 +10894,12 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   const lastEmittedValidityRef = useRef(void 0);
   const lastEmittedErrorCodeRef = useRef(void 0);
   const pendingUpdateRef = useRef(false);
+  const onOpenCountryDropdownRef = useRef(onOpenCountryDropdown);
+  const onCloseCountryDropdownRef = useRef(onCloseCountryDropdown);
+  const onStrictRejectRef = useRef(onStrictReject);
+  onOpenCountryDropdownRef.current = onOpenCountryDropdown;
+  onCloseCountryDropdownRef.current = onCloseCountryDropdown;
+  onStrictRejectRef.current = onStrictReject;
   useImperativeHandle(ref, () => ({
     getInstance: () => itiRef.current,
     getInput: () => inputRef.current
@@ -10941,10 +10950,24 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     usePreciseValidation
   ]);
   useEffect(() => {
-    if (inputRef.current) {
-      itiRef.current = intlTelInput_default(inputRef.current, initOptions);
-    }
+    const inputEl = inputRef.current;
+    if (!inputEl) {
+      return void 0;
+    }
+    itiRef.current = intlTelInput_default(inputEl, initOptions);
+    const handleOpen = () => onOpenCountryDropdownRef.current?.();
+    const handleClose = () => onCloseCountryDropdownRef.current?.();
+    const handleStrictReject = (e) => {
+      const { source, rejectedInput, reason } = e.detail;
+      onStrictRejectRef.current?.(source, rejectedInput, reason);
+    };
+    inputEl.addEventListener("open:countrydropdown", handleOpen);
+    inputEl.addEventListener("close:countrydropdown", handleClose);
+    inputEl.addEventListener("strict:reject", handleStrictReject);
     return () => {
+      inputEl.removeEventListener("open:countrydropdown", handleOpen);
+      inputEl.removeEventListener("close:countrydropdown", handleClose);
+      inputEl.removeEventListener("strict:reject", handleStrictReject);
       itiRef.current?.destroy();
     };
   }, []);

package/svelte/README.md

@@ -3,3 +3,12 @@
 A Svelte 5 component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/svelte/src/IntlTelInput.svelte).
 
 [Explore docs »](https://intl-tel-input.com/docs/svelte-component)
+
+## Running the demos locally
+
+1. Initialise the submodules: `git submodule update --init --recursive`
+2. Install dependencies: `npm install`
+3. Build: `npm run build`
+4. Run a demo: `npm run svelte:demo` and copy the given URL into your browser.
+
+This defaults to the validation demo — to run a different one, set the `DEMO` env var, e.g. `DEMO=simple npm run svelte:demo`. View the full list of [available demos](https://github.com/jackocnr/intl-tel-input/tree/master/svelte/demo).

package/svelte/src/IntlTelInput.svelte

@@ -20,9 +20,18 @@
     onChangeCountry,
     onChangeValidity,
     onChangeErrorCode,
+    onOpenCountryDropdown,
+    onCloseCountryDropdown,
+    onStrictReject,
     ...initOptions
   } = $props() as Props;
 
+  type StrictRejectDetail = {
+    source: "key" | "paste";
+    rejectedInput: string;
+    reason: "invalid" | "max-length";
+  };
+
   // State
   let inputElement: HTMLInputElement | undefined = $state();
   let instance: Iti | undefined = $state();
@@ -96,6 +105,13 @@
     updateValue();
   };
 
+  const handleOpenDropdown = (): void => onOpenCountryDropdown?.();
+  const handleCloseDropdown = (): void => onCloseCountryDropdown?.();
+  const handleStrictReject = (e: Event): void => {
+    const { source, rejectedInput, reason } = (e as CustomEvent<StrictRejectDetail>).detail;
+    onStrictReject?.(source, rejectedInput, reason);
+  };
+
   // Lifecycle
   onMount(() => {
     if (inputElement) {
@@ -103,6 +119,10 @@
       if (disabled) instance.setDisabled(disabled);
       if (readonly) instance.setReadonly(readonly);
 
+      inputElement.addEventListener("open:countrydropdown", handleOpenDropdown);
+      inputElement.addEventListener("close:countrydropdown", handleCloseDropdown);
+      inputElement.addEventListener("strict:reject", handleStrictReject);
+
       lastEmittedCountry = instance.getSelectedCountryData()?.iso2 ?? "";
       hasInitialized = true;
 
@@ -128,6 +148,11 @@
   });
 
   onDestroy(() => {
+    if (inputElement) {
+      inputElement.removeEventListener("open:countrydropdown", handleOpenDropdown);
+      inputElement.removeEventListener("close:countrydropdown", handleCloseDropdown);
+      inputElement.removeEventListener("strict:reject", handleStrictReject);
+    }
     instance?.destroy();
   });
 

package/svelte/src/IntlTelInput.svelte.d.ts

@@ -4,6 +4,9 @@ import type { Component } from "svelte";
 import type { Iti, SomeOptions } from "intl-tel-input";
 import intlTelInput from "intl-tel-input";
 
+export type StrictRejectSource = "key" | "paste";
+export type StrictRejectReason = "invalid" | "max-length";
+
 export type Props = SomeOptions & {
   disabled?: boolean;
   readonly?: boolean;
@@ -15,6 +18,9 @@ export type Props = SomeOptions & {
   onChangeCountry?: (iso2: string) => void;
   onChangeValidity?: (isValid: boolean) => void;
   onChangeErrorCode?: (errorCode: number | null) => void;
+  onOpenCountryDropdown?: () => void;
+  onCloseCountryDropdown?: () => void;
+  onStrictReject?: (source: StrictRejectSource, rejectedInput: string, reason: StrictRejectReason) => void;
 };
 
 export { intlTelInput };

package/vue/README.md

@@ -3,3 +3,12 @@
 A Vue component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/vue/src/IntlTelInput.vue).
 
 [Explore docs »](https://intl-tel-input.com/docs/vue-component)
+
+## Running the demos locally
+
+1. Initialise the submodules: `git submodule update --init --recursive`
+2. Install dependencies: `npm install`
+3. Build: `npm run build`
+4. Run a demo: `npm run vue:demo` and copy the given URL into your browser.
+
+This defaults to the validation demo — to run a different one, set the `DEMO` env var, e.g. `DEMO=simple npm run vue:demo`. View the full list of [available demos](https://github.com/jackocnr/intl-tel-input/tree/master/vue/demo).

package/vue/dist/{IntlTelInput-SQtNzOVr.js → IntlTelInput-DTtMkd4-.js}

@@ -2517,7 +2517,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	},
 	startedLoadingUtils: !1,
 	startedLoadingAutoCountry: !1,
-	version: "27.1.3"
+	version: "27.2.0"
 }), $ = Q, Ce = /* @__PURE__ */ n({
 	inheritAttrs: !1,
 	__name: "IntlTelInput",
@@ -2572,6 +2572,9 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		"changeCountry",
 		"changeValidity",
 		"changeErrorCode",
+		"openCountryDropdown",
+		"closeCountryDropdown",
+		"strictReject",
 		"update:modelValue"
 	],
 	setup(n, { expose: d, emit: f }) {
@@ -2615,9 +2618,12 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			if (!C.value?.isActive()) return;
 			let e = C.value.getSelectedCountryData()?.iso2 ?? "";
 			e !== T.value && (T.value = e, m("changeCountry", e)), j();
+		}, N = () => m("openCountryDropdown"), P = () => m("closeCountryDropdown"), F = (e) => {
+			let { source: t, rejectedInput: n, reason: r } = e.detail;
+			m("strictReject", t, n, r);
 		};
 		return a(() => {
-			S.value && (C.value = $(S.value, x.value), p.disabled && C.value.setDisabled(p.disabled), p.readonly && C.value.setReadonly(p.readonly), T.value = C.value.getSelectedCountryData()?.iso2 ?? "", C.value.promise.then(() => {
+			S.value && (C.value = $(S.value, x.value), S.value.addEventListener("open:countrydropdown", N), S.value.addEventListener("close:countrydropdown", P), S.value.addEventListener("strict:reject", F), p.disabled && C.value.setDisabled(p.disabled), p.readonly && C.value.setReadonly(p.readonly), T.value = C.value.getSelectedCountryData()?.iso2 ?? "", C.value.promise.then(() => {
 				C.value?.isActive() && (v.value && C.value.setNumber(v.value), O ? (O = !1, M()) : (w.value = C.value.getNumber() ?? "", E.value = k(), D.value = E.value ? null : C.value.getValidationError()));
 			}));
 		}), u(() => p.disabled, (e) => C.value?.setDisabled(e)), u(() => p.readonly, (e) => C.value?.setReadonly(e)), u(() => v.value, (e) => {
@@ -2626,7 +2632,9 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 				let t = e ?? "", n = C.value.getNumber() ?? "";
 				document.activeElement === S.value || n === t || (C.value.setNumber(t), A());
 			});
-		}, { flush: "post" }), o(() => C.value?.destroy()), d({
+		}, { flush: "post" }), o(() => {
+			S.value && (S.value.removeEventListener("open:countrydropdown", N), S.value.removeEventListener("close:countrydropdown", P), S.value.removeEventListener("strict:reject", F)), C.value?.destroy();
+		}), d({
 			instance: C,
 			input: S
 		}), (e, n) => (s(), t("input", i(_.value, {

package/vue/dist/IntlTelInput.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./IntlTelInput-SQtNzOVr.js";
+import { n as e, t } from "./IntlTelInput-DTtMkd4-.js";
 //#region vue/src/index.ts
 var n = t;
 //#endregion

package/vue/dist/IntlTelInput.vue.d.ts

@@ -9,21 +9,29 @@ interface Props {
     modelValue?: string | null;
 }
 type __VLS_Props = Props & SomeOptions;
+type StrictRejectSource = "key" | "paste";
+type StrictRejectReason = "invalid" | "max-length";
 declare const _default: import('vue').DefineComponent<__VLS_Props, {
     instance: import('vue').ShallowRef<import('intl-tel-input').Iti | null, import('intl-tel-input').Iti | null>;
     input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    changeNumber: (...args: any[]) => void;
-    changeCountry: (...args: any[]) => void;
-    changeValidity: (...args: any[]) => void;
-    changeErrorCode: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    changeNumber: (value: string) => any;
+    changeCountry: (value: string) => any;
+    changeValidity: (value: boolean) => any;
+    changeErrorCode: (value: number | null) => any;
+    openCountryDropdown: () => any;
+    closeCountryDropdown: () => any;
+    strictReject: (source: StrictRejectSource, rejectedInput: string, reason: StrictRejectReason) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChangeNumber?: ((...args: any[]) => any) | undefined;
-    onChangeCountry?: ((...args: any[]) => any) | undefined;
-    onChangeValidity?: ((...args: any[]) => any) | undefined;
-    onChangeErrorCode?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChangeNumber?: ((value: string) => any) | undefined;
+    onChangeCountry?: ((value: string) => any) | undefined;
+    onChangeValidity?: ((value: boolean) => any) | undefined;
+    onChangeErrorCode?: ((value: number | null) => any) | undefined;
+    onOpenCountryDropdown?: (() => any) | undefined;
+    onCloseCountryDropdown?: (() => any) | undefined;
+    onStrictReject?: ((source: StrictRejectSource, rejectedInput: string, reason: StrictRejectReason) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     usePreciseValidation: boolean;
     disabled: boolean;

package/vue/dist/IntlTelInputWithUtils.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./IntlTelInput-SQtNzOVr.js";
+import { n as e, t } from "./IntlTelInput-DTtMkd4-.js";
 //#region dist/js/utils.js
 var n = {};
 //#endregion