Support intl-tel-input 19

README.md

@@ -58,7 +58,7 @@ See the [intl-tel-input repository](https://github.com/jackocnr/intl-tel-input)
         [required]="true"
         [options]="{
             preferredCountries: ['ch'],
-            localizedCountries: { ch: 'Suisse' },
+            i18n: { ch: 'Suisse' },
             onlyCountries: ['fr', 'ch']
         }"
         [onlyLocalized]="true"

package.json

@@ -36,7 +36,7 @@
     "@angular/common": "^17.0.0",
     "@angular/core": "^17.0.0",
     "@angular/forms": "^17.0.0",
-    "intl-tel-input": "^18.0.0"
+    "intl-tel-input": "^19.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.0.0",

src/lib/components/intl-tel-input.component.spec.ts

@@ -7,7 +7,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, NgForm } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IntlTelInputComponent } from './intl-tel-input.component';
@@ -168,6 +168,7 @@ describe('IntlTelInputComponent', () => {
 
     it('should be possible to set preferredCountries option', () => {
         component.options = {
+            countrySearch: false,
             preferredCountries: ['ch'],
             onlyCountries: ['ch']
         };
@@ -185,11 +186,11 @@ describe('IntlTelInputComponent', () => {
         expect(element.getAttribute('data-country-code')).toBe(component.options.onlyCountries?.[0]);
     });
 
-    it('should be possible to set localizedCountries option', () => {
+    it('should be possible to set i18n option', () => {
         const localizedCountryName = 'Suisse';
         component.options = {
             preferredCountries: ['ch'],
-            localizedCountries: { ch: localizedCountryName },
+            i18n: { ch: localizedCountryName },
             onlyCountries: ['ch']
         };
         component.ngAfterViewInit();

src/lib/components/intl-tel-input.component.ts

@@ -31,7 +31,7 @@ export class IntlTelInputComponent implements AfterViewInit {
     @Output() private E164PhoneNumberChange = new EventEmitter<string | null>();
     @ViewChild('intlTelInput') private _inputElement!: ElementRef;
     private _phoneNumber!: string;
-    private _intlTelInput: any;
+    public _intlTelInput: any;
 
     private static modifyCountryData(): void {
         (window as any).intlTelInputGlobals.getCountryData().forEach((country: CountryData) =>
@@ -65,7 +65,7 @@ export class IntlTelInputComponent implements AfterViewInit {
 
     i18nizePhoneNumber(): void {
         this.E164PhoneNumber = null;
-        if (this._intlTelInput.isValidNumber()) {
+        if (this._intlTelInput.isValidNumberPrecise()) {
             this.E164PhoneNumber = this._intlTelInput.getNumber();
         }
         this.E164PhoneNumberChange.emit(this.E164PhoneNumber);

src/lib/model/intl-tel-input-options.ts

@@ -37,6 +37,11 @@ export interface IntlTelInputOptions {
      * Default = "polite"
      */
     autoPlaceholder?: 'off' | 'polite' | 'aggressive';
+    /**
+     * Add a search input to the top of the dropdown, so users can filter the displayed countries.
+     * Default = true
+     */
+    countrySearch?: boolean;
     /**
      * Change the placeholder generated by autoPlaceholder. Must return a string.
      * Default = null
@@ -95,7 +100,7 @@ export interface IntlTelInputOptions {
      * Allows to translate the countries by its given iso code e.g.:
      * { 'de': 'Deutschland' }
      */
-    localizedCountries?: { [key: string]: string };
+    i18n?: { [key: string]: string };
     /**
      * Allow users to enter national numbers (and not have to think about
      * international dial codes). Formatting, validation and placeholders still
@@ -118,7 +123,7 @@ export interface IntlTelInputOptions {
     placeholderNumberType?: placeholderNumberType;
     /**
      * Specify the countries to appear at the top of the list.
-     * Default = ["us", "gb"]
+     * Note that this option is not compatible with the countrySearch feature, and so that needs to be disabled for this to work.
      */
     preferredCountries?: string[];
     /**
@@ -128,7 +133,7 @@ export interface IntlTelInputOptions {
      * dial code separated.
      * Default = false
      */
-    separateDialCode?: boolean;
+    showSelectedDialCode?: boolean;
     /**
      * Enable formatting/validation etc. by specifying the URL of the included utils.js script
      * (or alternatively just point it to the file on cdnjs.com). The script is fetched when the page has finished