intl-tel-input 27.2.0 → 27.3.0

package/dist/js/intlTelInput.mjs

@@ -1966,6 +1966,8 @@ var defaults = {
   searchInputClass: "",
   //* Display the international dial code next to the selected flag.
   separateDialCode: false,
+  //* When strictMode rejects a key (etc), play a short feedback animation
+  strictRejectAnimation: false,
   //* Show flags - for both the selected country, and in the country dropdown
   showFlags: true,
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
@@ -2041,6 +2043,7 @@ var validateOptions = (customOptions) => {
       case "showFlags":
       case "separateDialCode":
       case "strictMode":
+      case "strictRejectAnimation":
       case "useFullscreenPopup":
         if (typeof value !== "boolean") {
           warnOption(key, "a boolean", value);
@@ -3529,9 +3532,7 @@ var Iti = class _Iti {
     this.#numerals = new Numerals(input.value);
     this.promise = this.#createInitPromise(this.#options);
     this.#countries = processAllCountries(this.#options);
-    const { dialCodes, dialCodeMaxLength, dialCodeToIso2Map } = processDialCodes(
-      this.#countries
-    );
+    const { dialCodes, dialCodeMaxLength, dialCodeToIso2Map } = processDialCodes(this.#countries);
     this.#dialCodes = dialCodes;
     this.#dialCodeMaxLength = dialCodeMaxLength;
     this.#dialCodeToIso2Map = dialCodeToIso2Map;
@@ -3713,6 +3714,7 @@ var Iti = class _Iti {
   #handleAndroidStrictReject(inputValue, rejectedInput) {
     const newCaretPos = this.#removeJustTypedChar(inputValue);
     this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+    this.#playStrictRejectAnimation();
     this.#dispatchEvent(EVENTS.STRICT_REJECT, {
       source: "key",
       rejectedInput,
@@ -3772,7 +3774,13 @@ var Iti = class _Iti {
   //* On input event: (1) Update selected country, (2) Format-as-you-type.
   //* Note that this fires AFTER the input is updated.
   #handleInputEvent = (e) => {
-    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    const {
+      strictMode,
+      formatAsYouType,
+      separateDialCode,
+      allowDropdown,
+      countrySearch
+    } = this.#options;
     const detail = e?.detail;
     if (detail?.["isCountryChange"]) {
       return;
@@ -3854,6 +3862,7 @@ var Iti = class _Iti {
     const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
     const isChangingDialCode = newCountry !== null;
     if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
+      this.#playStrictRejectAnimation();
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "key",
         rejectedInput: e.key,
@@ -3896,6 +3905,7 @@ var Iti = class _Iti {
         coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
       }
       if (!coreNumber) {
+        this.#playStrictRejectAnimation();
         this.#dispatchEvent(EVENTS.STRICT_REJECT, {
           source: "paste",
           rejectedInput: pastedRaw,
@@ -3909,6 +3919,7 @@ var Iti = class _Iti {
           newValue = newValue.slice(0, newValue.length - trimLength);
           rejectReason = "max-length";
         } else {
+          this.#playStrictRejectAnimation();
           this.#dispatchEvent(EVENTS.STRICT_REJECT, {
             source: "paste",
             rejectedInput: pastedRaw,
@@ -3923,6 +3934,9 @@ var Iti = class _Iti {
     input.setSelectionRange(caretPos, caretPos);
     input.dispatchEvent(new InputEvent("input", { bubbles: true }));
     if (rejectReason) {
+      if (pasted.length > 0 && sanitised.length === 0) {
+        this.#playStrictRejectAnimation();
+      }
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "paste",
         rejectedInput: pastedRaw,
@@ -3935,6 +3949,21 @@ 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, {
@@ -4571,7 +4600,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.2.0"
+    version: "27.3.0"
   }
 );
 var intlTelInput_default = intlTelInput;