Skip to content

Add international phone number support with custom dropdown, enhanced UI, and robust phone number parsing for dt-multi-text component #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Add international phone number support with custom dropdown, enhanced UI, and robust phone number parsing for dt-multi-text component #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2627124
Initial plan
Copilot Sep 12, 2025
2055e69
Initial exploration and planning for phone-intl feature
Copilot Sep 12, 2025
8abb26b
Implement phone-intl feature for dt-multi-text component
Copilot Sep 12, 2025
f6ac19f
Implement improved phone-intl UI design and localization features
Copilot Sep 12, 2025
0eb82d5
Enhance phone-intl UI with improved dropdown display and styling alig…
Copilot Sep 12, 2025
4fd2cd3
Replace HTML select with custom dropdown for phone-intl component
Copilot Sep 12, 2025
90db5db
Complete phone-intl custom dropdown implementation with enhanced styling
Copilot Sep 12, 2025
8e98250
Refactor phone-intl component to use localized country names and impr…
micahmills Sep 13, 2025
8b21e9a
Refactor phone input handling in DtMultiText to remove dial code disp…
micahmills Sep 13, 2025
0d9aa5e
Refactor DtMultiText tests because of updates in the render logic
micahmills Sep 13, 2025
34b277b
eslint fixes
micahmills Sep 13, 2025
1aac643
Fix phone-intl component issues: country detection, empty field selec…
Copilot Sep 17, 2025
eefc145
Fix phone-intl country code detection and empty field behavior
Copilot Sep 17, 2025
3216f50
Merge branch 'master' into copilot/fix-136
micahmills Nov 14, 2025
8574d03
Fix build errors: add missing updated method and preserve phone forma…
Copilot Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@
},
"dependencies": {
"@lit/localize": "^0.12.1",
"country-list-with-dial-code-and-flag": "^5.1.1",
"i18n-iso-countries": "^7.14.0",
"iconify-icon": "^1.0.2",
"lit": "^3.1.4"
},
Expand Down
47 changes: 47 additions & 0 deletions phone-intl-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phone International Test</title>
<script type="module" src="./dist/index.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.container {
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Phone International Component Test</h1>

<div class="container">
<h2>Empty Phone International</h2>
<dt-multi-text type="phone-intl" label="Phone Numbers"></dt-multi-text>
</div>

<div class="container">
<h2>Populated Phone International</h2>
<dt-multi-text
type="phone-intl"
label="Phone Numbers"
value='[{"value": "+1 555-123-4567", "key": "phone1"}, {"value": "+44 20 7946 0958", "key": "phone2"}]'>
</dt-multi-text>
</div>

<div class="container">
<h2>French Localized</h2>
<dt-multi-text
type="phone-intl"
label="Numéros de téléphone"
locale="fr"
value='[{"value": "+33 1 42 86 83 26", "key": "phone1"}]'>
</dt-multi-text>
</div>
</body>
</html>
Loading