intl-tel-input update to 17.0.3

webcat12345 · Sep 4, 2020 · be6eb45 · be6eb45
1 parent 5555ae6
commit be6eb45
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 53 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@
 
 # dependencies
 node_modules
+package-lock.json
 
 # profiling files
 chrome-profiler-events.json

diff --git a/package.json b/package.json
@@ -28,10 +28,10 @@
 		"bootstrap": "^4.3.1",
 		"core-js": "^2.6.9",
 		"google-libphonenumber": "^3.2.3",
-		"intl-tel-input": "^14.1.0",
+		"intl-tel-input": "^17.0.3",
 		"jquery": "^3.5.0",
 		"ngx-bootstrap": "^5.6.1",
-		"popper.js": "^1.15.0",
+		"popper.js": "^1.16.1",
 		"rxjs": "~6.5.5",
 		"tslib": "^1.10.0",
 		"zone.js": "~0.10.2"
@@ -46,7 +46,6 @@
 		"@types/jasminewd2": "~2.0.3",
 		"@types/node": "^12.11.1",
 		"ajv": "^6.10.2",
-		"codelyzer": "^5.1.2",
 		"eslint": "^7.2.0",
 		"jasmine-core": "~2.99.1",
 		"jasmine-spec-reporter": "~4.2.1",

diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "ngx-intl-tel-input",
-	"version": "2.4.3",
+	"version": "2.5.0",
 	"peerDependencies": {
 		"@angular/common": "8.x - 9.x",
 		"@angular/core": "8.x - 9.x",
 		"@angular/forms": "8.x - 9.x",
 		"google-libphonenumber": "^3.2.1",
-		"intl-tel-input": "^14.0.6",
+		"intl-tel-input": "^17.0.3",
 		"ngx-bootstrap": "^5.6.1"
 	},
 	"repository": {

diff --git a/projects/ngx-intl-tel-input/src/lib/model/country.model.ts b/projects/ngx-intl-tel-input/src/lib/model/country.model.ts
@@ -4,6 +4,7 @@ export interface Country {
 	dialCode: string;
 	priority: number;
 	areaCodes?: string[];
+	htmlId: string;
 	flagClass: string;
 	placeHolder: string;
 }
diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.css b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.css
@@ -1,56 +1,59 @@
-li.country:hover {
+li.iti__country:hover {
 	background-color: rgba(0, 0, 0, 0.05);
 }
-.selected-flag.dropdown-toggle:after {
+.iti__selected-flag.dropdown-toggle:after {
 	content: none;
 }
-.flag-container.disabled {
+.iti__flag-container.disabled {
 	cursor: default !important;
 }
-.intl-tel-input.allow-dropdown .flag-container.disabled:hover .selected-flag {
+.iti.iti--allow-dropdown .flag-container.disabled:hover .iti__selected-flag {
 	background: none;
 }
 .country-dropdown {
-	border: 1px solid #CCC;
+	border: 1px solid #ccc;
 	width: fit-content;
 	padding: 1px;
 	border-collapse: collapse;
 }
 .search-container {
-	position: relative; 
+	position: relative;
 }
 .search-container input {
 	width: 100%;
 	border: none;
 	border-bottom: 1px solid #ccc;
 	padding-left: 10px;
 }
-.search-icon{
+.search-icon {
 	position: absolute;
 	z-index: 2;
 	width: 25px;
 	margin: 1px 10px;
 }
-.country-list {
+.iti__country-list {
 	position: relative;
 	border: none;
 }
 
-.intl-tel-input input#country-search-box {
+.iti input#country-search-box {
 	padding-left: 6px;
 }
 
-.intl-tel-input.separate-dial-code .selected-flag,
-.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag,
-.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag,
-.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
-	width: 93px;
+.iti .selected-dial-code {
+	margin-left: 6px;
 }
 
+.iti.separate-dial-code .iti__selected-flag,
+.iti.separate-dial-code.iti--allow-dropdown.iti-sdc-2 .iti__selected-flag,
+.iti.separate-dial-code.iti--allow-dropdown.iti-sdc-3 .iti__selected-flag,
+.iti.separate-dial-code.iti--allow-dropdown.iti-sdc-4 .iti__selected-flag {
+	width: 93px;
+}
 
-.intl-tel-input.separate-dial-code input,
-.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
-.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
-.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
+.iti.separate-dial-code input,
+.iti.separate-dial-code.iti--allow-dropdown.iti-sdc-2 input,
+.iti.separate-dial-code.iti--allow-dropdown.iti-sdc-3 input,
+.iti.separate-dial-code.iti--allow-dropdown.iti-sdc-4 input {
 	padding-left: 98px;
-}
+}
diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html
@@ -1,17 +1,17 @@
-<div class="intl-tel-input allow-dropdown"
+<div class="iti iti--allow-dropdown"
 	[ngClass]="separateDialCodeClass">
-	<div class="flag-container"
+	<div class="iti__flag-container"
 		dropdown
 		[ngClass]="{'disabled': disabled}"
 		[isDisabled]="disabled">
-		<div class="selected-flag dropdown-toggle"
+		<div class="iti__selected-flag dropdown-toggle"
 			dropdownToggle>
-			<div class="iti-flag"
+			<div class="iti__flag"
 				[ngClass]="selectedCountry?.flagClass"
 				[tooltip]="selectedCountry ? selectedCountry[tooltipField] : ''"></div>
 			<div *ngIf="separateDialCode"
 				class="selected-dial-code">+{{selectedCountry.dialCode}}</div>
-			<div class="iti-arrow"></div>
+			<div class="iti__arrow"></div>
 		</div>
 		<div *dropdownMenu
 			class="dropdown-menu country-dropdown">
@@ -24,31 +24,31 @@
 					[placeholder]="searchCountryPlaceholder"
 					autofocus>
 			</div>
-			<ul class="country-list"
+			<ul class="iti__country-list"
 				#countryList>
-				<li class="country"
+				<li class="iti__country iti__preferred"
 					*ngFor="let country of preferredCountriesInDropDown"
 					(click)="onCountrySelect(country, focusable)"
-					[id]="country.iso2">
-					<div class="flag-box">
-						<div class="iti-flag"
+					[id]="country.htmlId+'-preferred'">
+					<div class="iti__flag-box">
+						<div class="iti__flag"
 							[ngClass]="country.flagClass"></div>
 					</div>
-					<span class="country-name">{{country.name}}</span>
-					<span class="dial-code">+{{country.dialCode}}</span>
+					<span class="iti__country-name">{{country.name}}</span>
+					<span class="iti__dial-code">+{{country.dialCode}}</span>
 				</li>
-				<li class="divider"
+				<li class="iti__divider"
 					*ngIf="preferredCountriesInDropDown?.length"></li>
-				<li class="country"
+				<li class="iti__country iti__standard"
 					*ngFor="let country of allCountries"
 					(click)="onCountrySelect(country, focusable)"
-					[id]="country.iso2">
-					<div class="flag-box">
-						<div class="iti-flag"
+					[id]="country.htmlId">
+					<div class="iti__flag-box">
+						<div class="iti__flag"
 							[ngClass]="country.flagClass"></div>
 					</div>
-					<span class="country-name">{{country.name}}</span>
-					<span class="dial-code">+{{country.dialCode}}</span>
+					<span class="iti__country-name">{{country.name}}</span>
+					<span class="iti__dial-code">+{{country.dialCode}}</span>
 				</li>
 			</ul>
 		</div>

diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts
@@ -1,8 +1,16 @@
 import * as lpn from 'google-libphonenumber';
 
 import {
-	Component, ElementRef, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output,
-	SimpleChanges, ViewChild
+	Component,
+	ElementRef,
+	EventEmitter,
+	forwardRef,
+	Input,
+	OnChanges,
+	OnInit,
+	Output,
+	SimpleChanges,
+	ViewChild,
 } from '@angular/core';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -58,6 +66,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 	selectedCountry: Country = {
 		areaCodes: undefined,
 		dialCode: '',
+		htmlId: '',
 		flagClass: '',
 		iso2: '',
 		name: '',
@@ -166,7 +175,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 	searchCountry() {
 		if (!this.countrySearchText) {
 			this.countryList.nativeElement
-				.querySelector('.country-list li')
+				.querySelector('.iti__country-list li')
 				.scrollIntoView({
 					behavior: 'smooth',
 					block: 'nearest',
@@ -209,7 +218,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 
 		if (country.length > 0) {
 			const el = this.countryList.nativeElement.querySelector(
-				'#' + country[0].iso2
+				'#' + country[0].htmlId
 			);
 			if (el) {
 				el.scrollIntoView({
@@ -224,7 +233,6 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 	}
 
 	public onPhoneNumberChange(): void {
-
 		let countryCode: string | undefined;
 		// Handle the case where the user sets the value programatically based on a persisted ChangeData obj.
 		if (this.phoneNumber && typeof this.phoneNumber === 'object') {
@@ -237,10 +245,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 		countryCode = countryCode || this.selectedCountry.iso2.toUpperCase();
 		let number: lpn.PhoneNumber;
 		try {
-			number = this.phoneUtil.parse(
-				this.phoneNumber,
-				countryCode,
-			);
+			number = this.phoneUtil.parse(this.phoneNumber, countryCode);
 		} catch (e) {}
 
 		// auto select country based on the extension (and areaCode if needed) (e.g select Canada if number starts with +1 416)
@@ -372,7 +377,8 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 				dialCode: c[2].toString(),
 				priority: +c[3] || 0,
 				areaCodes: (c[4] as string[]) || undefined,
-				flagClass: c[1].toString().toLocaleLowerCase(),
+				htmlId: `iti-0__item-${c[1].toString()}`,
+				flagClass: `iti__${c[1].toString().toLocaleLowerCase()}`,
 				placeHolder: '',
 			};