intl-tel-input 28.0.9 → 28.1.0

package/dist/js/intlTelInputWithUtils.mjs

@@ -1767,7 +1767,8 @@ var CLASSES = {
   FLAG: "iti__flag",
   LOADING: "iti__loading",
   COUNTRY_ITEM: "iti__country",
-  HIGHLIGHT: "iti__highlight"
+  HIGHLIGHT: "iti__highlight",
+  STRICT_REJECT_ANIMATION: "iti__strict-reject-animation"
 };
 var KEYS = {
   ARROW_UP: "ArrowUp",
@@ -3123,7 +3124,6 @@ var UI = class _UI {
   }
   //* Keyboard navigation while the dropdown is open: arrow keys navigate, hidden-search keys filter,
   //* and enter/escape invoke the caller's callbacks (which handle country selection / dropdown close).
-  //* Listens on document because key events go there when no input has focus.
   //* Uses keydown rather than keypress so non-char keys (arrow, esc) fire and so holding a key repeats.
   #bindDropdownKeydownListener(signal, onEnter, onEscape) {
     let query = "";
@@ -3147,7 +3147,7 @@ var UI = class _UI {
           this.#selectedCountryEl.focus();
         }
       }
-      if (!this.#options.countrySearch && e.target !== this.telInputEl && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
+      if (!this.#options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
         e.stopPropagation();
         if (queryTimer) {
           clearTimeout(queryTimer);
@@ -3159,7 +3159,8 @@ var UI = class _UI {
         }, TIMINGS.HIDDEN_SEARCH_RESET_MS);
       }
     };
-    document.addEventListener("keydown", handleKeydown, { signal });
+    this.#selectedCountryEl?.addEventListener("keydown", handleKeydown, { signal });
+    this.#dropdownContentEl?.addEventListener("keydown", handleKeydown, { signal });
   }
   //* Wire up country search input listener: typing filters the list, the clear button resets it.
   #bindSearchInputListener(signal) {
@@ -3324,6 +3325,26 @@ var UI = class _UI {
   setLoading(isLoading) {
     this.#selectedFlagEl.classList.toggle(CLASSES.LOADING, isLoading);
   }
+  //* Play the strict-reject animation (shake, or background-colour flash under prefers-reduced-motion) on the wrapper.
+  //* Called when strictMode rejects the whole input (keystroke, or whole paste).
+  //* Uses the wrapper (not the input) so any separateDialCode / country button move together with the input.
+  playStrictRejectAnimation() {
+    if (!this.#options.strictRejectAnimation) {
+      return;
+    }
+    const wrapperEl = this.telInputEl.parentElement;
+    if (!wrapperEl) {
+      return;
+    }
+    wrapperEl.classList.remove(CLASSES.STRICT_REJECT_ANIMATION);
+    void wrapperEl.offsetWidth;
+    wrapperEl.classList.add(CLASSES.STRICT_REJECT_ANIMATION);
+    wrapperEl.addEventListener(
+      "animationend",
+      () => wrapperEl.classList.remove(CLASSES.STRICT_REJECT_ANIMATION),
+      { once: true }
+    );
+  }
   isLoading() {
     return this.#selectedFlagEl.classList.contains(CLASSES.LOADING);
   }
@@ -3840,7 +3861,7 @@ var Iti = class _Iti {
   #handleAndroidStrictReject(inputValue, rejectedInput) {
     const newCaretPos = this.#removeJustTypedChar(inputValue);
     this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
-    this.#playStrictRejectAnimation();
+    this.#ui.playStrictRejectAnimation();
     this.#dispatchEvent(EVENTS.STRICT_REJECT, {
       source: "key",
       rejectedInput,
@@ -3997,7 +4018,7 @@ var Iti = class _Iti {
     const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
     const isChangingDialCode = newCountry !== null;
     if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
-      this.#playStrictRejectAnimation();
+      this.#ui.playStrictRejectAnimation();
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "key",
         rejectedInput: e.key,
@@ -4052,7 +4073,7 @@ var Iti = class _Iti {
     let newValue = before + sanitised + after;
     let rejectReason = sanitised !== pasted ? "invalid" : null;
     if (newValue.length > 30) {
-      this.#playStrictRejectAnimation();
+      this.#ui.playStrictRejectAnimation();
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "paste",
         rejectedInput: pastedRaw,
@@ -4068,7 +4089,7 @@ var Iti = class _Iti {
         coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
       }
       if (!coreNumber) {
-        this.#playStrictRejectAnimation();
+        this.#ui.playStrictRejectAnimation();
         this.#dispatchEvent(EVENTS.STRICT_REJECT, {
           source: "paste",
           rejectedInput: pastedRaw,
@@ -4083,7 +4104,7 @@ var Iti = class _Iti {
           newValue = newValue.slice(0, newValue.length - trimLength);
           rejectReason = "max-length";
         } else {
-          this.#playStrictRejectAnimation();
+          this.#ui.playStrictRejectAnimation();
           this.#dispatchEvent(EVENTS.STRICT_REJECT, {
             source: "paste",
             rejectedInput: pastedRaw,
@@ -4099,7 +4120,7 @@ var Iti = class _Iti {
     input.setSelectionRange(caretPos, caretPos);
     if (rejectReason) {
       if (pasted.length > 0 && sanitised.length === 0) {
-        this.#playStrictRejectAnimation();
+        this.#ui.playStrictRejectAnimation();
       }
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "paste",
@@ -4121,21 +4142,6 @@ var Iti = class _Iti {
     const max = Number(this.#ui.telInputEl.getAttribute("maxlength"));
     return max && number.length > max ? number.substring(0, max) : number;
   }
-  //* Play the strict-reject animation (shake, or background-colour flash under prefers-reduced-motion) on the wrapper.
-  //* Called when strictMode rejects the whole input (keystroke, or whole paste).
-  //* Uses the wrapper (not the input) so any separateDialCode / country button move together with the input.
-  #playStrictRejectAnimation() {
-    if (!this.#options.strictRejectAnimation) {
-      return;
-    }
-    const wrapperEl = this.#ui.telInputEl.parentElement;
-    if (!wrapperEl) {
-      return;
-    }
-    wrapperEl.classList.remove("iti__strict-reject-animation");
-    void wrapperEl.offsetWidth;
-    wrapperEl.classList.add("iti__strict-reject-animation");
-  }
   //* Trigger a custom event on the input (typed via ItiEventMap).
   #dispatchEvent(name, detailProps = {}) {
     const e = new CustomEvent(name, {
@@ -4755,7 +4761,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.9",
+    version: "28.1.0",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR

package/package.json

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