From 3b77d1f9e4f75ff4e00d08c17bc2b91266856e15 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Thu, 16 Sep 2021 11:44:58 -0500
Subject: [PATCH 01/25] update to use @ng-bootstrap

---
 package.json                                  |   2 +-
 projects/ngx-intl-tel-input/ng-package.json   |  19 ++-
 projects/ngx-intl-tel-input/package.json      |  10 +-
 .../src/lib/ngx-intl-tel-input.component.css  |  10 ++
 .../src/lib/ngx-intl-tel-input.component.html |  79 ++++++-----
 .../src/lib/ngx-intl-tel-input.component.ts   | 132 +++++++++---------
 .../src/lib/ngx-intl-tel-input.module.ts      |  25 ++--
 7 files changed, 139 insertions(+), 138 deletions(-)

diff --git a/package.json b/package.json
index e2d55ad1..6b722ee0 100644
--- a/package.json
+++ b/package.json
@@ -28,12 +28,12 @@
     "@angular/platform-browser": "~11.2.1",
     "@angular/platform-browser-dynamic": "~11.2.1",
     "@angular/router": "~11.2.1",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "bootstrap": "^4.5.2",
     "core-js": "^3.6.5",
     "google-libphonenumber": "^3.2.3",
     "intl-tel-input": "^17.0.3",
     "jquery": "^3.5.0",
-    "ngx-bootstrap": "^6.0.0",
     "popper.js": "^1.16.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
diff --git a/projects/ngx-intl-tel-input/ng-package.json b/projects/ngx-intl-tel-input/ng-package.json
index 9c412065..6ada289c 100644
--- a/projects/ngx-intl-tel-input/ng-package.json
+++ b/projects/ngx-intl-tel-input/ng-package.json
@@ -1,12 +1,11 @@
 {
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-intl-tel-input",
-  "lib": {
-    "entryFile": "src/public_api.ts",
-    "umdModuleIds": {
-      "google-libphonenumber": "^3.2.3",
-      "ngx-bootstrap": "^6.0.0",
-      "ngx-bootstrap/dropdown": "ngx-bootstrap-dropdown"
-    }
-  }
+	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "../../dist/ngx-intl-tel-input",
+	"lib": {
+		"entryFile": "src/public_api.ts",
+		"umdModuleIds": {
+			"google-libphonenumber": "^3.2.3",
+			"@ng-bootstrap/ng-bootstrap": "^9.1.3"
+		}
+	}
 }
diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index fbc64140..85447778 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -7,15 +7,15 @@
 		"@angular/forms": "8.x - 11.x",
 		"google-libphonenumber": "^3.2.3",
 		"intl-tel-input": "^17.0.3",
-		"ngx-bootstrap": "^6.0.0"
+		"@ng-bootstrap/ng-bootstrap": "^9.1.3"
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/webcat12345/ngx-intl-tel-input"
+		"url": "https://github.com/travelnetsolutions/ngx-intl-tel-input"
 	},
 	"author": {
-		"name": "webcat12345",
-		"email": "webcat91@gmail.com"
+		"name": "Andrew Darts",
+		"email": "adarts@tnsinc.com"
 	},
 	"keywords": [
 		"angular",
@@ -32,7 +32,7 @@
 	],
 	"license": "MIT",
 	"bugs": {
-		"url": "https://github.com/webcat12345/ngx-intl-tel-input/issues"
+		"url": "https://github.com/travelnetsolutions/ngx-intl-tel-input/issues"
 	},
 	"devDependencies": {
 		"@types/google-libphonenumber": "^7.4.17"
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
index 5bc96fe5..4421b9f2 100644
--- 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,9 +1,15 @@
 li.iti__country:hover {
 	background-color: rgba(0, 0, 0, 0.05);
 }
+
 .iti__selected-flag.dropdown-toggle:after {
 	content: none;
 }
+
+.iti__flag-container {
+	position: absolute;
+}
+
 .iti__flag-container.disabled {
 	cursor: default !important;
 }
@@ -36,6 +42,10 @@ li.iti__country:hover {
 	border: none;
 }
 
+.iti__country-list::-webkit-scrollbar {
+	display: none;
+}
+
 .iti input#country-search-box {
 	padding-left: 6px;
 }
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
index 4d0883f0..69c2299c 100644
--- 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,58 +1,64 @@
-<div class="iti iti--allow-dropdown"
-	[ngClass]="separateDialCodeClass">
-	<div class="iti__flag-container"
-		dropdown
-		[ngClass]="{'disabled': disabled}"
-		[isDisabled]="disabled">
-		<div class="iti__selected-flag dropdown-toggle"
-			dropdownToggle>
-			<div class="iti__flag"
-				[ngClass]="selectedCountry?.flagClass"></div>
-			<div *ngIf="separateDialCode"
-				class="selected-dial-code">+{{selectedCountry.dialCode}}</div>
+<div class="iti iti--allow-dropdown" [ngClass]="separateDialCodeClass">
+	<div
+		class="iti__flag-container"
+		ngbDropdown
+		[ngClass]="{ disabled: disabled }"
+	>
+		<div class="iti__selected-flag dropdown-toggle" ngbDropdownToggle>
+			<div class="iti__flag" [ngClass]="selectedCountry?.flagClass"></div>
+			<div *ngIf="separateDialCode" class="selected-dial-code">
+				+{{ selectedCountry.dialCode }}
+			</div>
 			<div class="iti__arrow"></div>
 		</div>
-		<div *dropdownMenu
-			class="dropdown-menu country-dropdown">
-			<div class="search-container"
-				*ngIf="searchCountryFlag && searchCountryField">
-				<input id="country-search-box"
+		<div ngbDropdownMenu class="dropdown-menu country-dropdown">
+			<div
+				class="search-container"
+				*ngIf="searchCountryFlag && searchCountryField"
+			>
+				<input
+					id="country-search-box"
 					[(ngModel)]="countrySearchText"
 					(keyup)="searchCountry()"
 					(click)="$event.stopPropagation()"
 					[placeholder]="searchCountryPlaceholder"
-					autofocus>
+					autofocus
+				/>
 			</div>
-			<ul class="iti__country-list"
-				#countryList>
-				<li class="iti__country iti__preferred"
+			<ul class="iti__country-list" #countryList>
+				<li
+					class="iti__country iti__preferred"
 					*ngFor="let country of preferredCountriesInDropDown"
 					(click)="onCountrySelect(country, focusable)"
-					[id]="country.htmlId+'-preferred'">
+					[id]="country.htmlId + '-preferred'"
+				>
 					<div class="iti__flag-box">
-						<div class="iti__flag"
-							[ngClass]="country.flagClass"></div>
+						<div class="iti__flag" [ngClass]="country.flagClass"></div>
 					</div>
-					<span class="iti__country-name">{{country.name}}</span>
-					<span class="iti__dial-code">+{{country.dialCode}}</span>
+					<span class="iti__country-name">{{ country.name }}</span>
+					<span class="iti__dial-code">+{{ country.dialCode }}</span>
 				</li>
-				<li class="iti__divider"
-					*ngIf="preferredCountriesInDropDown?.length"></li>
-				<li class="iti__country iti__standard"
+				<li
+					class="iti__divider"
+					*ngIf="preferredCountriesInDropDown?.length"
+				></li>
+				<li
+					class="iti__country iti__standard"
 					*ngFor="let country of allCountries"
 					(click)="onCountrySelect(country, focusable)"
-					[id]="country.htmlId">
+					[id]="country.htmlId"
+				>
 					<div class="iti__flag-box">
-						<div class="iti__flag"
-							[ngClass]="country.flagClass"></div>
+						<div class="iti__flag" [ngClass]="country.flagClass"></div>
 					</div>
-					<span class="iti__country-name">{{country.name}}</span>
-					<span class="iti__dial-code">+{{country.dialCode}}</span>
+					<span class="iti__country-name">{{ country.name }}</span>
+					<span class="iti__dial-code">+{{ country.dialCode }}</span>
 				</li>
 			</ul>
 		</div>
 	</div>
-	<input type="tel"
+	<input
+		type="tel"
 		[id]="inputId"
 		autocomplete="off"
 		[ngClass]="cssClass"
@@ -64,5 +70,6 @@
 		[placeholder]="resolvePlaceholder()"
 		[attr.maxLength]="maxLength"
 		[attr.validation]="phoneValidation"
-		#focusable>
+		#focusable
+	/>
 </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
index 069fa536..a717a83a 100644
--- 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,4 +1,4 @@
-import * as lpn from 'google-libphonenumber';
+import * as lpn from "google-libphonenumber";
 
 import {
 	Component,
@@ -11,24 +11,22 @@ import {
 	Output,
 	SimpleChanges,
 	ViewChild,
-} from '@angular/core';
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
+} from "@angular/core";
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
 
-import { setTheme } from 'ngx-bootstrap/utils';
-
-import { CountryCode } from './data/country-code';
-import { CountryISO } from './enums/country-iso.enum';
-import { SearchCountryField } from './enums/search-country-field.enum';
-import type { ChangeData } from './interfaces/change-data';
-import type { Country } from './model/country.model';
-import { phoneNumberValidator } from './ngx-intl-tel-input.validator';
-import { PhoneNumberFormat } from './enums/phone-number-format.enum';
+import { CountryCode } from "./data/country-code";
+import { CountryISO } from "./enums/country-iso.enum";
+import { SearchCountryField } from "./enums/search-country-field.enum";
+import type { ChangeData } from "./interfaces/change-data";
+import type { Country } from "./model/country.model";
+import { phoneNumberValidator } from "./ngx-intl-tel-input.validator";
+import { PhoneNumberFormat } from "./enums/phone-number-format.enum";
 
 @Component({
 	// tslint:disable-next-line: component-selector
-	selector: 'ngx-intl-tel-input',
-	templateUrl: './ngx-intl-tel-input.component.html',
-	styleUrls: ['./bootstrap-dropdown.css', './ngx-intl-tel-input.component.css'],
+	selector: "ngx-intl-tel-input",
+	templateUrl: "./ngx-intl-tel-input.component.html",
+	styleUrls: ["./bootstrap-dropdown.css", "./ngx-intl-tel-input.component.css"],
 	providers: [
 		CountryCode,
 		{
@@ -45,22 +43,22 @@ import { PhoneNumberFormat } from './enums/phone-number-format.enum';
 	],
 })
 export class NgxIntlTelInputComponent implements OnInit, OnChanges {
-	@Input() value = '';
+	@Input() value = "";
 	@Input() preferredCountries: Array<string> = [];
 	@Input() enablePlaceholder = true;
 	@Input() customPlaceholder: string;
 	@Input() numberFormat: PhoneNumberFormat = PhoneNumberFormat.International;
-	@Input() cssClass = 'form-control';
+	@Input() cssClass = "form-control";
 	@Input() onlyCountries: Array<string> = [];
 	@Input() enableAutoCountrySelect = true;
 	@Input() searchCountryFlag = false;
 	@Input() searchCountryField: SearchCountryField[] = [SearchCountryField.All];
-	@Input() searchCountryPlaceholder = 'Search Country';
-	@Input() maxLength = '';
+	@Input() searchCountryPlaceholder = "Search Country";
+	@Input() maxLength = "";
 	@Input() selectFirstCountry = true;
 	@Input() selectedCountryISO: CountryISO;
 	@Input() phoneValidation = true;
-	@Input() inputId = 'phone';
+	@Input() inputId = "phone";
 	@Input() separateDialCode = false;
 	separateDialCodeClass: string;
 
@@ -68,41 +66,37 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 
 	selectedCountry: Country = {
 		areaCodes: undefined,
-		dialCode: '',
-		htmlId: '',
-		flagClass: '',
-		iso2: '',
-		name: '',
-		placeHolder: '',
+		dialCode: "",
+		htmlId: "",
+		flagClass: "",
+		iso2: "",
+		name: "",
+		placeHolder: "",
 		priority: 0,
 	};
 
-	phoneNumber = '';
+	phoneNumber = "";
 	allCountries: Array<Country> = [];
 	preferredCountriesInDropDown: Array<Country> = [];
 	// Has to be 'any' to prevent a need to install @types/google-libphonenumber by the package user...
 	phoneUtil: any = lpn.PhoneNumberUtil.getInstance();
 	disabled = false;
-	errors: Array<any> = ['Phone number is required.'];
-	countrySearchText = '';
+	errors: Array<any> = ["Phone number is required."];
+	countrySearchText = "";
 
-	@ViewChild('countryList') countryList: ElementRef;
+	@ViewChild("countryList") countryList: ElementRef;
 
 	onTouched = () => {};
 	propagateChange = (_: ChangeData) => {};
 
-	constructor(private countryCodeData: CountryCode) {
-		// If this is not set, ngx-bootstrap will try to use the bs3 CSS (which is not what we've embedded) and will
-		// Add the wrong classes and such
-		setTheme('bs4');
-	}
+	constructor(private countryCodeData: CountryCode) {}
 
 	ngOnInit() {
 		this.init();
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
-		const selectedISO = changes['selectedCountryISO'];
+		const selectedISO = changes["selectedCountryISO"];
 		if (
 			this.allCountries &&
 			selectedISO &&
@@ -152,11 +146,11 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 	public searchCountry() {
 		if (!this.countrySearchText) {
 			this.countryList.nativeElement
-				.querySelector('.iti__country-list li')
+				.querySelector(".iti__country-list li")
 				.scrollIntoView({
-					behavior: 'smooth',
-					block: 'nearest',
-					inline: 'nearest',
+					behavior: "smooth",
+					block: "nearest",
+					inline: "nearest",
 				});
 			return;
 		}
@@ -195,13 +189,13 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 
 		if (country.length > 0) {
 			const el = this.countryList.nativeElement.querySelector(
-				'#' + country[0].htmlId
+				"#" + country[0].htmlId
 			);
 			if (el) {
 				el.scrollIntoView({
-					behavior: 'smooth',
-					block: 'nearest',
-					inline: 'nearest',
+					behavior: "smooth",
+					block: "nearest",
+					inline: "nearest",
 				});
 			}
 		}
@@ -212,7 +206,7 @@ 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') {
+		if (this.phoneNumber && typeof this.phoneNumber === "object") {
 			const numberObj: ChangeData = this.phoneNumber;
 			this.phoneNumber = numberObj.number;
 			countryCode = numberObj.countryCode;
@@ -250,7 +244,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 		} else {
 			const intlNo = number
 				? this.phoneUtil.format(number, lpn.PhoneNumberFormat.INTERNATIONAL)
-				: '';
+				: "";
 
 			// parse phoneNumber if separate dial code is needed
 			if (this.separateDialCode && intlNo) {
@@ -262,12 +256,12 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 				internationalNumber: intlNo,
 				nationalNumber: number
 					? this.phoneUtil.format(number, lpn.PhoneNumberFormat.NATIONAL)
-					: '',
+					: "",
 				e164Number: number
 					? this.phoneUtil.format(number, lpn.PhoneNumberFormat.E164)
-					: '',
+					: "",
 				countryCode: countryCode.toUpperCase(),
-				dialCode: '+' + this.selectedCountry.dialCode,
+				dialCode: "+" + this.selectedCountry.dialCode,
 			});
 		}
 	}
@@ -285,7 +279,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 			);
 			const intlNo = number
 				? this.phoneUtil.format(number, lpn.PhoneNumberFormat.INTERNATIONAL)
-				: '';
+				: "";
 			// parse phoneNumber if separate dial code is needed
 			if (this.separateDialCode && intlNo) {
 				this.value = this.removeDialCode(intlNo);
@@ -296,12 +290,12 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 				internationalNumber: intlNo,
 				nationalNumber: number
 					? this.phoneUtil.format(number, lpn.PhoneNumberFormat.NATIONAL)
-					: '',
+					: "",
 				e164Number: number
 					? this.phoneUtil.format(number, lpn.PhoneNumberFormat.E164)
-					: '',
+					: "",
 				countryCode: this.selectedCountry.iso2.toUpperCase(),
-				dialCode: '+' + this.selectedCountry.dialCode,
+				dialCode: "+" + this.selectedCountry.dialCode,
 			});
 		} else {
 			// Reason: avoid https://stackoverflow.com/a/54358133/1617590
@@ -316,15 +310,15 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 		const allowedChars = /[0-9\+\-\(\)\ ]/;
 		const allowedCtrlChars = /[axcv]/; // Allows copy-pasting
 		const allowedOtherKeys = [
-			'ArrowLeft',
-			'ArrowUp',
-			'ArrowRight',
-			'ArrowDown',
-			'Home',
-			'End',
-			'Insert',
-			'Delete',
-			'Backspace',
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowRight",
+			"ArrowDown",
+			"Home",
+			"End",
+			"Insert",
+			"Delete",
+			"Backspace",
 		];
 
 		if (
@@ -359,7 +353,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 	}
 
 	resolvePlaceholder(): string {
-		let placeholder = '';
+		let placeholder = "";
 		if (this.customPlaceholder) {
 			placeholder = this.customPlaceholder;
 		} else if (this.selectedCountry.placeHolder) {
@@ -395,9 +389,9 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 		if (this.separateDialCode && this.selectedCountry) {
 			const cntryCd = this.selectedCountry.dialCode;
 			this.separateDialCodeClass =
-				'separate-dial-code iti-sdc-' + (cntryCd.length + 1);
+				"separate-dial-code iti-sdc-" + (cntryCd.length + 1);
 		} else {
-			this.separateDialCodeClass = '';
+			this.separateDialCodeClass = "";
 		}
 	}
 
@@ -411,8 +405,8 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 			number,
 			lpn.PhoneNumberFormat[this.numberFormat]
 		);
-		if (phoneNumber.startsWith('+') && this.separateDialCode) {
-			phoneNumber = phoneNumber.substr(phoneNumber.indexOf(' ') + 1);
+		if (phoneNumber.startsWith("+") && this.separateDialCode) {
+			phoneNumber = phoneNumber.substr(phoneNumber.indexOf(" ") + 1);
 		}
 		return phoneNumber;
 	}
@@ -428,7 +422,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 		number: lpn.PhoneNumber
 	): string | undefined {
 		// Will use this to match area code from the first numbers
-		const rawNumber = number['values_']['2'].toString();
+		const rawNumber = number["values_"]["2"].toString();
 		// List of all countries with countryCode (can be more than one. e.x. US, CA, DO, PR all have +1 countryCode)
 		const countries = this.allCountries.filter(
 			(c) => c.dialCode === countryCode.toString()
@@ -486,7 +480,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 				areaCodes: (c[4] as string[]) || undefined,
 				htmlId: `iti-0__item-${c[1].toString()}`,
 				flagClass: `iti__${c[1].toString().toLocaleLowerCase()}`,
-				placeHolder: '',
+				placeHolder: "",
 			};
 
 			if (this.enablePlaceholder) {
diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts
index 35078cc5..5f4771e1 100644
--- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts
+++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts
@@ -1,24 +1,15 @@
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { NgbDropdownModule } from "@ng-bootstrap/ng-bootstrap";
 
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
-import { NativeElementInjectorDirective } from './directives/native-element-injector.directive';
-import { NgxIntlTelInputComponent } from './ngx-intl-tel-input.component';
-
-export const dropdownModuleForRoot: ModuleWithProviders<BsDropdownModule> = BsDropdownModule.forRoot();
+import { NativeElementInjectorDirective } from "./directives/native-element-injector.directive";
+import { NgxIntlTelInputComponent } from "./ngx-intl-tel-input.component";
 
 @NgModule({
 	declarations: [NgxIntlTelInputComponent, NativeElementInjectorDirective],
-	imports: [
-		CommonModule,
-		FormsModule,
-		ReactiveFormsModule,
-		dropdownModuleForRoot,
-  ],
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, NgbDropdownModule],
 	exports: [NgxIntlTelInputComponent, NativeElementInjectorDirective],
 })
-export class NgxIntlTelInputModule {
-
-}
+export class NgxIntlTelInputModule {}

From fb456967c203ea4b7a838b97a2474b2a654542db Mon Sep 17 00:00:00 2001
From: "M. Andrew Darts" <Mandrewdarts@gmail.com>
Date: Mon, 20 Sep 2021 09:31:57 -0500
Subject: [PATCH 02/25] setup github actions to publish to github packages

---
 .github/workflows/main.yml | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 .github/workflows/main.yml

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 00000000..9b8950c2
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,22 @@
+name: Publish Npm Package
+
+on:
+  push:
+    branches: 
+      - master
+      
+jobs:
+  publish-gpr:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://npm.pkg.github.com/
+          scope: '@travelnetsolutions'
+      - run: npm install
+      - run: npm package
+      - run: npm publish
+        env: 
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

From 0dd35c0c48d02dc9c962708c97ec8ede502b1025 Mon Sep 17 00:00:00 2001
From: "M. Andrew Darts" <Mandrewdarts@gmail.com>
Date: Mon, 20 Sep 2021 09:34:43 -0500
Subject: [PATCH 03/25] npm run package :/

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 9b8950c2..b6aaddd5 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -16,7 +16,7 @@ jobs:
           registry-url: https://npm.pkg.github.com/
           scope: '@travelnetsolutions'
       - run: npm install
-      - run: npm package
+      - run: npm run package
       - run: npm publish
         env: 
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

From f69d1624fa8a8fd0a512d78312851a50319631a2 Mon Sep 17 00:00:00 2001
From: "M. Andrew Darts" <Mandrewdarts@gmail.com>
Date: Mon, 20 Sep 2021 09:39:32 -0500
Subject: [PATCH 04/25] publish dist/ngx-intl-tel-input

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index b6aaddd5..7e0bdbb9 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -17,6 +17,6 @@ jobs:
           scope: '@travelnetsolutions'
       - run: npm install
       - run: npm run package
-      - run: npm publish
+      - run: cd dist/ngx-intl-tel-input && npm publish
         env: 
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

From 8ce13d40b0d20c19faa0a2d7f95be9912b3e23ab Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Mon, 20 Sep 2021 09:47:09 -0500
Subject: [PATCH 05/25] remove contrib file and update publish config

---
 .all-contributorsrc                      | 113 -------------------
 package.json                             | 134 +++++++++++------------
 projects/ngx-intl-tel-input/package.json |   3 +
 3 files changed, 70 insertions(+), 180 deletions(-)
 delete mode 100644 .all-contributorsrc

diff --git a/.all-contributorsrc b/.all-contributorsrc
deleted file mode 100644
index 7d90d53e..00000000
--- a/.all-contributorsrc
+++ /dev/null
@@ -1,113 +0,0 @@
-{
-  "projectName": "ngx-intl-tel-input",
-  "projectOwner": "webcat12345",
-  "repoType": "github",
-  "repoHost": "https://github.com",
-  "files": [
-    "README.md"
-  ],
-  "imageSize": 100,
-  "commit": false,
-  "contributors": [
-    {
-      "login": "webcat12345",
-      "name": "webcat_black",
-      "avatar_url": "https://avatars3.githubusercontent.com/u/19761422?v=4",
-      "profile": "https://github.com/webcat12345",
-      "contributions": [
-        "design",
-        "code",
-        "doc",
-        "ideas",
-        "question",
-        "infra",
-        "example",
-        "maintenance",
-        "review",
-        "test"
-      ]
-    },
-    {
-      "login": "pasevin",
-      "name": "Aleksandr Pasevin",
-      "avatar_url": "https://avatars2.githubusercontent.com/u/1058469?v=4",
-      "profile": "http://pasevin.com",
-      "contributions": [
-        "code",
-        "doc",
-        "bug",
-        "platform",
-        "plugin",
-        "question",
-        "infra",
-        "example",
-        "maintenance",
-        "review",
-        "test"
-      ]
-    },
-    {
-      "login": "Dviejopomata",
-      "name": "Dviejo",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/6862893?v=4",
-      "profile": "https://github.com/Dviejopomata",
-      "contributions": [
-        "code",
-        "bug",
-        "example",
-        "test",
-        "question",
-        "maintenance",
-        "review"
-      ]
-    },
-    {
-      "login": "Fosforito",
-      "name": "Jens Wagner",
-      "avatar_url": "https://avatars3.githubusercontent.com/u/5000255?v=4",
-      "profile": "https://www.fosforito.net",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "kinoroy",
-      "name": "Kino Roy",
-      "avatar_url": "https://avatars3.githubusercontent.com/u/22554212?v=4",
-      "profile": "http://kino.codes",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "NathanWalker",
-      "name": "Nathan Walker",
-      "avatar_url": "https://avatars2.githubusercontent.com/u/457187?v=4",
-      "profile": "https://twitter.com/wwwalkerrun",
-      "contributions": [
-        "maintenance",
-        "code"
-      ]
-    },
-    {
-      "login": "jiarongxu",
-      "name": "Jiarong Xu",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/502605?v=4",
-      "profile": "https://github.com/jiarongxu",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "crutchcorn",
-      "name": "Corbin Crutchley",
-      "avatar_url": "https://avatars.githubusercontent.com/u/9100169?v=4",
-      "profile": "https://crutchcorn.dev",
-      "contributions": [
-        "code"
-      ]
-    }
-  ],
-  "contributorsPerLine": 7,
-  "skipCi": true
-}
diff --git a/package.json b/package.json
index 6b722ee0..a1f541b1 100644
--- a/package.json
+++ b/package.json
@@ -1,69 +1,69 @@
 {
-  "name": "ngx-intl-tel-input-app",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "build_stats": "ng build --stats-json",
-    "analyze": "webpack-bundle-analyzer dist/ngx-intl-tel-input-app/stats.json",
-    "build_lib": "ng build ngx-intl-tel-input",
-    "copy-license": "cp ./LICENSE ./dist/ngx-intl-tel-input",
-    "copy-readme": "cp ./README.md ./dist/ngx-intl-tel-input",
-    "copy-files": "npm run copy-license && npm run copy-readme",
-    "npm_pack": "npm run copy-files && cd dist/ngx-intl-tel-input && npm pack",
-    "package": "npm run build_lib && npm run npm_pack",
-    "postinstall": "ngcc"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "~11.2.1",
-    "@angular/common": "~11.2.1",
-    "@angular/compiler": "~11.2.1",
-    "@angular/core": "~11.2.1",
-    "@angular/forms": "~11.2.1",
-    "@angular/platform-browser": "~11.2.1",
-    "@angular/platform-browser-dynamic": "~11.2.1",
-    "@angular/router": "~11.2.1",
-    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
-    "bootstrap": "^4.5.2",
-    "core-js": "^3.6.5",
-    "google-libphonenumber": "^3.2.3",
-    "intl-tel-input": "^17.0.3",
-    "jquery": "^3.5.0",
-    "popper.js": "^1.16.1",
-    "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.1",
-    "@angular/cli": "~11.2.1",
-    "@angular/compiler-cli": "~11.2.1",
-    "@angular/language-service": "~11.2.1",
-    "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "ajv": "^6.10.2",
-    "eslint": "^7.2.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.1",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "^2.0.6",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "~11.2.3",
-    "prettier": "^2.0.5",
-    "protractor": "^7.0.0",
-    "rollup": "^2.22.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "~4.1.5",
-    "webpack-bundle-analyzer": "^3.9.0"
-  }
+	"name": "ngx-intl-tel-input-app",
+	"version": "0.0.0",
+	"scripts": {
+		"ng": "ng",
+		"start": "ng serve",
+		"build": "ng build",
+		"test": "ng test",
+		"lint": "ng lint",
+		"e2e": "ng e2e",
+		"build_stats": "ng build --stats-json",
+		"analyze": "webpack-bundle-analyzer dist/ngx-intl-tel-input-app/stats.json",
+		"build_lib": "ng build ngx-intl-tel-input",
+		"copy-license": "cp ./LICENSE ./dist/ngx-intl-tel-input",
+		"copy-readme": "cp ./README.md ./dist/ngx-intl-tel-input",
+		"copy-files": "npm run copy-license && npm run copy-readme",
+		"npm_pack": "npm run copy-files && cd dist/ngx-intl-tel-input && npm pack",
+		"package": "npm run build_lib && npm run npm_pack",
+		"postinstall": "ngcc"
+	},
+	"private": true,
+	"dependencies": {
+		"@angular/animations": "~11.2.1",
+		"@angular/common": "~11.2.1",
+		"@angular/compiler": "~11.2.1",
+		"@angular/core": "~11.2.1",
+		"@angular/forms": "~11.2.1",
+		"@angular/platform-browser": "~11.2.1",
+		"@angular/platform-browser-dynamic": "~11.2.1",
+		"@angular/router": "~11.2.1",
+		"@ng-bootstrap/ng-bootstrap": "^10.0.0",
+		"bootstrap": "^4.5.2",
+		"core-js": "^3.6.5",
+		"google-libphonenumber": "^3.2.3",
+		"intl-tel-input": "^17.0.3",
+		"jquery": "^3.5.0",
+		"popper.js": "^1.16.1",
+		"rxjs": "~6.6.0",
+		"tslib": "^2.0.0",
+		"zone.js": "~0.10.2"
+	},
+	"devDependencies": {
+		"@angular-devkit/build-angular": "~0.1102.1",
+		"@angular/cli": "~11.2.1",
+		"@angular/compiler-cli": "~11.2.1",
+		"@angular/language-service": "~11.2.1",
+		"@types/jasmine": "~3.6.0",
+		"@types/jasminewd2": "~2.0.3",
+		"@types/node": "^12.11.1",
+		"ajv": "^6.10.2",
+		"eslint": "^7.2.0",
+		"jasmine-core": "~3.6.0",
+		"jasmine-spec-reporter": "~5.0.0",
+		"karma": "~6.1.1",
+		"karma-chrome-launcher": "~3.1.0",
+		"karma-coverage-istanbul-reporter": "^2.0.6",
+		"karma-jasmine": "~4.0.0",
+		"karma-jasmine-html-reporter": "^1.5.0",
+		"ng-packagr": "~11.2.3",
+		"prettier": "^2.0.5",
+		"protractor": "^7.0.0",
+		"rollup": "^2.22.0",
+		"ts-node": "~7.0.0",
+		"tslint": "~6.1.3",
+		"tslint-config-prettier": "^1.18.0",
+		"typescript": "~4.1.5",
+		"webpack-bundle-analyzer": "^3.9.0"
+	}
 }
diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index 85447778..47cba4d4 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -36,5 +36,8 @@
 	},
 	"devDependencies": {
 		"@types/google-libphonenumber": "^7.4.17"
+	},
+	"publishConfig": {
+		"registry": "https://npm.pkg.github.com/@travelnetsolutions"
 	}
 }

From db64b8b9d577c257062461189027171dba23b469 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Mon, 20 Sep 2021 10:07:47 -0500
Subject: [PATCH 06/25] update package name

---
 projects/ngx-intl-tel-input/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index 47cba4d4..ef5158fd 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "ngx-intl-tel-input",
+	"name": "@travelnetsolutions/ngx-intl-tel-input",
 	"version": "3.1.1",
 	"peerDependencies": {
 		"@angular/common": "8.x - 11.x",

From 30cbac22ac9547a7d21ab8e9eeaf509aaa227c54 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Tue, 12 Oct 2021 14:09:23 -0500
Subject: [PATCH 07/25] update readme with tns specific setup

---
 README.md | 65 ++++++++++---------------------------------------------
 1 file changed, 12 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 750e4728..9b2cefc4 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,7 @@
 # International Telephone Input for Angular (NgxIntlTelInput)
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)
-
-[![Build Status](https://travis-ci.org/webcat12345/ngx-intl-tel-input.svg?branch=master)](https://travis-ci.org/webcat12345/ngx-intl-tel-input) [![npm version](https://badge.fury.io/js/ngx-intl-tel-input.svg)](https://badge.fury.io/js/ngx-intl-tel-input) [![npm](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.com/package/ngx-intl-tel-input)
-
 An Angular package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
 
-![alt](readme-assets/ngx-intl-tel-input.jpg)
-
 **Compatibility:**
 
 Validation with [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)
@@ -17,11 +11,22 @@ Validation with [google-libphonenumber](https://github.com/ruimarinho/google-lib
 | 3.x.x              | 9.x.x - 11.x.x | 6.0.0         |
 | 2.x.x              | 8.x.x - 9.1.x  | 5.6.x         |
 
+## TNS - Setup Github Token for Github Packages Auth
+
+1. Go to Github Settings: https://github.com/settings/tokens
+2. Generate a new personal access token and make sure the `package:read` scope is set.
+3. Make sure to copy the token as you will not be able to copy it again, it is only shown once. Then click the “Enable SSO"
+4. Login to to you vagrant box and update the file `~/.bashrc` with the following line `export GITHUB_TOKEN=<your token>`
+5. Exit out of the vagrant box and re-ssh back into the vagrant box (this is needed for the .bashrc to actually take).
+6. Run command inside your vagrant box `cd /var/www/track/public/ngui-src/`
+7. Run command npm install and verify no errors occur.
+   1. If you are on Linux you may get an `EACCESS` error while installing puppeteer. If you get this error run `npm install puppeteer --unsafe-perm=true`. This should resolve the error.
+
 ## Installation
 
 ### Install Dependencies
 
-`$ npm install intl-tel-input@17.0.3 --save`
+`$ npm install @travelnetsolutions/ngx-intl-tel-input --save`
 
 `$ npm install google-libphonenumber --save`
 
@@ -128,55 +133,9 @@ Following formats are supported
 - INTERNATIONAL // Produces "+41 44 668 18 00"
 - E164 // Produces "+41446681800"
 
-## Library Contributions
-
-- Fork repo.
-- Update `./projects/ngx-intl-tel-input`
-- Build / test library.
-- Update `./src/app` with new functionality.
-- Update README.md
-- Pull request.
-
 ### Helpful commands
 
 - Build lib: `$ npm run build_lib`
 - Copy license and readme files: `$ npm run copy-files`
 - Create package: `$ npm run npm_pack`
 - Build lib and create package: `$ npm run package`
-
-### Use locally
-
-After building and creating package, you can use it locally too.
-
-In your project run:
-
-`$ npm install --save {{path to your local '*.tgz' package file}}`
-
-## Contributors
-
-Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://github.com/webcat12345"><img src="https://avatars3.githubusercontent.com/u/19761422?v=4?s=100" width="100px;" alt=""/><br /><sub><b>webcat_black</b></sub></a><br /><a href="#design-webcat12345" title="Design">🎨</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=webcat12345" title="Code">💻</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=webcat12345" title="Documentation">📖</a> <a href="#ideas-webcat12345" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-webcat12345" title="Answering Questions">💬</a> <a href="#infra-webcat12345" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#example-webcat12345" title="Examples">💡</a> <a href="#maintenance-webcat12345" title="Maintenance">🚧</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/pulls?q=is%3Apr+reviewed-by%3Awebcat12345" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=webcat12345" title="Tests">⚠️</a></td>
-    <td align="center"><a href="http://pasevin.com"><img src="https://avatars2.githubusercontent.com/u/1058469?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aleksandr Pasevin</b></sub></a><br /><a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=pasevin" title="Code">💻</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=pasevin" title="Documentation">📖</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/issues?q=author%3Apasevin" title="Bug reports">🐛</a> <a href="#platform-pasevin" title="Packaging/porting to new platform">📦</a> <a href="#plugin-pasevin" title="Plugin/utility libraries">🔌</a> <a href="#question-pasevin" title="Answering Questions">💬</a> <a href="#infra-pasevin" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#example-pasevin" title="Examples">💡</a> <a href="#maintenance-pasevin" title="Maintenance">🚧</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/pulls?q=is%3Apr+reviewed-by%3Apasevin" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=pasevin" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://github.com/Dviejopomata"><img src="https://avatars0.githubusercontent.com/u/6862893?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dviejo</b></sub></a><br /><a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=Dviejopomata" title="Code">💻</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/issues?q=author%3ADviejopomata" title="Bug reports">🐛</a> <a href="#example-Dviejopomata" title="Examples">💡</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=Dviejopomata" title="Tests">⚠️</a> <a href="#question-Dviejopomata" title="Answering Questions">💬</a> <a href="#maintenance-Dviejopomata" title="Maintenance">🚧</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/pulls?q=is%3Apr+reviewed-by%3ADviejopomata" title="Reviewed Pull Requests">👀</a></td>
-    <td align="center"><a href="https://www.fosforito.net"><img src="https://avatars3.githubusercontent.com/u/5000255?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jens Wagner</b></sub></a><br /><a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=Fosforito" title="Code">💻</a></td>
-    <td align="center"><a href="http://kino.codes"><img src="https://avatars3.githubusercontent.com/u/22554212?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kino Roy</b></sub></a><br /><a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=kinoroy" title="Code">💻</a></td>
-    <td align="center"><a href="https://twitter.com/wwwalkerrun"><img src="https://avatars2.githubusercontent.com/u/457187?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nathan Walker</b></sub></a><br /><a href="#maintenance-NathanWalker" title="Maintenance">🚧</a> <a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=NathanWalker" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/jiarongxu"><img src="https://avatars0.githubusercontent.com/u/502605?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jiarong Xu</b></sub></a><br /><a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=jiarongxu" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://crutchcorn.dev"><img src="https://avatars.githubusercontent.com/u/9100169?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Corbin Crutchley</b></sub></a><br /><a href="https://github.com/webcat12345/ngx-intl-tel-input/commits?author=crutchcorn" title="Code">💻</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

From d19ca366cff4bae4bf56cc121ee5525b8a671286 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Thu, 4 Nov 2021 13:19:31 -0500
Subject: [PATCH 08/25] ng 12 upgrade

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a1f541b1..761ab44b 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
 	"devDependencies": {
 		"@angular-devkit/build-angular": "~0.1102.1",
 		"@angular/cli": "~11.2.1",
-		"@angular/compiler-cli": "~11.2.1",
+		"@angular/compiler-cli": "^12.2.13",
 		"@angular/language-service": "~11.2.1",
 		"@types/jasmine": "~3.6.0",
 		"@types/jasminewd2": "~2.0.3",
@@ -56,14 +56,14 @@
 		"karma-coverage-istanbul-reporter": "^2.0.6",
 		"karma-jasmine": "~4.0.0",
 		"karma-jasmine-html-reporter": "^1.5.0",
-		"ng-packagr": "~11.2.3",
+		"ng-packagr": "^12.2.5",
 		"prettier": "^2.0.5",
 		"protractor": "^7.0.0",
 		"rollup": "^2.22.0",
 		"ts-node": "~7.0.0",
 		"tslint": "~6.1.3",
 		"tslint-config-prettier": "^1.18.0",
-		"typescript": "~4.1.5",
+		"typescript": "^4.4.4",
 		"webpack-bundle-analyzer": "^3.9.0"
 	}
 }

From ccd23ec40687e90b8bfac6a84133a625ca945caa Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Fri, 7 Oct 2022 16:03:37 -0500
Subject: [PATCH 09/25] closes on country select

---
 .gitignore                                    |  2 +
 package.json                                  | 24 ++++----
 .../src/lib/ngx-intl-tel-input.component.css  |  5 ++
 .../src/lib/ngx-intl-tel-input.component.html | 61 ++++---------------
 .../src/lib/ngx-intl-tel-input.component.ts   |  1 +
 5 files changed, 33 insertions(+), 60 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6ca7ef45..3b0d9166 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,5 @@ testem.log
 .DS_Store
 Thumbs.db
 /.vscode
+
+.angular
diff --git a/package.json b/package.json
index 761ab44b..1c5846a4 100644
--- a/package.json
+++ b/package.json
@@ -20,14 +20,14 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "~11.2.1",
-		"@angular/common": "~11.2.1",
-		"@angular/compiler": "~11.2.1",
-		"@angular/core": "~11.2.1",
-		"@angular/forms": "~11.2.1",
-		"@angular/platform-browser": "~11.2.1",
-		"@angular/platform-browser-dynamic": "~11.2.1",
-		"@angular/router": "~11.2.1",
+		"@angular/animations": "^13.0.0",
+		"@angular/common": "^13.0.0",
+		"@angular/compiler": "^13.0.0",
+		"@angular/core": "^13.0.0",
+		"@angular/forms": "^13.0.0",
+		"@angular/platform-browser": "^13.0.0",
+		"@angular/platform-browser-dynamic": "^13.0.0",
+		"@angular/router": "^13.0.0",
 		"@ng-bootstrap/ng-bootstrap": "^10.0.0",
 		"bootstrap": "^4.5.2",
 		"core-js": "^3.6.5",
@@ -40,10 +40,10 @@
 		"zone.js": "~0.10.2"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "~0.1102.1",
-		"@angular/cli": "~11.2.1",
-		"@angular/compiler-cli": "^12.2.13",
-		"@angular/language-service": "~11.2.1",
+		"@angular-devkit/build-angular": "^13.0.1",
+		"@angular/cli": "^13.0.1",
+		"@angular/compiler-cli": "^13.0.0",
+		"@angular/language-service": "^13.0.0",
 		"@types/jasmine": "~3.6.0",
 		"@types/jasminewd2": "~2.0.3",
 		"@types/node": "^12.11.1",
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
index 4421b9f2..900e468d 100644
--- 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
@@ -67,3 +67,8 @@ li.iti__country:hover {
 .iti.separate-dial-code.iti--allow-dropdown.iti-sdc-4 input {
 	padding-left: 98px;
 }
+
+.iti__country.iti__preferred.dropdown-item,
+.iti__country.iti__standard.dropdown-item {
+	padding: 5px 10px;
+}
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
index 69c2299c..dcafa801 100644
--- 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,9 +1,5 @@
 <div class="iti iti--allow-dropdown" [ngClass]="separateDialCodeClass">
-	<div
-		class="iti__flag-container"
-		ngbDropdown
-		[ngClass]="{ disabled: disabled }"
-	>
+	<div class="iti__flag-container" ngbDropdown [ngClass]="{ disabled: disabled }">
 		<div class="iti__selected-flag dropdown-toggle" ngbDropdownToggle>
 			<div class="iti__flag" [ngClass]="selectedCountry?.flagClass"></div>
 			<div *ngIf="separateDialCode" class="selected-dial-code">
@@ -12,42 +8,22 @@
 			<div class="iti__arrow"></div>
 		</div>
 		<div ngbDropdownMenu class="dropdown-menu country-dropdown">
-			<div
-				class="search-container"
-				*ngIf="searchCountryFlag && searchCountryField"
-			>
-				<input
-					id="country-search-box"
-					[(ngModel)]="countrySearchText"
-					(keyup)="searchCountry()"
-					(click)="$event.stopPropagation()"
-					[placeholder]="searchCountryPlaceholder"
-					autofocus
-				/>
+			<div class="search-container" *ngIf="searchCountryFlag && searchCountryField">
+				<input id="country-search-box" [(ngModel)]="countrySearchText" (keyup)="searchCountry()"
+					(click)="$event.stopPropagation()" [placeholder]="searchCountryPlaceholder" autofocus />
 			</div>
 			<ul class="iti__country-list" #countryList>
-				<li
-					class="iti__country iti__preferred"
-					*ngFor="let country of preferredCountriesInDropDown"
-					(click)="onCountrySelect(country, focusable)"
-					[id]="country.htmlId + '-preferred'"
-				>
+				<li class="iti__country iti__preferred" ngbDropdownItem *ngFor="let country of preferredCountriesInDropDown"
+					(click)="onCountrySelect(country, focusable)" [id]="country.htmlId + '-preferred'">
 					<div class="iti__flag-box">
 						<div class="iti__flag" [ngClass]="country.flagClass"></div>
 					</div>
 					<span class="iti__country-name">{{ country.name }}</span>
 					<span class="iti__dial-code">+{{ country.dialCode }}</span>
 				</li>
-				<li
-					class="iti__divider"
-					*ngIf="preferredCountriesInDropDown?.length"
-				></li>
-				<li
-					class="iti__country iti__standard"
-					*ngFor="let country of allCountries"
-					(click)="onCountrySelect(country, focusable)"
-					[id]="country.htmlId"
-				>
+				<li class="iti__divider" *ngIf="preferredCountriesInDropDown?.length"></li>
+				<li ngbDropdownItem class="iti__country iti__standard" *ngFor="let country of allCountries"
+					(click)="onCountrySelect(country, focusable)" [id]="country.htmlId">
 					<div class="iti__flag-box">
 						<div class="iti__flag" [ngClass]="country.flagClass"></div>
 					</div>
@@ -57,19 +33,8 @@
 			</ul>
 		</div>
 	</div>
-	<input
-		type="tel"
-		[id]="inputId"
-		autocomplete="off"
-		[ngClass]="cssClass"
-		(blur)="onTouched()"
-		(keypress)="onInputKeyPress($event)"
-		[(ngModel)]="phoneNumber"
-		(ngModelChange)="onPhoneNumberChange()"
-		[disabled]="disabled"
-		[placeholder]="resolvePlaceholder()"
-		[attr.maxLength]="maxLength"
-		[attr.validation]="phoneValidation"
-		#focusable
-	/>
+	<input type="tel" [id]="inputId" autocomplete="off" [ngClass]="cssClass" (blur)="onTouched()"
+		(keypress)="onInputKeyPress($event)" [(ngModel)]="phoneNumber" (ngModelChange)="onPhoneNumberChange()"
+		[disabled]="disabled" [placeholder]="resolvePlaceholder()" [attr.maxLength]="maxLength"
+		[attr.validation]="phoneValidation" #focusable />
 </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
index a717a83a..6eb32879 100644
--- 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
@@ -205,6 +205,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 
 	public onPhoneNumberChange(): void {
 		let countryCode: string | undefined;
+		console.log(this.selectedCountry);
 		// Handle the case where the user sets the value programatically based on a persisted ChangeData obj.
 		if (this.phoneNumber && typeof this.phoneNumber === "object") {
 			const numberObj: ChangeData = this.phoneNumber;

From 1ca8b44906ae5cb94ea7b430d17bead0927b1d19 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Fri, 7 Oct 2022 16:08:46 -0500
Subject: [PATCH 10/25] rm logs

---
 .../ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts   | 1 -
 1 file changed, 1 deletion(-)

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
index 6eb32879..a717a83a 100644
--- 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
@@ -205,7 +205,6 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 
 	public onPhoneNumberChange(): void {
 		let countryCode: string | undefined;
-		console.log(this.selectedCountry);
 		// Handle the case where the user sets the value programatically based on a persisted ChangeData obj.
 		if (this.phoneNumber && typeof this.phoneNumber === "object") {
 			const numberObj: ChangeData = this.phoneNumber;

From 39b8d15352a78146bd3f8f75e6e4800b5d6d90ff Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Fri, 7 Oct 2022 16:24:52 -0500
Subject: [PATCH 11/25] up the version with the fix

---
 projects/ngx-intl-tel-input/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index ef5158fd..34d45f43 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@travelnetsolutions/ngx-intl-tel-input",
-	"version": "3.1.1",
+	"version": "3.1.2",
 	"peerDependencies": {
 		"@angular/common": "8.x - 11.x",
 		"@angular/core": "8.x - 11.x",

From 29a897b441465282d01169b369f66a5f43806273 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 19 Oct 2022 13:11:45 -0500
Subject: [PATCH 12/25] update package json

---
 package.json                             | 135 ++++++++++++++---------
 projects/ngx-intl-tel-input/package.json |   6 +-
 2 files changed, 87 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index 1c5846a4..fd23a6e1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "ngx-intl-tel-input-app",
+	"name": "ngui",
 	"version": "0.0.0",
 	"scripts": {
 		"ng": "ng",
@@ -8,62 +8,95 @@
 		"test": "ng test",
 		"lint": "ng lint",
 		"e2e": "ng e2e",
-		"build_stats": "ng build --stats-json",
-		"analyze": "webpack-bundle-analyzer dist/ngx-intl-tel-input-app/stats.json",
-		"build_lib": "ng build ngx-intl-tel-input",
-		"copy-license": "cp ./LICENSE ./dist/ngx-intl-tel-input",
-		"copy-readme": "cp ./README.md ./dist/ngx-intl-tel-input",
-		"copy-files": "npm run copy-license && npm run copy-readme",
-		"npm_pack": "npm run copy-files && cd dist/ngx-intl-tel-input && npm pack",
-		"package": "npm run build_lib && npm run npm_pack",
-		"postinstall": "ngcc"
+		"report-coverage": "codecov",
+		"nghm": "node --max_old_space_size=8096 ./node_modules/@angular/cli/bin/ng",
+		"production": "npm install && npm run nghm -- build --configuration production --progress=false --vendor-chunk && npm prune --production"
+	},
+	"engines": {
+		"node": ">=12",
+		"npm": "=6"
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "^13.0.0",
-		"@angular/common": "^13.0.0",
-		"@angular/compiler": "^13.0.0",
-		"@angular/core": "^13.0.0",
-		"@angular/forms": "^13.0.0",
-		"@angular/platform-browser": "^13.0.0",
-		"@angular/platform-browser-dynamic": "^13.0.0",
-		"@angular/router": "^13.0.0",
+		"@angular/animations": "^12.2.12",
+		"@angular/cdk": "^12.2.12",
+		"@angular/common": "^12.2.12",
+		"@angular/compiler": "^12.2.12",
+		"@angular/core": "^12.2.12",
+		"@angular/forms": "^12.2.12",
+		"@angular/localize": "^12.2.12",
+		"@angular/material": "^12.2.12",
+		"@angular/platform-browser": "^12.2.12",
+		"@angular/platform-browser-dynamic": "^12.2.12",
+		"@angular/router": "^12.2.12",
+		"@datorama/akita": "^6.2.4",
+		"@fortawesome/fontawesome-pro": "^6.2.0",
 		"@ng-bootstrap/ng-bootstrap": "^10.0.0",
-		"bootstrap": "^4.5.2",
-		"core-js": "^3.6.5",
-		"google-libphonenumber": "^3.2.3",
-		"intl-tel-input": "^17.0.3",
-		"jquery": "^3.5.0",
-		"popper.js": "^1.16.1",
-		"rxjs": "~6.6.0",
-		"tslib": "^2.0.0",
-		"zone.js": "~0.10.2"
+		"@ng-select/ng-select": "^7.4.0",
+		"@sentry/browser": "^7.15.0",
+		"@swimlane/ngx-datatable": "^20.0.0",
+		"@tinymce/tinymce-angular": "^4.2.4",
+		"@travelnetsolutions/ngx-intl-tel-input": "^3.1.1",
+		"akita-filters-plugin": "^6.0.1",
+		"bootstrap": "^3.4.1",
+		"bootstrap4": "npm:bootstrap@^4.3.1",
+		"card": "^2.5.4",
+		"google-libphonenumber": "^3.2.31",
+		"highcharts": "^10.2.1",
+		"highcharts-angular": "^2.10.0",
+		"intl-tel-input": "^17.0.19",
+		"jspreadsheet-ce": "^4.11.1",
+		"jsuites": "^4.16.9",
+		"jwt-decode": "^3.1.2",
+		"lodash-es": "^4.17.21",
+		"luxon": "^3.0.4",
+		"masonry-layout": "^4.2.2",
+		"moment": "^2.29.4",
+		"ngx-card": "^0.2.4",
+		"ngx-dropzone-wrapper": "^10.0.1",
+		"ngx-infinite-scroll": "^10.0.1",
+		"ngx-masonry": "^12.0.0",
+		"ngx-toastr": "^14.1.4",
+		"ngx-webstorage-service": "^4.1.0",
+		"nl2br-pipe": "^1.2.3",
+		"rxjs": "^6.6.7",
+		"tinymce": "^6.2.0",
+		"tslib": "^2.4.0",
+		"xlsx": "^0.18.5",
+		"zone.js": "~0.11.8"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "^13.0.1",
-		"@angular/cli": "^13.0.1",
-		"@angular/compiler-cli": "^13.0.0",
-		"@angular/language-service": "^13.0.0",
-		"@types/jasmine": "~3.6.0",
-		"@types/jasminewd2": "~2.0.3",
-		"@types/node": "^12.11.1",
-		"ajv": "^6.10.2",
-		"eslint": "^7.2.0",
-		"jasmine-core": "~3.6.0",
-		"jasmine-spec-reporter": "~5.0.0",
-		"karma": "~6.1.1",
+		"@angular-devkit/build-angular": "^12.2.12",
+		"@angular-eslint/builder": "12.6.1",
+		"@angular-eslint/eslint-plugin": "12.6.1",
+		"@angular-eslint/eslint-plugin-template": "12.6.1",
+		"@angular-eslint/schematics": "12.6.1",
+		"@angular-eslint/template-parser": "12.6.1",
+		"@angular/cli": "^12.2.12",
+		"@angular/compiler-cli": "^12.2.12",
+		"@angular/language-service": "^12.2.12",
+		"@datorama/akita-ngdevtools": "^6.0.1",
+		"@types/google-libphonenumber": "^7.4.23",
+		"@types/jasmine": "^4.3.0",
+		"@types/jasminewd2": "~2.0.10",
+		"@types/luxon": "^3.0.1",
+		"@types/node": "^18.8.0",
+		"@typescript-eslint/eslint-plugin": "4.33.0",
+		"@typescript-eslint/parser": "4.33.0",
+		"eslint": "^7.32.0",
+		"jasmine-core": "~4.4.0",
+		"jasmine-spec-reporter": "~7.0.0",
+		"karma": "~6.4.1",
 		"karma-chrome-launcher": "~3.1.0",
-		"karma-coverage-istanbul-reporter": "^2.0.6",
-		"karma-jasmine": "~4.0.0",
-		"karma-jasmine-html-reporter": "^1.5.0",
-		"ng-packagr": "^12.2.5",
-		"prettier": "^2.0.5",
-		"protractor": "^7.0.0",
-		"rollup": "^2.22.0",
-		"ts-node": "~7.0.0",
-		"tslint": "~6.1.3",
-		"tslint-config-prettier": "^1.18.0",
-		"typescript": "^4.4.4",
-		"webpack-bundle-analyzer": "^3.9.0"
+		"karma-coverage-istanbul-reporter": "~3.0.2",
+		"karma-jasmine": "~5.1.0",
+		"karma-jasmine-html-reporter": "^2.0.0",
+		"postcss": "^8.4.18",
+		"protractor": "~7.0.0",
+		"puppeteer": "^13.5.2",
+		"stylelint": "^14.14.0",
+		"stylelint-config-standard-scss": "^5.0.0",
+		"ts-node": "^10.9.1",
+		"typescript": "^4.2.4"
 	}
 }
diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index 34d45f43..ce72d27a 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -2,9 +2,9 @@
 	"name": "@travelnetsolutions/ngx-intl-tel-input",
 	"version": "3.1.2",
 	"peerDependencies": {
-		"@angular/common": "8.x - 11.x",
-		"@angular/core": "8.x - 11.x",
-		"@angular/forms": "8.x - 11.x",
+		"@angular/common": "8.x - 12.x",
+		"@angular/core": "8.x - 12.x",
+		"@angular/forms": "8.x - 12.x",
 		"google-libphonenumber": "^3.2.3",
 		"intl-tel-input": "^17.0.3",
 		"@ng-bootstrap/ng-bootstrap": "^9.1.3"

From b86098bff097bcfd445ec6bacf4b297af9e98cbd Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 19 Oct 2022 13:13:00 -0500
Subject: [PATCH 13/25] revert

---
 package.json | 111 ++++++++++++++++++---------------------------------
 1 file changed, 39 insertions(+), 72 deletions(-)

diff --git a/package.json b/package.json
index fd23a6e1..60e4d38a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "ngui",
+	"name": "ngx-intl-tel-input-app",
 	"version": "0.0.0",
 	"scripts": {
 		"ng": "ng",
@@ -8,95 +8,62 @@
 		"test": "ng test",
 		"lint": "ng lint",
 		"e2e": "ng e2e",
-		"report-coverage": "codecov",
-		"nghm": "node --max_old_space_size=8096 ./node_modules/@angular/cli/bin/ng",
-		"production": "npm install && npm run nghm -- build --configuration production --progress=false --vendor-chunk && npm prune --production"
-	},
-	"engines": {
-		"node": ">=12",
-		"npm": "=6"
+		"build_stats": "ng build --stats-json",
+		"analyze": "webpack-bundle-analyzer dist/ngx-intl-tel-input-app/stats.json",
+		"build_lib": "ng build ngx-intl-tel-input",
+		"copy-license": "cp ./LICENSE ./dist/ngx-intl-tel-input",
+		"copy-readme": "cp ./README.md ./dist/ngx-intl-tel-input",
+		"copy-files": "npm run copy-license && npm run copy-readme",
+		"npm_pack": "npm run copy-files && cd dist/ngx-intl-tel-input && npm pack",
+		"package": "npm run build_lib && npm run npm_pack",
+		"postinstall": "ngcc"
 	},
 	"private": true,
 	"dependencies": {
 		"@angular/animations": "^12.2.12",
-		"@angular/cdk": "^12.2.12",
 		"@angular/common": "^12.2.12",
 		"@angular/compiler": "^12.2.12",
 		"@angular/core": "^12.2.12",
 		"@angular/forms": "^12.2.12",
-		"@angular/localize": "^12.2.12",
-		"@angular/material": "^12.2.12",
 		"@angular/platform-browser": "^12.2.12",
 		"@angular/platform-browser-dynamic": "^12.2.12",
 		"@angular/router": "^12.2.12",
-		"@datorama/akita": "^6.2.4",
-		"@fortawesome/fontawesome-pro": "^6.2.0",
 		"@ng-bootstrap/ng-bootstrap": "^10.0.0",
-		"@ng-select/ng-select": "^7.4.0",
-		"@sentry/browser": "^7.15.0",
-		"@swimlane/ngx-datatable": "^20.0.0",
-		"@tinymce/tinymce-angular": "^4.2.4",
-		"@travelnetsolutions/ngx-intl-tel-input": "^3.1.1",
-		"akita-filters-plugin": "^6.0.1",
-		"bootstrap": "^3.4.1",
-		"bootstrap4": "npm:bootstrap@^4.3.1",
-		"card": "^2.5.4",
-		"google-libphonenumber": "^3.2.31",
-		"highcharts": "^10.2.1",
-		"highcharts-angular": "^2.10.0",
-		"intl-tel-input": "^17.0.19",
-		"jspreadsheet-ce": "^4.11.1",
-		"jsuites": "^4.16.9",
-		"jwt-decode": "^3.1.2",
-		"lodash-es": "^4.17.21",
-		"luxon": "^3.0.4",
-		"masonry-layout": "^4.2.2",
-		"moment": "^2.29.4",
-		"ngx-card": "^0.2.4",
-		"ngx-dropzone-wrapper": "^10.0.1",
-		"ngx-infinite-scroll": "^10.0.1",
-		"ngx-masonry": "^12.0.0",
-		"ngx-toastr": "^14.1.4",
-		"ngx-webstorage-service": "^4.1.0",
-		"nl2br-pipe": "^1.2.3",
-		"rxjs": "^6.6.7",
-		"tinymce": "^6.2.0",
-		"tslib": "^2.4.0",
-		"xlsx": "^0.18.5",
-		"zone.js": "~0.11.8"
+		"bootstrap": "^4.5.2",
+		"core-js": "^3.6.5",
+		"google-libphonenumber": "^3.2.3",
+		"intl-tel-input": "^17.0.3",
+		"jquery": "^3.5.0",
+		"popper.js": "^1.16.1",
+		"rxjs": "~6.6.0",
+		"tslib": "^2.0.0",
+		"zone.js": "~0.10.2"
 	},
 	"devDependencies": {
 		"@angular-devkit/build-angular": "^12.2.12",
-		"@angular-eslint/builder": "12.6.1",
-		"@angular-eslint/eslint-plugin": "12.6.1",
-		"@angular-eslint/eslint-plugin-template": "12.6.1",
-		"@angular-eslint/schematics": "12.6.1",
-		"@angular-eslint/template-parser": "12.6.1",
 		"@angular/cli": "^12.2.12",
 		"@angular/compiler-cli": "^12.2.12",
 		"@angular/language-service": "^12.2.12",
-		"@datorama/akita-ngdevtools": "^6.0.1",
-		"@types/google-libphonenumber": "^7.4.23",
-		"@types/jasmine": "^4.3.0",
-		"@types/jasminewd2": "~2.0.10",
-		"@types/luxon": "^3.0.1",
-		"@types/node": "^18.8.0",
-		"@typescript-eslint/eslint-plugin": "4.33.0",
-		"@typescript-eslint/parser": "4.33.0",
-		"eslint": "^7.32.0",
-		"jasmine-core": "~4.4.0",
-		"jasmine-spec-reporter": "~7.0.0",
-		"karma": "~6.4.1",
+		"@types/jasmine": "~3.6.0",
+		"@types/jasminewd2": "~2.0.3",
+		"@types/node": "^12.11.1",
+		"ajv": "^6.10.2",
+		"eslint": "^7.2.0",
+		"jasmine-core": "~3.6.0",
+		"jasmine-spec-reporter": "~5.0.0",
+		"karma": "~6.1.1",
 		"karma-chrome-launcher": "~3.1.0",
-		"karma-coverage-istanbul-reporter": "~3.0.2",
-		"karma-jasmine": "~5.1.0",
-		"karma-jasmine-html-reporter": "^2.0.0",
-		"postcss": "^8.4.18",
-		"protractor": "~7.0.0",
-		"puppeteer": "^13.5.2",
-		"stylelint": "^14.14.0",
-		"stylelint-config-standard-scss": "^5.0.0",
-		"ts-node": "^10.9.1",
-		"typescript": "^4.2.4"
+		"karma-coverage-istanbul-reporter": "^2.0.6",
+		"karma-jasmine": "~4.0.0",
+		"karma-jasmine-html-reporter": "^1.5.0",
+		"ng-packagr": "^12.2.5",
+		"prettier": "^2.0.5",
+		"protractor": "^7.0.0",
+		"rollup": "^2.22.0",
+		"ts-node": "~7.0.0",
+		"tslint": "~6.1.3",
+		"tslint-config-prettier": "^1.18.0",
+		"typescript": "^4.4.4",
+		"webpack-bundle-analyzer": "^3.9.0"
 	}
 }

From 4b4316f85189205d5c60b486fba730d9b30438de Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 19 Oct 2022 13:19:17 -0500
Subject: [PATCH 14/25] formatting

---
 .../src/lib/ngx-intl-tel-input.component.html | 72 ++++++++++++++-----
 1 file changed, 54 insertions(+), 18 deletions(-)

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
index dcafa801..ce8e3241 100644
--- 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,5 +1,9 @@
 <div class="iti iti--allow-dropdown" [ngClass]="separateDialCodeClass">
-	<div class="iti__flag-container" ngbDropdown [ngClass]="{ disabled: disabled }">
+	<div 
+		class="iti__flag-container" 
+		ngbDropdown 
+		[ngClass]="{ disabled: disabled }"
+	>
 		<div class="iti__selected-flag dropdown-toggle" ngbDropdownToggle>
 			<div class="iti__flag" [ngClass]="selectedCountry?.flagClass"></div>
 			<div *ngIf="separateDialCode" class="selected-dial-code">
@@ -8,33 +12,65 @@
 			<div class="iti__arrow"></div>
 		</div>
 		<div ngbDropdownMenu class="dropdown-menu country-dropdown">
-			<div class="search-container" *ngIf="searchCountryFlag && searchCountryField">
-				<input id="country-search-box" [(ngModel)]="countrySearchText" (keyup)="searchCountry()"
-					(click)="$event.stopPropagation()" [placeholder]="searchCountryPlaceholder" autofocus />
+			<div 
+				class="search-container" 
+				*ngIf="searchCountryFlag && searchCountryField"
+			>
+				<input 
+					id="country-search-box" 
+					[(ngModel)]="countrySearchText" 
+					(keyup)="searchCountry()"
+					(click)="$event.stopPropagation()" 
+					[placeholder]="searchCountryPlaceholder" 
+					autofocus 
+				/>
 			</div>
 			<ul class="iti__country-list" #countryList>
-				<li class="iti__country iti__preferred" ngbDropdownItem *ngFor="let country of preferredCountriesInDropDown"
-					(click)="onCountrySelect(country, focusable)" [id]="country.htmlId + '-preferred'">
+				<li 
+					class="iti__country iti__preferred" 
+					ngbDropdownItem 
+					*ngFor="let country of preferredCountriesInDropDown"
+					(click)="onCountrySelect(country, focusable)" 
+					[id]="country.htmlId + '-preferred'"
+				>
 					<div class="iti__flag-box">
 						<div class="iti__flag" [ngClass]="country.flagClass"></div>
 					</div>
 					<span class="iti__country-name">{{ country.name }}</span>
 					<span class="iti__dial-code">+{{ country.dialCode }}</span>
 				</li>
-				<li class="iti__divider" *ngIf="preferredCountriesInDropDown?.length"></li>
-				<li ngbDropdownItem class="iti__country iti__standard" *ngFor="let country of allCountries"
-					(click)="onCountrySelect(country, focusable)" [id]="country.htmlId">
-					<div class="iti__flag-box">
-						<div class="iti__flag" [ngClass]="country.flagClass"></div>
-					</div>
-					<span class="iti__country-name">{{ country.name }}</span>
-					<span class="iti__dial-code">+{{ country.dialCode }}</span>
+				<li 
+					class="iti__divider" 
+					*ngIf="preferredCountriesInDropDown?.length"
+				></li>
+				<li 
+					ngbDropdownItem 
+					class="iti__country iti__standard" 
+					*ngFor="let country of allCountries"
+					(click)="onCountrySelect(country, focusable)" 
+					[id]="country.htmlId"
+					>
+						<div class="iti__flag-box">
+							<div class="iti__flag" [ngClass]="country.flagClass"></div>
+						</div>
+						<span class="iti__country-name">{{ country.name }}</span>
+						<span class="iti__dial-code">+{{ country.dialCode }}</span>
 				</li>
 			</ul>
 		</div>
 	</div>
-	<input type="tel" [id]="inputId" autocomplete="off" [ngClass]="cssClass" (blur)="onTouched()"
-		(keypress)="onInputKeyPress($event)" [(ngModel)]="phoneNumber" (ngModelChange)="onPhoneNumberChange()"
-		[disabled]="disabled" [placeholder]="resolvePlaceholder()" [attr.maxLength]="maxLength"
-		[attr.validation]="phoneValidation" #focusable />
+	<input 
+		type="tel" 
+		[id]="inputId" 
+		autocomplete="off" 
+		[ngClass]="cssClass" 
+		(blur)="onTouched()"
+		(keypress)="onInputKeyPress($event)" 
+		[(ngModel)]="phoneNumber" 
+		(ngModelChange)="onPhoneNumberChange()"
+		[disabled]="disabled" 
+		[placeholder]="resolvePlaceholder()" 
+		[attr.maxLength]="maxLength"
+		[attr.validation]="phoneValidation" 
+		#focusable />
 </div>

From 338e005ba2de9dbb6889cb5d93b33ae15916b557 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 19 Oct 2022 13:21:16 -0500
Subject: [PATCH 15/25] more formatting

---
 .../src/lib/ngx-intl-tel-input.component.html | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

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
index ce8e3241..1f9007b4 100644
--- 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,7 +1,7 @@
 <div class="iti iti--allow-dropdown" [ngClass]="separateDialCodeClass">
 	<div 
-		class="iti__flag-container" 
-		ngbDropdown 
+		class="iti__flag-container"
+		ngbDropdown
 		[ngClass]="{ disabled: disabled }"
 	>
 		<div class="iti__selected-flag dropdown-toggle" ngbDropdownToggle>
@@ -12,25 +12,25 @@
 			<div class="iti__arrow"></div>
 		</div>
 		<div ngbDropdownMenu class="dropdown-menu country-dropdown">
-			<div 
-				class="search-container" 
+			<div
+				class="search-container"
 				*ngIf="searchCountryFlag && searchCountryField"
 			>
-				<input 
-					id="country-search-box" 
-					[(ngModel)]="countrySearchText" 
+				<input
+					id="country-search-box"
+					[(ngModel)]="countrySearchText"
 					(keyup)="searchCountry()"
-					(click)="$event.stopPropagation()" 
-					[placeholder]="searchCountryPlaceholder" 
-					autofocus 
+					(click)="$event.stopPropagation()"
+					[placeholder]="searchCountryPlaceholder"
+					autofocus
 				/>
 			</div>
 			<ul class="iti__country-list" #countryList>
-				<li 
-					class="iti__country iti__preferred" 
-					ngbDropdownItem 
+				<li
+					class="iti__country iti__preferred"
+					ngbDropdownItem
 					*ngFor="let country of preferredCountriesInDropDown"
-					(click)="onCountrySelect(country, focusable)" 
+					(click)="onCountrySelect(country, focusable)"
 					[id]="country.htmlId + '-preferred'"
 				>
 					<div class="iti__flag-box">
@@ -39,15 +39,15 @@
 					<span class="iti__country-name">{{ country.name }}</span>
 					<span class="iti__dial-code">+{{ country.dialCode }}</span>
 				</li>
-				<li 
-					class="iti__divider" 
+				<li
+					class="iti__divider"
 					*ngIf="preferredCountriesInDropDown?.length"
 				></li>
-				<li 
-					ngbDropdownItem 
-					class="iti__country iti__standard" 
+				<li
+					ngbDropdownItem
+					class="iti__country iti__standard"
 					*ngFor="let country of allCountries"
-					(click)="onCountrySelect(country, focusable)" 
+					(click)="onCountrySelect(country, focusable)"
 					[id]="country.htmlId"
 					>
 						<div class="iti__flag-box">
@@ -59,18 +59,18 @@
 			</ul>
 		</div>
 	</div>
-	<input 
-		type="tel" 
-		[id]="inputId" 
-		autocomplete="off" 
-		[ngClass]="cssClass" 
+	<input
+		type="tel"
+		[id]="inputId"
+		autocomplete="off"
+		[ngClass]="cssClass"
 		(blur)="onTouched()"
-		(keypress)="onInputKeyPress($event)" 
-		[(ngModel)]="phoneNumber" 
+		(keypress)="onInputKeyPress($event)"
+		[(ngModel)]="phoneNumber"
 		(ngModelChange)="onPhoneNumberChange()"
-		[disabled]="disabled" 
-		[placeholder]="resolvePlaceholder()" 
+		[disabled]="disabled"
+		[placeholder]="resolvePlaceholder()"
 		[attr.maxLength]="maxLength"
-		[attr.validation]="phoneValidation" 
+		[attr.validation]="phoneValidation"
 		#focusable />
 </div>

From 8e58d64b8bb90bfb118c6e58bee185bae9a11db8 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 19 Oct 2022 13:22:14 -0500
Subject: [PATCH 16/25] even more formatting

---
 .../src/lib/ngx-intl-tel-input.component.html     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

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
index 1f9007b4..93f66b16 100644
--- 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,5 +1,5 @@
 <div class="iti iti--allow-dropdown" [ngClass]="separateDialCodeClass">
-	<div 
+	<div
 		class="iti__flag-container"
 		ngbDropdown
 		[ngClass]="{ disabled: disabled }"
@@ -50,11 +50,11 @@
 					(click)="onCountrySelect(country, focusable)"
 					[id]="country.htmlId"
 					>
-						<div class="iti__flag-box">
-							<div class="iti__flag" [ngClass]="country.flagClass"></div>
-						</div>
-						<span class="iti__country-name">{{ country.name }}</span>
-						<span class="iti__dial-code">+{{ country.dialCode }}</span>
+					<div class="iti__flag-box">
+						<div class="iti__flag" [ngClass]="country.flagClass"></div>
+					</div>
+					<span class="iti__country-name">{{ country.name }}</span>
+					<span class="iti__dial-code">+{{ country.dialCode }}</span>
 				</li>
 			</ul>
 		</div>
@@ -72,5 +72,6 @@
 		[placeholder]="resolvePlaceholder()"
 		[attr.maxLength]="maxLength"
 		[attr.validation]="phoneValidation"
-		#focusable />
+		#focusable
+	/>
 </div>

From 5a294db234299932e9602ed8e08442682a490977 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 19 Oct 2022 13:22:58 -0500
Subject: [PATCH 17/25] last formatting

---
 .../src/lib/ngx-intl-tel-input.component.html                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 93f66b16..20437223 100644
--- 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
@@ -49,7 +49,7 @@
 					*ngFor="let country of allCountries"
 					(click)="onCountrySelect(country, focusable)"
 					[id]="country.htmlId"
-					>
+				>
 					<div class="iti__flag-box">
 						<div class="iti__flag" [ngClass]="country.flagClass"></div>
 					</div>

From bd38f592a1a8c08030fdc40dfe1cc86a0d55791f Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Fri, 21 Oct 2022 10:13:17 -0500
Subject: [PATCH 18/25] downgrade ts version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 60e4d38a..25a26e29 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
 		"ts-node": "~7.0.0",
 		"tslint": "~6.1.3",
 		"tslint-config-prettier": "^1.18.0",
-		"typescript": "^4.4.4",
+		"typescript": "^4.2.4",
 		"webpack-bundle-analyzer": "^3.9.0"
 	}
 }

From 836a10f4c2ca4a994f8db4ce38f1442d34175a0f Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Fri, 21 Oct 2022 10:22:44 -0500
Subject: [PATCH 19/25] add pr build

---
 .github/workflows/pull_request.yml | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 .github/workflows/pull_request.yml

diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
new file mode 100644
index 00000000..e20f2fb3
--- /dev/null
+++ b/.github/workflows/pull_request.yml
@@ -0,0 +1,16 @@
+name: Pull Request
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm install

From 4dc19f510eb151a5c4d55d304278b0a554ed60c5 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Fri, 21 Oct 2022 10:37:00 -0500
Subject: [PATCH 20/25] bump typescript

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 25a26e29..9162c289 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
 		"ts-node": "~7.0.0",
 		"tslint": "~6.1.3",
 		"tslint-config-prettier": "^1.18.0",
-		"typescript": "^4.2.4",
+		"typescript": "~4.3.5",
 		"webpack-bundle-analyzer": "^3.9.0"
 	}
 }

From b6a393d8da130082569fdc0b9c7893e5fc3425d7 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 23 Nov 2022 15:18:58 -0600
Subject: [PATCH 21/25] upgrades

---
 projects/ngx-intl-tel-input/package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index ce72d27a..a18377e4 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -2,12 +2,12 @@
 	"name": "@travelnetsolutions/ngx-intl-tel-input",
 	"version": "3.1.2",
 	"peerDependencies": {
-		"@angular/common": "8.x - 12.x",
-		"@angular/core": "8.x - 12.x",
-		"@angular/forms": "8.x - 12.x",
+		"@angular/common": "8.x - 13.x",
+		"@angular/core": "8.x - 13.x",
+		"@angular/forms": "8.x - 13.x",
+		"@ng-bootstrap/ng-bootstrap": "10.x - 11.x",
 		"google-libphonenumber": "^3.2.3",
-		"intl-tel-input": "^17.0.3",
-		"@ng-bootstrap/ng-bootstrap": "^9.1.3"
+		"intl-tel-input": "^17.0.3"
 	},
 	"repository": {
 		"type": "git",

From da73458d8f4309ae7c3afc651261bcf52a958798 Mon Sep 17 00:00:00 2001
From: Andrew Darts <adarts@tnsinc.com>
Date: Wed, 23 Nov 2022 15:37:11 -0600
Subject: [PATCH 22/25] bump package version

---
 projects/ngx-intl-tel-input/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index a18377e4..e021924d 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@travelnetsolutions/ngx-intl-tel-input",
-	"version": "3.1.2",
+	"version": "3.1.3",
 	"peerDependencies": {
 		"@angular/common": "8.x - 13.x",
 		"@angular/core": "8.x - 13.x",

From b39314816e487c571572a23cd9b69d484ff84bd9 Mon Sep 17 00:00:00 2001
From: Chris Mathis <cmathis@tnsinc.com>
Date: Wed, 8 May 2024 11:50:50 -0500
Subject: [PATCH 23/25] Upgraded dependencies for Angular 17x

---
 angular.json                                |  6 ++-
 package.json                                | 57 ++++++++++-----------
 projects/ngx-intl-tel-input/ng-package.json |  6 +--
 projects/ngx-intl-tel-input/package.json    | 29 +++++------
 src/polyfills.ts                            |  2 +-
 5 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/angular.json b/angular.json
index 0ef8d967..3f034dda 100644
--- a/angular.json
+++ b/angular.json
@@ -156,6 +156,8 @@
 				}
 			}
 		}
-	},
-	"defaultProject": "ngx-intl-tel-input-app"
+  },
+  "cli": {
+    "analytics": false
+  }
 }
diff --git a/package.json b/package.json
index 9162c289..7280e35b 100644
--- a/package.json
+++ b/package.json
@@ -15,55 +15,54 @@
 		"copy-readme": "cp ./README.md ./dist/ngx-intl-tel-input",
 		"copy-files": "npm run copy-license && npm run copy-readme",
 		"npm_pack": "npm run copy-files && cd dist/ngx-intl-tel-input && npm pack",
-		"package": "npm run build_lib && npm run npm_pack",
-		"postinstall": "ngcc"
+		"package": "npm run build_lib && npm run npm_pack"
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "^12.2.12",
-		"@angular/common": "^12.2.12",
-		"@angular/compiler": "^12.2.12",
-		"@angular/core": "^12.2.12",
-		"@angular/forms": "^12.2.12",
-		"@angular/platform-browser": "^12.2.12",
-		"@angular/platform-browser-dynamic": "^12.2.12",
-		"@angular/router": "^12.2.12",
-		"@ng-bootstrap/ng-bootstrap": "^10.0.0",
-		"bootstrap": "^4.5.2",
+		"@angular/animations": "^17.3.7",
+		"@angular/common": "^17.3.7",
+		"@angular/compiler": "^17.3.7",
+		"@angular/core": "^17.3.7",
+		"@angular/forms": "^17.3.7",
+		"@angular/platform-browser": "^17.3.7",
+		"@angular/platform-browser-dynamic": "^17.3.7",
+		"@angular/router": "^17.3.7",
+		"@ng-bootstrap/ng-bootstrap": "^16.0.0",
+		"bootstrap": "^5.3.2",
 		"core-js": "^3.6.5",
-		"google-libphonenumber": "^3.2.3",
-		"intl-tel-input": "^17.0.3",
+		"google-libphonenumber": "^3.2.34",
+		"intl-tel-input": "^22.0.2",
 		"jquery": "^3.5.0",
 		"popper.js": "^1.16.1",
-		"rxjs": "~6.6.0",
+		"rxjs": "^7.8.1",
 		"tslib": "^2.0.0",
-		"zone.js": "~0.10.2"
+		"zone.js": "~0.14.5"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "^12.2.12",
-		"@angular/cli": "^12.2.12",
-		"@angular/compiler-cli": "^12.2.12",
-		"@angular/language-service": "^12.2.12",
-		"@types/jasmine": "~3.6.0",
+		"@angular-devkit/build-angular": "^17.3.6",
+		"@angular/cli": "^17.3.6",
+		"@angular/compiler-cli": "^17.3.7",
+		"@angular/language-service": "^17.3.7",
+		"@types/jasmine": "^5.1.4",
 		"@types/jasminewd2": "~2.0.3",
 		"@types/node": "^12.11.1",
 		"ajv": "^6.10.2",
-		"eslint": "^7.2.0",
-		"jasmine-core": "~3.6.0",
+		"eslint": "^8.57.0",
+		"jasmine-core": "^5.1.2",
 		"jasmine-spec-reporter": "~5.0.0",
-		"karma": "~6.1.1",
-		"karma-chrome-launcher": "~3.1.0",
+		"karma": "^6.4.3",
+		"karma-chrome-launcher": "^3.2.0",
 		"karma-coverage-istanbul-reporter": "^2.0.6",
-		"karma-jasmine": "~4.0.0",
-		"karma-jasmine-html-reporter": "^1.5.0",
-		"ng-packagr": "^12.2.5",
+		"karma-jasmine": "^5.1.0",
+		"karma-jasmine-html-reporter": "^2.1.0",
+		"ng-packagr": "^17.3.0",
 		"prettier": "^2.0.5",
 		"protractor": "^7.0.0",
 		"rollup": "^2.22.0",
 		"ts-node": "~7.0.0",
 		"tslint": "~6.1.3",
 		"tslint-config-prettier": "^1.18.0",
-		"typescript": "~4.3.5",
+		"typescript": "^5.3.3",
 		"webpack-bundle-analyzer": "^3.9.0"
 	}
 }
diff --git a/projects/ngx-intl-tel-input/ng-package.json b/projects/ngx-intl-tel-input/ng-package.json
index 6ada289c..51947c16 100644
--- a/projects/ngx-intl-tel-input/ng-package.json
+++ b/projects/ngx-intl-tel-input/ng-package.json
@@ -2,10 +2,6 @@
 	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
 	"dest": "../../dist/ngx-intl-tel-input",
 	"lib": {
-		"entryFile": "src/public_api.ts",
-		"umdModuleIds": {
-			"google-libphonenumber": "^3.2.3",
-			"@ng-bootstrap/ng-bootstrap": "^9.1.3"
-		}
+		"entryFile": "src/public_api.ts"
 	}
 }
diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index e021924d..1a3fd556 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -1,13 +1,13 @@
 {
 	"name": "@travelnetsolutions/ngx-intl-tel-input",
-	"version": "3.1.3",
+	"version": "4.0.0",
 	"peerDependencies": {
-		"@angular/common": "8.x - 13.x",
-		"@angular/core": "8.x - 13.x",
-		"@angular/forms": "8.x - 13.x",
-		"@ng-bootstrap/ng-bootstrap": "10.x - 11.x",
-		"google-libphonenumber": "^3.2.3",
-		"intl-tel-input": "^17.0.3"
+		"@angular/common": "15.x - 17.x",
+		"@angular/core": "15.x - 17.x",
+		"@angular/forms": "15.x - 17.x",
+		"@ng-bootstrap/ng-bootstrap": "15.x - 16.x",
+		"google-libphonenumber": "^3.2.34",
+		"intl-tel-input": "^22.0.2"
 	},
 	"repository": {
 		"type": "git",
@@ -19,13 +19,12 @@
 	},
 	"keywords": [
 		"angular",
-		"ng8",
-		"ng9",
-		"ng10",
-		"angular 8",
-		"angular 9",
-		"angular 10",
-		"angular 11",
+		"ng15",
+		"ng16",
+		"ng17",
+		"angular 15",
+		"angular 16",
+		"angular 17",
 		"intl-tel-input",
 		"phone number",
 		"validation"
@@ -35,7 +34,7 @@
 		"url": "https://github.com/travelnetsolutions/ngx-intl-tel-input/issues"
 	},
 	"devDependencies": {
-		"@types/google-libphonenumber": "^7.4.17"
+		"@types/google-libphonenumber": "^7.4.30"
 	},
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/@travelnetsolutions"
diff --git a/src/polyfills.ts b/src/polyfills.ts
index aa665d6b..e484510f 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

From 1b655dd1b9a8631cfc40b13ce3dd6d67fc11ec55 Mon Sep 17 00:00:00 2001
From: Yanesh Tyagi <ytyagi@tnsinc.com>
Date: Thu, 23 May 2024 10:41:05 +0530
Subject: [PATCH 24/25] Update node version and publish npm package on release
 puublish

---
 .github/workflows/main.yml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 7e0bdbb9..3fbc32c7 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,9 +1,8 @@
 name: Publish Npm Package
 
 on:
-  push:
-    branches: 
-      - master
+  release:
+    types: [published]
       
 jobs:
   publish-gpr:
@@ -12,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://npm.pkg.github.com/
           scope: '@travelnetsolutions'
       - run: npm install

From 0b2f07060c117bc22a8957ba631c1dda7106e737 Mon Sep 17 00:00:00 2001
From: Yanesh Tyagi <ytyagi@tnsinc.com>
Date: Thu, 23 May 2024 14:46:40 +0530
Subject: [PATCH 25/25] Set compilationModel to partial to enable parital ivy
 compatibility.

---
 projects/ngx-intl-tel-input/tsconfig.lib.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/ngx-intl-tel-input/tsconfig.lib.json b/projects/ngx-intl-tel-input/tsconfig.lib.json
index e734a5d2..adff2cc7 100644
--- a/projects/ngx-intl-tel-input/tsconfig.lib.json
+++ b/projects/ngx-intl-tel-input/tsconfig.lib.json
@@ -21,7 +21,8 @@
 		"skipTemplateCodegen": true,
 		"strictMetadataEmit": true,
 		"enableResourceInlining": true,
-		"enableIvy": false
+		"enableIvy": false,
+		"compilationMode": "partial"
 	},
 	"exclude": [
 		"src/test.ts",