Merge pull request #12 from mpalourdio/ng10

chore(ng10): Upgrade to @angular ^10.0.0

browserslist → .browserslistrc

@@ -5,8 +5,10 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
 Firefox ESR
-not dead
 not IE 9-11 # For IE 9-11 support, remove 'not'.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.2.0
+
+- `angular 10` migration.
+
 ## v0.1.0
 
 - `angular 9` migration.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input-ng",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "scripts": {
     "ng": "ng",
     "build": "ng build",
@@ -34,46 +34,44 @@
     "url": "https://github.com/mpalourdio/intl-tel-input-ng/issues"
   },
   "dependencies": {
-    "tslib": "^1.10.0"
+    "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/common": "^9.1.0",
-    "@angular/core": "^9.1.0",
-    "@angular/forms": "^9.1.0",
+    "@angular/common": "^10.0.0",
+    "@angular/core": "^10.0.0",
     "intl-tel-input": "^17.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.0",
-    "@angular-devkit/build-ng-packagr": "~0.901.0",
-    "@angular/cli": "^9.1.0",
-    "@angular/common": "^9.1.0",
-    "@angular/compiler": "^9.1.0",
-    "@angular/compiler-cli": "^9.1.0",
-    "@angular/core": "^9.1.0",
-    "@angular/forms": "^9.1.0",
-    "@angular/platform-browser": "^9.1.0",
-    "@angular/platform-browser-dynamic": "^9.1.0",
+    "@angular-devkit/build-angular": "~0.1000.0",
+    "@angular-devkit/build-ng-packagr": "~0.1000.0",
+    "@angular/cli": "^10.0.0",
+    "@angular/common": "^10.0.0",
+    "@angular/compiler": "^10.0.0",
+    "@angular/compiler-cli": "^10.0.0",
+    "@angular/core": "^10.0.0",
+    "@angular/forms": "^10.0.0",
+    "@angular/platform-browser": "^10.0.0",
+    "@angular/platform-browser-dynamic": "^10.0.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
+    "codelyzer": "^6.0.0-next.1",
     "coveralls": "^3.0.1",
     "intl-tel-input": "^17.0.0",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~5.0.2",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-firefox-launcher": "^1.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "ng-packagr": "^9.1.0",
+    "karma-jasmine": "~3.3.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^10.0.0",
     "puppeteer": "^3.0.0",
     "rxjs": "^6.5.4",
     "ts-node": "~8.3.0",
-    "tslib": "^1.10.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.8.3",
-    "zone.js": "~0.10.2"
+    "typescript": "~3.9.5",
+    "zone.js": "~0.10.3"
   }
 }

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

@@ -89,7 +89,7 @@ describe('IntlTelInputComponent', () => {
             .debugElement
             .query(By.css('label'));
 
-        expect(element).toBe(null);
+        expect(element).toBeNull();
     });
 
     it('should not have a css class by default for the label', () => {
@@ -182,7 +182,7 @@ describe('IntlTelInputComponent', () => {
             .parentNode
             .querySelector('.iti__preferred');
 
-        expect(element.getAttribute('data-country-code')).toBe(component.options.onlyCountries[0]);
+        expect(element.getAttribute('data-country-code')).toBe(component.options.onlyCountries?.[0]);
     });
 
     it('should be possible to set localizedCountries option', () => {

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

@@ -20,17 +20,17 @@ import { CountryData, IntlTelInputOptions } from '../model/intl-tel-input-option
 })
 export class IntlTelInputComponent implements AfterViewInit {
 
-    @Input() public cssClass: string;
-    @Input() public E164PhoneNumber: string;
-    @Input() public label: string;
-    @Input() public labelCssClass: string;
+    @Input() public cssClass!: string;
+    @Input() public E164PhoneNumber!: string | null;
+    @Input() public label!: string;
+    @Input() public labelCssClass!: string;
     @Input() public name = 'intl-tel-input-name';
-    @Input() public onlyLocalized: boolean;
+    @Input() public onlyLocalized!: boolean;
     @Input() public options: IntlTelInputOptions = {};
-    @Input() public required: boolean;
-    @Output() private E164PhoneNumberChange = new EventEmitter<string>();
-    @ViewChild('intlTelInput') private _inputElement: ElementRef;
-    private _phoneNumber: string;
+    @Input() public required!: boolean;
+    @Output() private E164PhoneNumberChange = new EventEmitter<string | null>();
+    @ViewChild('intlTelInput') private _inputElement!: ElementRef;
+    private _phoneNumber!: string;
     private _intlTelInput: any;
 
     private static modifyCountryData(): void {

tsconfig.base.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "paths": {
+      "intl-tel-input": [
+        "src/lib/@types/intl-tel-input"
+      ]
+    },
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "strictTemplates": true,
+    "strictInjectionParameters": true
+  }
+}

tsconfig.json

@@ -1,31 +1,17 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2015",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "paths": {
-      "intl-tel-input": [
-        "src/lib/@types/intl-tel-input"
-      ]
+  "files": [],
+  "references": [
+    {
+      "path": "././tsconfig.lib.json"
     },
-    "lib": [
-      "es2018",
-      "dom"
-    ]
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
-  }
-}
+    {
+      "path": "././tsconfig.spec.json"
+    }
+  ]
+}

tsconfig.lib.json

@@ -1,12 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./out-tsc/lib",
     "target": "es2015",
     "declaration": true,
     "inlineSources": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
     "types": [],
     "lib": [
       "dom",

tsconfig.lib.prod.json

@@ -1,6 +1,7 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.lib.json",
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

tsconfig.spec.json

@@ -1,10 +1,9 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine",
-      "node"
+      "jasmine"
     ]
   },
   "files": [