Merge pull request #15 from juanjotorres90/main

main to develop

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [18.2.0] - 2024-08-15
+
+### Added
+
+- Add country's name tooltip when hovering over country selection element.
+
+### Fixed
+
+- Fix match area codes or priority when determining country code ([#13](https://github.com/juanjotorres90/ngx-material-intl-tel-input/pull/13))
+
 ## [18.1.1] - 2024-07-27
 
 ### Added

README.md

@@ -20,7 +20,7 @@ Validation with [google-libphonenumber](https://github.com/google/libphonenumber
 
 | ngx-material-intl-tel-input | Angular   |
 | --------------------------- | --------- |
-| 18.0.0 - 18.1.1             | >= 18.0.0 |
+| 18.0.0 - 18.2.0             | >= 18.0.0 |
 | 0.0.1 - 17.3.0              | >= 17.2.0 |
 
 ## Installation
@@ -139,6 +139,7 @@ Thanks goes to these wonderful people:
   <tr>
     <td align="center"><a href="https://github.com/juanjotorres90"><img src="https://avatars3.githubusercontent.com/u/49198908?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Juanjo Torres</b></sub></a><br /><a href="#design-juanjotorres90" title="Design">🎨</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=juanjotorres90" title="Code">💻</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=juanjotorres90" title="Documentation">📖</a> <a href="#ideas-juanjotorres90" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-juanjotorres90" title="Answering Questions">💬</a> <a href="#infra-juanjotorres90" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#example-juanjotorres90" title="Examples">💡</a> <a href="#maintenance-juanjotorres90" title="Maintenance">🚧</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/pulls?q=is%3Apr+reviewed-by%3Ajuanjotorres90" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=juanjotorres90" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/whegar"><img src="https://avatars3.githubusercontent.com/u/5524772?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rafa Hernández</b></sub></a><br /> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=whegar" title="Code">💻</a> <a href="#ideas-whegar" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-whegar" title="Answering Questions">💬</a> <a href="#infra-whegar" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-whegar" title="Maintenance">🚧</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/pulls?q=is%3Apr+reviewed-by%whegar" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/ghollingworthh"><img src="https://avatars.githubusercontent.com/u/26550815?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Glen Hollingworth</b></sub></a><br /> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=ghollingworthh" title="Code">💻</a> <a href="#ideas-ghollingworthh" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-ghollingworthh" title="Answering Questions">💬</a> <a href="#example-ghollingworthh" title="Examples">💡</a> <a href="#maintenance-ghollingworthh" title="Maintenance">🚧</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/pulls?q=is%3Apr+reviewed-by%ghollingworthh" title="Reviewed Pull Requests">👀</a></td>
 </table>
 
 <!-- markdownlint-restore -->

apps/ngx-material-intl-tel-input/src/app/app.component.html

@@ -7,6 +7,19 @@
     <button mat-flat-button type="submit" [disabled]="!formTestGroup.valid">
       Submit
     </button>
+
+    <mat-checkbox (change)="toggleShowSetPhoneInput()"
+      >Show input to change number</mat-checkbox
+    >
+    @if (showSetPhoneInput()) {
+      <mat-form-field>
+        <mat-label>Set phone number</mat-label>
+        <input matInput type="text" formControlName="setPhoneTextbox" />
+      </mat-form-field>
+      <button mat-flat-button (click)="setPhone()" type="button">
+        Set phone number
+      </button>
+    }
   </form>
   @if (currentPhoneValue()) {
     <div>

apps/ngx-material-intl-tel-input/src/app/app.component.scss

@@ -12,6 +12,14 @@
     justify-content: center;
     align-items: center;
     form {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      justify-content: center;
+      align-items: center;
+      mat-checkbox {
+        margin-top: 16px;
+      }
       button {
         display: block;
         margin: 0 auto;

apps/ngx-material-intl-tel-input/src/app/app.component.ts

@@ -6,7 +6,10 @@ import {
   Validators
 } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { RouterModule } from '@angular/router';
 import { NgxMaterialIntlTelInputComponent } from 'ngx-material-intl-tel-input';
 
@@ -17,7 +20,10 @@ import { NgxMaterialIntlTelInputComponent } from 'ngx-material-intl-tel-input';
     RouterModule,
     ReactiveFormsModule,
     MatButtonModule,
-    MatChipsModule
+    MatChipsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule
   ],
   selector: 'ngx-material-intl-tel-input-root',
   templateUrl: './app.component.html',
@@ -29,10 +35,12 @@ export class AppComponent {
   currentPhoneValue = signal<string>('');
   submittedPhoneValue = signal<string>('');
   formTestGroup: FormGroup;
+  showSetPhoneInput = signal<boolean>(false);
 
   constructor(private fb: FormBuilder) {
     this.formTestGroup = this.fb.group({
-      phone: ['', [Validators.required]]
+      phone: ['', [Validators.required]],
+      setPhoneTextbox: ['']
     });
   }
 
@@ -51,4 +59,20 @@ export class AppComponent {
   onSubmit(): void {
     this.submittedPhoneValue.set(this.formTestGroup.value['phone']);
   }
+
+  /**
+   * Sets the phone control value to the value entered in the 'setPhoneTextbox' control.
+   */
+  setPhone(): void {
+    this.formTestGroup.controls['phone'].setValue(
+      this.formTestGroup.value['setPhoneTextbox']
+    );
+  }
+
+  /**
+   * Toggles the visibility of the set phone input field.
+   */
+  toggleShowSetPhoneInput(): void {
+    this.showSetPhoneInput.set(!this.showSetPhoneInput());
+  }
 }

apps/ngx-material-intl-tel-input/src/styles.scss

@@ -6,7 +6,6 @@
 @include mat.core();
 
 :root {
-  @include mat.all-component-themes(m3-theme.$light-theme);
   --mdc-theme-primary: #209ffc;
   --mdc-theme-secondary: #023871;
   --mdc-theme-error: #f44336;
@@ -15,6 +14,8 @@
   --mat-option-selected-state-label-text-color: #209ffc;
   --mat-select-focused-arrow-color: #209ffc;
   --mdc-outlined-text-field-focus-outline-color: #209ffc;
+
+  @include mat.all-component-themes(m3-theme.$light-theme);
 }
 
 html,

libs/ngx-material-intl-tel-input-lib/README.md

@@ -20,7 +20,7 @@ Validation with [google-libphonenumber](https://github.com/google/libphonenumber
 
 | ngx-material-intl-tel-input | Angular   |
 | --------------------------- | --------- |
-| 18.0.0 - 18.1.1             | >= 18.0.0 |
+| 18.0.0 - 18.2.0             | >= 18.0.0 |
 | 0.0.1 - 17.3.0              | >= 17.2.0 |
 
 ## Installation
@@ -90,6 +90,7 @@ Thanks goes to these wonderful people:
   <tr>
     <td align="center"><a href="https://github.com/juanjotorres90"><img src="https://avatars3.githubusercontent.com/u/49198908?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Juanjo Torres</b></sub></a><br /><a href="#design-juanjotorres90" title="Design">🎨</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=juanjotorres90" title="Code">💻</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=juanjotorres90" title="Documentation">📖</a> <a href="#ideas-juanjotorres90" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-juanjotorres90" title="Answering Questions">💬</a> <a href="#infra-juanjotorres90" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#example-juanjotorres90" title="Examples">💡</a> <a href="#maintenance-juanjotorres90" title="Maintenance">🚧</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/pulls?q=is%3Apr+reviewed-by%3Ajuanjotorres90" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=juanjotorres90" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/whegar"><img src="https://avatars3.githubusercontent.com/u/5524772?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rafa Hernández</b></sub></a><br /> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=whegar" title="Code">💻</a> <a href="#ideas-whegar" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-whegar" title="Answering Questions">💬</a> <a href="#infra-whegar" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-whegar" title="Maintenance">🚧</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/pulls?q=is%3Apr+reviewed-by%whegar" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/ghollingworthh"><img src="https://avatars.githubusercontent.com/u/26550815?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Glen Hollingworth</b></sub></a><br /> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/commits?author=ghollingworthh" title="Code">💻</a> <a href="#ideas-ghollingworthh" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-ghollingworthh" title="Answering Questions">💬</a> <a href="#example-ghollingworthh" title="Examples">💡</a> <a href="#maintenance-ghollingworthh" title="Maintenance">🚧</a> <a href="https://github.com/juanjotorres90/ngx-material-intl-tel-input/pulls?q=is%3Apr+reviewed-by%ghollingworthh" title="Reviewed Pull Requests">👀</a></td>
 </table>
 
 <!-- markdownlint-restore -->

libs/ngx-material-intl-tel-input-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-material-intl-tel-input",
-  "version": "18.1.1",
+  "version": "18.2.0",
   "license": "MIT",
 	"repository": {
 		"type": "git",

libs/ngx-material-intl-tel-input-lib/src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.html

@@ -7,7 +7,11 @@
     [formGroup]="telForm"
     [ngClass]="{ 'is-focused': isFocused() }"
   >
-    <mat-form-field appearance="fill" class="prefix-form-field">
+    <mat-form-field
+      appearance="fill"
+      class="prefix-form-field"
+      matTooltip="{{ prefixCtrl.value?.name }}"
+    >
       <mat-select
         formControlName="prefixCtrl"
         [placeholder]="(!isLoading() && textLabels().codePlaceholder) || ''"

libs/ngx-material-intl-tel-input-lib/src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.ts

@@ -40,6 +40,7 @@ import { GeoData } from '../types/geo.type';
 import { TextLabels } from '../types/text-labels.type';
 import { CountryISO } from '../enums/country-iso.enum';
 import { CountryDataService } from '../services/country-data/country-data.service';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'ngx-material-intl-tel-input',
@@ -54,6 +55,7 @@ import { CountryDataService } from '../services/country-data/country-data.servic
     NgClass,
     MatFormFieldModule,
     MatInputModule,
+    MatTooltipModule,
     NgTemplateOutlet
   ],
   providers: [

libs/ngx-material-intl-tel-input-lib/src/lib/validators/tel.validators.ts

@@ -16,19 +16,35 @@ export default class TelValidators {
           return null;
         }
 
-        const parsed = phoneNumberUtil.parse(
-          control.value,
-          telForm?.value?.prefixCtrl?.iso2
-        );
+        // NOTE: the PhoneNumberUtil.parse() method does NOT appear to correctly parse phone numbers with
+        // country codes which include the 'area code' eg. Dominica (+1767), Grenada (+1473), etc.
+        // Instead, the returned phone number is for the US (+1) country code.
+        const parsed = phoneNumberUtil.parse(control.value);
 
         const setPrefixControlValue = (
           countryCode: string | number | undefined,
           allCountries: Country[],
           telForm: FormGroup
         ) => {
-          const country = allCountries.find(
-            (c) => c.dialCode === countryCode?.toString()
-          );
+          const country = allCountries.find((c) => {
+            if (c.dialCode === countryCode?.toString()) {
+              if (c.areaCodes) {
+                // Checking the area codes only works because the countries using the same country code as the
+                // US (+1) and UK (+44) are ALL defined earlier in the list of all countries (country-code.ts)
+                // and are checked before defaulting to the US or UK (which are defined without area codes and
+                // have the highest priority (0)).
+                return c.areaCodes?.find((ac) =>
+                  parsed.getNationalNumber()?.toString().startsWith(ac)
+                );
+              } else if (c.priority === 0) {
+                // If a country does NOT have any area codes but shares a country code with another country,
+                // return the country with the highest priority (0), eg. country code '599' belongs to both
+                // 'Carribean Netherlands' (priority 1) and 'Curaçao' (priority 0).
+                return c;
+              }
+            }
+            return undefined;
+          });
           if (country && country.iso2 !== telForm?.value?.prefixCtrl?.iso2) {
             telForm.get('prefixCtrl')?.setValue(country, { emitEvent: false });
           }
@@ -52,13 +68,7 @@ export default class TelValidators {
           ?.setValue(formattedOnlyNumber, { emitEvent: false });
 
         const isValidNumber = phoneNumberUtil.isValidNumber(parsed);
-        if (
-          parsed.getCountryCode() &&
-          parsed.getCountryCode()?.toString() !==
-            telForm?.value?.prefixCtrl?.dialCode
-        ) {
-          setPrefixControlValue(parsed.getCountryCode(), allCountries, telForm);
-        }
+        setPrefixControlValue(parsed.getCountryCode(), allCountries, telForm);
         if (!isValidNumber) {
           control.setErrors({ invalidNumber: true });
           telForm.get('numberControl')?.setErrors({ invalidNumber: true });