intl-tel-input 27.2.1 → 27.3.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 See the Github Releases page for changelog: https://github.com/jackocnr/intl-tel-input/releases
 
-Or to view a specific version, e.g. v27.2.1, update the URL accordingly, e.g. https://github.com/jackocnr/intl-tel-input/releases/tag/v27.2.1
+Or to view a specific version, e.g. v27.3.0, update the URL accordingly, e.g. https://github.com/jackocnr/intl-tel-input/releases/tag/v27.3.0
 
 ## Breaking changes
 

package/README.md

@@ -23,20 +23,31 @@ We provide React, Vue, Angular and Svelte (beta) components alongside the regula
 We have a newly updated website, where you can find [a full set of docs](https://intl-tel-input.com/docs/integrations), a [live playground](https://intl-tel-input.com/playground/) where you can try out all of the options, as well as plenty of [examples](https://intl-tel-input.com/examples/validation-practical.html) of different setups.
 
 ## Features
-* Automatically select the user's current country using an IP lookup
-* Automatically set the input placeholder to an example number for the selected country
-* Navigate the country dropdown by typing a country's name, or using the up/down keys
-* Automatically format the number as the user types
-* Optionally, only allow numeric characters and cap the number at the maximum valid length
-* The user types their national number, and the plugin gives you the full standardised international number
-* Number validation, including specific error types
-* High-resolution flag images
-* Accessibility provided via ARIA tags
-* Typescript type definitions included
-* Easily customise styles by overriding CSS variables, e.g. support dark mode
-* React, Vue, Angular and Svelte components also included
-* Translations provided in over 40 languages, as well as support for RTL layout and alternative numeral sets
-* Lots of initialisation options for customisation, as well as instance methods/events for interaction
+
+🔍 **Fast country picking**
+* Search by country name or dial code
+* Full keyboard navigation
+
+✨ **Smart defaults**
+* Optionally auto-detect the user's country via IP lookup
+* Example placeholders per country
+
+📞 **Formatting & output**
+* Formats the number as the user types
+* Extract standard E.164 numbers to store
+
+🛡️ **Validation**
+* Validate numbers with specific error types
+* Strict mode: only allow valid digits and enforce max length
+
+🌍 **International & accessible**
+* Translated into 40+ languages, with support for RTL and alternative numerals
+* Screen reader-friendly ARIA markup
+
+🎛️ **Customisable**
+* Override CSS variables (e.g. dark mode)
+* Optionally display the dial code next to the number
+* Extensive initialisation options, methods, and events
 
 ## Contributing
 See the [contributing guide](https://github.com/jackocnr/intl-tel-input/blob/master/.github/CONTRIBUTING.md) for instructions on setting up the project and making changes, and also on how to update the flag images, or how to add a new translation.

package/angular/dist/IntlTelInput.d.ts

@@ -45,6 +45,7 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     separateDialCode?: AllOptions["separateDialCode"];
     showFlags?: AllOptions["showFlags"];
     strictMode?: AllOptions["strictMode"];
+    strictRejectAnimation?: AllOptions["strictRejectAnimation"];
     useFullscreenPopup?: AllOptions["useFullscreenPopup"];
     numberChange: EventEmitter<string>;
     countryChange: EventEmitter<string>;
@@ -61,6 +62,7 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     click: EventEmitter<MouseEvent>;
     private iti?;
     private appliedInputAttrKeys;
+    private pluginInputClasses;
     private lastEmittedNumber?;
     private lastEmittedCountry?;
     private lastEmittedValidity?;
@@ -103,6 +105,6 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     validate(_control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IntlTelInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInput, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "allowDropdown": { "alias": "allowDropdown"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "autoPlaceholder": { "alias": "autoPlaceholder"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownContainer": { "alias": "dropdownContainer"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "fixDropdownWidth": { "alias": "fixDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "formatOnDisplay": { "alias": "formatOnDisplay"; "required": false; }; "geoIpLookup": { "alias": "geoIpLookup"; "required": false; }; "hiddenInput": { "alias": "hiddenInput"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "nationalMode": { "alias": "nationalMode"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "placeholderNumberType": { "alias": "placeholderNumberType"; "required": false; }; "searchInputClass": { "alias": "searchInputClass"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "showFlags": { "alias": "showFlags"; "required": false; }; "strictMode": { "alias": "strictMode"; "required": false; }; "useFullscreenPopup": { "alias": "useFullscreenPopup"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "openCountryDropdown": "openCountryDropdown"; "closeCountryDropdown": "closeCountryDropdown"; "strictReject": "strictReject"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInput, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "allowDropdown": { "alias": "allowDropdown"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "autoPlaceholder": { "alias": "autoPlaceholder"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownContainer": { "alias": "dropdownContainer"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "fixDropdownWidth": { "alias": "fixDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "formatOnDisplay": { "alias": "formatOnDisplay"; "required": false; }; "geoIpLookup": { "alias": "geoIpLookup"; "required": false; }; "hiddenInput": { "alias": "hiddenInput"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "nationalMode": { "alias": "nationalMode"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "placeholderNumberType": { "alias": "placeholderNumberType"; "required": false; }; "searchInputClass": { "alias": "searchInputClass"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "showFlags": { "alias": "showFlags"; "required": false; }; "strictMode": { "alias": "strictMode"; "required": false; }; "strictRejectAnimation": { "alias": "strictRejectAnimation"; "required": false; }; "useFullscreenPopup": { "alias": "useFullscreenPopup"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "openCountryDropdown": "openCountryDropdown"; "closeCountryDropdown": "closeCountryDropdown"; "strictReject": "strictReject"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
 }
 export default IntlTelInput;

package/angular/dist/IntlTelInput.js

@@ -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.1"
+    version: "27.3.0"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -4621,6 +4650,7 @@ var IntlTelInput = class _IntlTelInput {
   separateDialCode;
   showFlags;
   strictMode;
+  strictRejectAnimation;
   useFullscreenPopup;
   numberChange = new EventEmitter();
   countryChange = new EventEmitter();
@@ -4637,6 +4667,8 @@ var IntlTelInput = class _IntlTelInput {
   click = new EventEmitter();
   iti;
   appliedInputAttrKeys = /* @__PURE__ */ new Set();
+  // Classes the plugin adds directly to the input (e.g. iti__tel-input)
+  pluginInputClasses = "";
   lastEmittedNumber;
   lastEmittedCountry;
   lastEmittedValidity;
@@ -4661,6 +4693,7 @@ var IntlTelInput = class _IntlTelInput {
   };
   ngAfterViewInit() {
     this.iti = intlTelInput_default(this.inputRef.nativeElement, this.buildInitOptions());
+    this.pluginInputClasses = this.inputRef.nativeElement.className;
     this.inputRef.nativeElement.addEventListener("open:countrydropdown", this.handleOpenDropdown);
     this.inputRef.nativeElement.addEventListener("close:countrydropdown", this.handleCloseDropdown);
     this.inputRef.nativeElement.addEventListener("strict:reject", this.handleStrictReject);
@@ -4719,6 +4752,7 @@ var IntlTelInput = class _IntlTelInput {
       separateDialCode: this.separateDialCode,
       showFlags: this.showFlags,
       strictMode: this.strictMode,
+      strictRejectAnimation: this.strictRejectAnimation,
       useFullscreenPopup: this.useFullscreenPopup
     };
     return Object.fromEntries(Object.entries(options).filter(([, value]) => value !== void 0));
@@ -4824,7 +4858,8 @@ var IntlTelInput = class _IntlTelInput {
         warnInputAttr(key);
       } else {
         currentKeys.add(key);
-        this.inputRef.nativeElement.setAttribute(key, value);
+        const next = key === "class" && this.pluginInputClasses ? `${this.pluginInputClasses} ${value}` : value;
+        this.inputRef.nativeElement.setAttribute(key, next);
       }
     });
     this.appliedInputAttrKeys.forEach((key) => {
@@ -4885,7 +4920,7 @@ var IntlTelInput = class _IntlTelInput {
       let _t;
       i0.\u0275\u0275queryRefresh(_t = i0.\u0275\u0275loadQuery()) && (ctx.inputRef = _t.first);
     }
-  }, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", allowDropdown: "allowDropdown", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", autoPlaceholder: "autoPlaceholder", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownContainer: "dropdownContainer", excludeCountries: "excludeCountries", fixDropdownWidth: "fixDropdownWidth", formatAsYouType: "formatAsYouType", formatOnDisplay: "formatOnDisplay", geoIpLookup: "geoIpLookup", hiddenInput: "hiddenInput", i18n: "i18n", initialCountry: "initialCountry", loadUtils: "loadUtils", nationalMode: "nationalMode", onlyCountries: "onlyCountries", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", useFullscreenPopup: "useFullscreenPopup" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", openCountryDropdown: "openCountryDropdown", closeCountryDropdown: "closeCountryDropdown", strictReject: "strictReject", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
+  }, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", allowDropdown: "allowDropdown", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", autoPlaceholder: "autoPlaceholder", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownContainer: "dropdownContainer", excludeCountries: "excludeCountries", fixDropdownWidth: "fixDropdownWidth", formatAsYouType: "formatAsYouType", formatOnDisplay: "formatOnDisplay", geoIpLookup: "geoIpLookup", hiddenInput: "hiddenInput", i18n: "i18n", initialCountry: "initialCountry", loadUtils: "loadUtils", nationalMode: "nationalMode", onlyCountries: "onlyCountries", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", strictRejectAnimation: "strictRejectAnimation", useFullscreenPopup: "useFullscreenPopup" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", openCountryDropdown: "openCountryDropdown", closeCountryDropdown: "closeCountryDropdown", strictReject: "strictReject", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => _IntlTelInput),
@@ -5019,6 +5054,8 @@ var IntlTelInput = class _IntlTelInput {
     type: Input
   }], strictMode: [{
     type: Input
+  }], strictRejectAnimation: [{
+    type: Input
   }], useFullscreenPopup: [{
     type: Input
   }], numberChange: [{