Support intl-tel-input 19

README.md

@@ -35,7 +35,6 @@ $ npm install intl-tel-input-ng --save / yarn add intl-tel-input-ng
 
 ## Options
  - `options`: An object wrapping the `intl-tel-input` [options](https://github.com/jackocnr/intl-tel-input#options).
- - `onlyLocalized`: If `true`, displays only localized country data. See [here](https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/modify-country-data.html).
  - `label`: If specified, will generate a `label` for the input (if the name option is set too).
  - `name`: Sets `name` and `id` attributes for the input. The default value is `intl-tel-input-name`.
  - `cssClass`: The CSS class used to style the input component.
@@ -58,10 +57,9 @@ 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"
         [(E164PhoneNumber)]="E164PhoneNumber"></intl-tel-input>
 </form>     
 ```

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();
@@ -205,27 +206,4 @@ describe('IntlTelInputComponent', () => {
 
         expect(element.innerHTML).toBe(localizedCountryName);
     });
-
-    it('should be possible to set localizedOnly option', () => {
-        // country data is window global, and any modification is persistent between tests....
-        // so we choose another country than CH (because used in another spec)
-
-        component.options = {
-            preferredCountries: ['se'],
-            onlyCountries: ['se']
-        };
-        component.onlyLocalized = true;
-        component.ngAfterViewInit();
-
-        fixture.detectChanges();
-
-        const element = fixture
-            .debugElement
-            .query(By.css('#intl-tel-input-name'))
-            .nativeElement
-            .parentNode
-            .querySelector('.iti__country-name');
-
-        expect(element.innerHTML).toBe('Sverige');
-    });
 });

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

@@ -25,24 +25,14 @@ export class IntlTelInputComponent implements AfterViewInit {
     @Input() label!: string;
     @Input() labelCssClass!: string;
     @Input() name = 'intl-tel-input-name';
-    @Input() onlyLocalized!: boolean;
     @Input() options: IntlTelInputOptions = {};
     @Input() required!: boolean;
     @Output() private E164PhoneNumberChange = new EventEmitter<string | null>();
     @ViewChild('intlTelInput') private _inputElement!: ElementRef;
     private _phoneNumber!: string;
     private _intlTelInput: any;
 
-    private static modifyCountryData(): void {
-        (window as any).intlTelInputGlobals.getCountryData().forEach((country: CountryData) =>
-            country.name = country.name.replace(/.+\((.+)\)/, '$1'));
-    }
-
     ngAfterViewInit(): void {
-        if (this.onlyLocalized) {
-            IntlTelInputComponent.modifyCountryData();
-        }
-
         const intlTelInputInstance = intlTelInput;
         this._intlTelInput = intlTelInputInstance(this._inputElement.nativeElement, this.options);
     }
@@ -65,7 +55,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