From 5f383a8c83c1434d0e918ee52e3a251fe88e69c4 Mon Sep 17 00:00:00 2001 From: tlebreton Date: Thu, 14 Mar 2024 14:19:48 +0100 Subject: [PATCH 1/5] Support intl-tel-input 19 --- package-lock.json | 82 ++++++++++++++++++++++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 75 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index c0d1964..7b9b4ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,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" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -9225,10 +9225,15 @@ } }, "node_modules/intl-tel-input": { - "version": "18.2.1", - "resolved": "https://registry.npmjs.org/intl-tel-input/-/intl-tel-input-18.2.1.tgz", - "integrity": "sha512-wOm0/61kTtpYjOOW1bhHzC4G8Om+atTxHmg31FS0KD0LQ8k8BpgO925npyi4jlT/EK4+joABABZzz0/XeSgupQ==", - "peer": true + "version": "19.5.7", + "resolved": "https://registry.npmjs.org/intl-tel-input/-/intl-tel-input-19.5.7.tgz", + "integrity": "sha512-jw8qKesME8//LbsjFV+haoKZzDNKlLxzLDnSl3jJg+KgmiDtGP5VUrCxI2SQip7+ZOJhGfWYKV3kp1ZYmgg9iQ==", + "peer": true, + "dependencies": { + "prop-types": "^15.8.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } }, "node_modules/ip": { "version": "1.1.8", @@ -9843,8 +9848,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "3.14.1", @@ -10709,6 +10713,18 @@ "node": ">=8.0" } }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -12018,7 +12034,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -13035,6 +13050,23 @@ "node": ">= 6" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "peer": true, + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "peer": true + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -13232,6 +13264,31 @@ "node": ">= 0.8" } }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -13886,6 +13943,15 @@ "dev": true, "optional": true }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/schema-utils": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", diff --git a/package.json b/package.json index 7456e2d..0bc8109 100644 --- a/package.json +++ b/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", From ad60fa4a6a54cb259ddebdb13c87aa7ce9a10d05 Mon Sep 17 00:00:00 2001 From: tlebreton Date: Thu, 14 Mar 2024 17:47:48 +0100 Subject: [PATCH 2/5] Solve some tests --- README.md | 2 +- src/lib/components/intl-tel-input.component.spec.ts | 6 +++--- src/lib/components/intl-tel-input.component.ts | 2 +- src/lib/model/intl-tel-input-options.ts | 5 ++--- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index bc07e14..9117fdb 100644 --- a/README.md +++ b/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" diff --git a/src/lib/components/intl-tel-input.component.spec.ts b/src/lib/components/intl-tel-input.component.spec.ts index c51ad27..72233a1 100644 --- a/src/lib/components/intl-tel-input.component.spec.ts +++ b/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'; @@ -185,11 +185,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(); diff --git a/src/lib/components/intl-tel-input.component.ts b/src/lib/components/intl-tel-input.component.ts index 3614774..b585aab 100644 --- a/src/lib/components/intl-tel-input.component.ts +++ b/src/lib/components/intl-tel-input.component.ts @@ -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); diff --git a/src/lib/model/intl-tel-input-options.ts b/src/lib/model/intl-tel-input-options.ts index 80d996b..82adef6 100644 --- a/src/lib/model/intl-tel-input-options.ts +++ b/src/lib/model/intl-tel-input-options.ts @@ -95,7 +95,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 +118,6 @@ export interface IntlTelInputOptions { placeholderNumberType?: placeholderNumberType; /** * Specify the countries to appear at the top of the list. - * Default = ["us", "gb"] */ preferredCountries?: string[]; /** @@ -128,7 +127,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 From 9b116873398abf8b1c5028b7e7e3495aadb2af43 Mon Sep 17 00:00:00 2001 From: tlebreton Date: Thu, 14 Mar 2024 17:58:09 +0100 Subject: [PATCH 3/5] Fix test for preferredCountries --- src/lib/components/intl-tel-input.component.spec.ts | 1 + src/lib/components/intl-tel-input.component.ts | 2 +- src/lib/model/intl-tel-input-options.ts | 6 ++++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/lib/components/intl-tel-input.component.spec.ts b/src/lib/components/intl-tel-input.component.spec.ts index 72233a1..8da085f 100644 --- a/src/lib/components/intl-tel-input.component.spec.ts +++ b/src/lib/components/intl-tel-input.component.spec.ts @@ -168,6 +168,7 @@ describe('IntlTelInputComponent', () => { it('should be possible to set preferredCountries option', () => { component.options = { + countrySearch: false, preferredCountries: ['ch'], onlyCountries: ['ch'] }; diff --git a/src/lib/components/intl-tel-input.component.ts b/src/lib/components/intl-tel-input.component.ts index b585aab..3b64d05 100644 --- a/src/lib/components/intl-tel-input.component.ts +++ b/src/lib/components/intl-tel-input.component.ts @@ -31,7 +31,7 @@ export class IntlTelInputComponent implements AfterViewInit { @Output() private E164PhoneNumberChange = new EventEmitter(); @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) => diff --git a/src/lib/model/intl-tel-input-options.ts b/src/lib/model/intl-tel-input-options.ts index 82adef6..982f108 100644 --- a/src/lib/model/intl-tel-input-options.ts +++ b/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 @@ -118,6 +123,7 @@ export interface IntlTelInputOptions { placeholderNumberType?: placeholderNumberType; /** * Specify the countries to appear at the top of the list. + * Note that this option is not compatible with the countrySearch feature, and so that needs to be disabled for this to work. */ preferredCountries?: string[]; /** From 1e1fecf9e25a049163a7929903fa593899968779 Mon Sep 17 00:00:00 2001 From: tlebreton Date: Thu, 14 Mar 2024 19:13:01 +0100 Subject: [PATCH 4/5] Remove useless test --- .../intl-tel-input.component.spec.ts | 23 ------------------- .../components/intl-tel-input.component.ts | 2 +- 2 files changed, 1 insertion(+), 24 deletions(-) diff --git a/src/lib/components/intl-tel-input.component.spec.ts b/src/lib/components/intl-tel-input.component.spec.ts index 8da085f..25053cc 100644 --- a/src/lib/components/intl-tel-input.component.spec.ts +++ b/src/lib/components/intl-tel-input.component.spec.ts @@ -206,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'); - }); }); diff --git a/src/lib/components/intl-tel-input.component.ts b/src/lib/components/intl-tel-input.component.ts index 3b64d05..b585aab 100644 --- a/src/lib/components/intl-tel-input.component.ts +++ b/src/lib/components/intl-tel-input.component.ts @@ -31,7 +31,7 @@ export class IntlTelInputComponent implements AfterViewInit { @Output() private E164PhoneNumberChange = new EventEmitter(); @ViewChild('intlTelInput') private _inputElement!: ElementRef; private _phoneNumber!: string; - public _intlTelInput: any; + private _intlTelInput: any; private static modifyCountryData(): void { (window as any).intlTelInputGlobals.getCountryData().forEach((country: CountryData) => From 7af53d099182ed8022be4970226273e0fc89b2eb Mon Sep 17 00:00:00 2001 From: tlebreton Date: Thu, 14 Mar 2024 19:25:52 +0100 Subject: [PATCH 5/5] Remove onlyLocalized --- README.md | 2 -- src/lib/components/intl-tel-input.component.ts | 10 ---------- 2 files changed, 12 deletions(-) diff --git a/README.md b/README.md index 9117fdb..dad21d9 100644 --- a/README.md +++ b/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. @@ -61,7 +60,6 @@ See the [intl-tel-input repository](https://github.com/jackocnr/intl-tel-input) i18n: { ch: 'Suisse' }, onlyCountries: ['fr', 'ch'] }" - [onlyLocalized]="true" [(E164PhoneNumber)]="E164PhoneNumber"> ``` diff --git a/src/lib/components/intl-tel-input.component.ts b/src/lib/components/intl-tel-input.component.ts index b585aab..55f12ab 100644 --- a/src/lib/components/intl-tel-input.component.ts +++ b/src/lib/components/intl-tel-input.component.ts @@ -25,7 +25,6 @@ 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(); @@ -33,16 +32,7 @@ export class IntlTelInputComponent implements AfterViewInit { 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); }