intl-tel-input 27.1.3 → 27.2.1

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.1"
   }
 );
 var intlTelInput_default = intlTelInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "27.1.3",
+  "version": "27.2.1",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "type": "module",
   "license": "MIT",
@@ -29,7 +29,8 @@
     "build:translations": "npm run clean:dist:js && npm run clean:tmp && npm run build:translations:gen && npm run build:js",
     "build:utils:closure": "node scripts/build-utils.js",
     "build:utils:check": "node scripts/check-lpn-metadata.js",
-    "build:utils": "npm run clean:utils && npm run build:utils:closure && npm run build:utils:check",
+    "build:utils:check:shape": "node scripts/check-utils-shape.js",
+    "build:utils": "npm run clean:utils && npm run build:utils:closure && npm run build:utils:check && npm run build:utils:check:shape",
     "ensure:utils": "node -e \"process.exit(require('node:fs').existsSync('dist/js/utils.js')?0:1)\" || npm run build:utils",
     "ensure:dts": "node -e \"process.exit(require('node:fs').existsSync('dist/js/intlTelInput.d.ts')?0:1)\" || npm run build:js:dts",
     "build:css:main": "sass --no-source-map --style=compressed src/css/intlTelInput.scss:dist/css/intlTelInput-no-assets.css src/css/intlTelInputWithAssets.scss:dist/css/intlTelInput.css",
@@ -39,13 +40,20 @@
     "build:img:sprite": "node --experimental-strip-types scripts/generate-sprite.js",
     "build:img": "npm run clean:dist:img && npm run build:img:sprite && npm run build:css",
     "build:js:dts": "node scripts/build-dts.js",
+    "build:js:dts:check": "tsc -p scripts/tsconfig.typecheck-dts.json",
+    "build:components:dts:check": "tsc -p scripts/tsconfig.typecheck-dts-components.json",
+    "typecheck:dts": "npm run ensure:dts && npm run build:js:dts:check",
+    "typecheck:dts:components": "tsc -p scripts/tsconfig.typecheck-dts-components.json",
+    "typecheck:main": "tsc --noEmit -p tsconfig.json",
+    "typecheck:svelte": "svelte-check --workspace svelte --tsconfig tsconfig.json",
+    "typecheck:vue": "vue-tsc --noEmit -p vue/tsconfig.build.json",
     "build:js:core": "node scripts/esbuild.js",
-    "build:js": "npm run clean:dist:js && npm run clean:tmp && npm run lint:js && npm run build:utils:closure && npm run build:js:dts && npm run build:js:core && npm run build:components",
+    "build:js": "npm run clean:dist:js && npm run clean:tmp && npm run lint:js && npm run build:utils:closure && npm run build:utils:check:shape && npm run build:js:dts && npm run build:js:dts:check && npm run typecheck:main && npm run build:js:core && npm run build:components && npm run build:components:dts:check && npm run typecheck:svelte",
     "build:jsfast": "npm run clean:dist:js:keep-utils && npm run clean:tmp && npm run ensure:utils && npm run build:js:core",
     "build:jsfast:cmps": "npm run build:jsfast && npm run build:components",
-    "build:react": "npm run ensure:dts && npm run clean:react && tsc -p react/tsconfig.json && node react/build.js",
-    "build:vue": "npm run ensure:dts && npm run clean:vue && vite build --config vue/vite.config.mts",
-    "build:angular": "npm run ensure:dts && npm run clean:angular && ngc -p angular/tsconfig.json && node angular/build.js",
+    "build:react": "npm run ensure:dts && npm run clean:react && tsc -p react/tsconfig.build.json && node react/build.js",
+    "build:vue": "npm run ensure:dts && npm run clean:vue && npm run typecheck:vue && vite build --config vue/vite.config.mts",
+    "build:angular": "npm run ensure:dts && npm run clean:angular && ngc -p angular/tsconfig.build.json && node angular/build.js",
     "build:components": "npm run build:react && npm run build:vue && npm run build:angular",
     "build:site": "npm run build --workspace=site",
     "build": "npm run clean:all && npm run build:img && npm run build:translations:gen && npm run build:js && npm run build:site",
@@ -106,12 +114,14 @@
     "sass": "^1.83.1",
     "sharp": "^0.34.5",
     "svelte": "^5.46.4",
+    "svelte-check": "^4.4.6",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.0",
     "vite": "^8.0.7",
     "vite-plugin-dts": "^4.4.0",
     "vitest": "^4.1.3",
     "vue": "^3.5.13",
+    "vue-tsc": "^3.2.7",
     "zone.js": "^0.16.1"
   },
   "files": [

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

@@ -1,4 +1,4 @@
-// dist/js/intlTelInput.mjs
+// src/js/data.ts
 var rawCountryData = [
   [
     "af",
@@ -1755,6 +1755,8 @@ for (const c of rawCountryData) {
 var iso2Set = new Set(allCountries.map((c) => c.iso2));
 var isIso2 = (val) => iso2Set.has(val);
 var data_default = allCountries;
+
+// src/js/constants.ts
 var EVENTS = {
   OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
   CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
@@ -1879,6 +1881,8 @@ var ARIA = {
   AUTOCOMPLETE: "aria-autocomplete",
   MODAL: "aria-modal"
 };
+
+// src/js/i18n/en.ts
 var interfaceTranslations = {
   selectedCountryAriaLabel: "Change country for phone number, currently selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country for phone number",
@@ -1897,6 +1901,8 @@ var interfaceTranslations = {
   }
 };
 var en_default = interfaceTranslations;
+
+// src/js/core/options.ts
 var mediaQuery = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
 var isNarrowViewport = () => mediaQuery(`(max-width: ${LAYOUT.NARROW_VIEWPORT_WIDTH}px)`);
 var computeDefaultUseFullscreenPopup = () => {
@@ -2205,8 +2211,12 @@ var applyOptionSideEffects = (o) => {
   }
   o.i18n = { ...en_default, ...o.i18n };
 };
+
+// src/js/helpers/string.ts
 var getNumeric = (s) => s.replace(/\D/g, "");
 var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+
+// src/js/helpers/dom.ts
 var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
 var createEl = (tagName, attrs, container) => {
   const el = document.createElement(tagName);
@@ -2220,6 +2230,8 @@ var createEl = (tagName, attrs, container) => {
   }
   return el;
 };
+
+// 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" />
@@ -2245,6 +2257,8 @@ var buildGlobeIcon = () => `
     <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>`;
+
+// src/js/core/countrySearch.ts
 var getMatchedCountries = (countries, query) => {
   const normalisedQuery = normaliseString(query);
   const iso2Matches = [];
@@ -2288,6 +2302,8 @@ var findFirstCountryStartingWith = (countries, query) => {
   }
   return null;
 };
+
+// src/js/core/ui.ts
 var UI = class _UI {
   // private
   #options;
@@ -3216,6 +3232,8 @@ var UI = class _UI {
     this.#listItemByIso2.clear();
   }
 };
+
+// src/js/data/country-data.ts
 var processAllCountries = (options) => {
   const { onlyCountries, excludeCountries } = options;
   if (onlyCountries?.length) {
@@ -3321,6 +3339,8 @@ var cacheSearchTokens = (countries) => {
     c.dialCodePlus = `+${c.dialCode}`;
   }
 };
+
+// src/js/data/intl-regionless.ts
 var regionlessDialCodes = /* @__PURE__ */ new Set([
   "800",
   "808",
@@ -3335,6 +3355,8 @@ var hasRegionlessDialCode = (number) => {
   const dialCode = getNumeric(number).slice(0, 3);
   return number.startsWith("+") && regionlessDialCodes.has(dialCode);
 };
+
+// src/js/format/formatting.ts
 var stripSeparateDialCode = (fullNumber, hasValidDialCode, separateDialCode, selectedCountryData) => {
   if (!separateDialCode || !hasValidDialCode) {
     return fullNumber;
@@ -3352,6 +3374,8 @@ var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryDa
   }
   return result;
 };
+
+// src/js/format/caret.ts
 var computeNewCaretPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
   if (prevCaretPos === 0 && !isDeleteForwards) {
     return 0;
@@ -3370,6 +3394,8 @@ var computeNewCaretPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
+
+// src/js/data/nanp-regionless.ts
 var regionlessNanpAreaCodes = /* @__PURE__ */ new Set([
   "800",
   "822",
@@ -3397,6 +3423,8 @@ var isRegionlessNanp = (number) => {
   }
   return false;
 };
+
+// src/js/core/numerals.ts
 var Numerals = class {
   #userNumeralSet;
   constructor(initialValue) {
@@ -3443,6 +3471,8 @@ var Numerals = class {
     return !this.#userNumeralSet || this.#userNumeralSet === "ascii";
   }
 };
+
+// src/js/intlTelInput.ts
 var nextId = 0;
 var ensureUtils = (methodName) => {
   if (!intlTelInput.utils) {
@@ -4541,7 +4571,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.3"
+    version: "27.2.1"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -4564,6 +4594,9 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   onChangeCountry = noop,
   onChangeValidity = noop,
   onChangeErrorCode = noop,
+  onOpenCountryDropdown,
+  onCloseCountryDropdown,
+  onStrictReject,
   usePreciseValidation = false,
   inputProps = {},
   disabled = void 0,
@@ -4578,6 +4611,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 +4667,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

@@ -1,4 +1,4 @@
-// dist/js/intlTelInput.mjs
+// src/js/data.ts
 var rawCountryData = [
   [
     "af",
@@ -1755,6 +1755,8 @@ for (const c of rawCountryData) {
 var iso2Set = new Set(allCountries.map((c) => c.iso2));
 var isIso2 = (val) => iso2Set.has(val);
 var data_default = allCountries;
+
+// src/js/constants.ts
 var EVENTS = {
   OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
   CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
@@ -1879,6 +1881,8 @@ var ARIA = {
   AUTOCOMPLETE: "aria-autocomplete",
   MODAL: "aria-modal"
 };
+
+// src/js/i18n/en.ts
 var interfaceTranslations = {
   selectedCountryAriaLabel: "Change country for phone number, currently selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country for phone number",
@@ -1897,6 +1901,8 @@ var interfaceTranslations = {
   }
 };
 var en_default = interfaceTranslations;
+
+// src/js/core/options.ts
 var mediaQuery = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
 var isNarrowViewport = () => mediaQuery(`(max-width: ${LAYOUT.NARROW_VIEWPORT_WIDTH}px)`);
 var computeDefaultUseFullscreenPopup = () => {
@@ -2205,8 +2211,12 @@ var applyOptionSideEffects = (o) => {
   }
   o.i18n = { ...en_default, ...o.i18n };
 };
+
+// src/js/helpers/string.ts
 var getNumeric = (s) => s.replace(/\D/g, "");
 var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+
+// src/js/helpers/dom.ts
 var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
 var createEl = (tagName, attrs, container) => {
   const el = document.createElement(tagName);
@@ -2220,6 +2230,8 @@ var createEl = (tagName, attrs, container) => {
   }
   return el;
 };
+
+// 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" />
@@ -2245,6 +2257,8 @@ var buildGlobeIcon = () => `
     <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>`;
+
+// src/js/core/countrySearch.ts
 var getMatchedCountries = (countries, query) => {
   const normalisedQuery = normaliseString(query);
   const iso2Matches = [];
@@ -2288,6 +2302,8 @@ var findFirstCountryStartingWith = (countries, query) => {
   }
   return null;
 };
+
+// src/js/core/ui.ts
 var UI = class _UI {
   // private
   #options;
@@ -3216,6 +3232,8 @@ var UI = class _UI {
     this.#listItemByIso2.clear();
   }
 };
+
+// src/js/data/country-data.ts
 var processAllCountries = (options) => {
   const { onlyCountries, excludeCountries } = options;
   if (onlyCountries?.length) {
@@ -3321,6 +3339,8 @@ var cacheSearchTokens = (countries) => {
     c.dialCodePlus = `+${c.dialCode}`;
   }
 };
+
+// src/js/data/intl-regionless.ts
 var regionlessDialCodes = /* @__PURE__ */ new Set([
   "800",
   "808",
@@ -3335,6 +3355,8 @@ var hasRegionlessDialCode = (number) => {
   const dialCode = getNumeric(number).slice(0, 3);
   return number.startsWith("+") && regionlessDialCodes.has(dialCode);
 };
+
+// src/js/format/formatting.ts
 var stripSeparateDialCode = (fullNumber, hasValidDialCode, separateDialCode, selectedCountryData) => {
   if (!separateDialCode || !hasValidDialCode) {
     return fullNumber;
@@ -3352,6 +3374,8 @@ var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryDa
   }
   return result;
 };
+
+// src/js/format/caret.ts
 var computeNewCaretPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
   if (prevCaretPos === 0 && !isDeleteForwards) {
     return 0;
@@ -3370,6 +3394,8 @@ var computeNewCaretPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
+
+// src/js/data/nanp-regionless.ts
 var regionlessNanpAreaCodes = /* @__PURE__ */ new Set([
   "800",
   "822",
@@ -3397,6 +3423,8 @@ var isRegionlessNanp = (number) => {
   }
   return false;
 };
+
+// src/js/core/numerals.ts
 var Numerals = class {
   #userNumeralSet;
   constructor(initialValue) {
@@ -3443,6 +3471,8 @@ var Numerals = class {
     return !this.#userNumeralSet || this.#userNumeralSet === "ascii";
   }
 };
+
+// src/js/intlTelInput.ts
 var nextId = 0;
 var ensureUtils = (methodName) => {
   if (!intlTelInput.utils) {
@@ -4541,7 +4571,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.3"
+    version: "27.2.1"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -10877,6 +10907,9 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   onChangeCountry = noop,
   onChangeValidity = noop,
   onChangeErrorCode = noop,
+  onOpenCountryDropdown,
+  onCloseCountryDropdown,
+  onStrictReject,
   usePreciseValidation = false,
   inputProps = {},
   disabled = void 0,
@@ -10891,6 +10924,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 +10980,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

@@ -6,6 +6,7 @@
 <script lang="ts">
   // Resolves to IntlTelInput.svelte.d.ts (the type declaration file for this component).
   import type { Props } from "./IntlTelInput.svelte";
+  import type { SomeOptions } from "intl-tel-input";
   import { onMount, onDestroy } from "svelte";
 
   // Props
@@ -20,9 +21,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 +106,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 +120,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 +149,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-CzuiSLVt.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.1"
 }), $ = 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-CzuiSLVt.js";
 //#region vue/src/index.ts
 var n = t;
 //#endregion