fix: match area codes or priority when determining country code

[ghollingworthh]

• Suggesting this basic solution to check the area codes when determining the country code.

Why: When the phone number control value is set programatically, eg. when a record is read and the control is populated with the phone number so that it can be edited, the area codes were NOT taken into consideration when attempting to determine the country code.

For example, when I programmatically set the value of the control with a US phone number, eg. +19781234567 the country returned was American Samoa (+1 684).

• Suggesting a check of the country 'priority'.

Why: To ensure that the highest priority country is associated with any country code that is utilized by multiple countries, eg. +39 is shared by Italy and Vatican City. I'm not sure how to can figure out which country was used when the phone number was created. The phone numbers, eg. +39 312 345 6789 do NOT contain any 'priority' info.

• Suggesting adding the country name is displayed on hover.

Why: The country name could be useful to user unfamiliar with the selected flag and the hover tooltip is the quickest and easiest way to provide that information.

These changes would go a long way to help me adopt using the component I my project. While I have tinkered with the code, and offered some basic solutions, please don't hestitate to make different, better changes (perhaps make the tooltip configurable) yourself that might support the needs described above.

I added an input field to the test application for testing that programmatically setting the component value returns the correct country code based on country and area code.

Please let me know if you have any questions or concerns.

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1e0e0037102a43584fe92fdfa4e9edf4fd5e5547. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 6 targets

- [`nx run ngx-material-intl-tel-input-lib:build`](https://cloud.nx.app/runs/Kx9vKmGonr?utm_source=pull-request&utm_medium=comment) - [`nx run ngx-material-intl-tel-input:build`](https://cloud.nx.app/runs/V0xJim6Wmd?utm_source=pull-request&utm_medium=comment) - [`nx run ngx-material-intl-tel-input-lib:test`](https://cloud.nx.app/runs/rCdwzmGbOB?utm_source=pull-request&utm_medium=comment) - [`nx run ngx-material-intl-tel-input:test`](https://cloud.nx.app/runs/5Dq0RWkX9Z?utm_source=pull-request&utm_medium=comment) - [`nx run ngx-material-intl-tel-input-lib:lint`](https://cloud.nx.app/runs/o0SEWrXv7c?utm_source=pull-request&utm_medium=comment) - [`nx run ngx-material-intl-tel-input:lint`](https://cloud.nx.app/runs/FOYGAwx0M0?utm_source=pull-request&utm_medium=comment)

---

Sent with 💌 from NxCloud.

[juanjotorres90]

Thank you for your contribution and fixing this issue. I have been testing the changes and everything seems working fine.

Showing the country name on hover is a really nice addition. No need to be configurable for now.

Everything will be available in tomorrow's release 18.2.0.

Your efforts are much appreciated!