add Phone Number Input Field

.editorconfig

@@ -26,6 +26,3 @@ max_line_length = 100
 
 [*.{scss,css}]
 indent_size = 2
-
-[*.svg]
-insert_final_newline = false

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Changes
 
+1.3
+  * New widget: `PhoneNumberField` which can be used to improve the user experience when entering 
+    phone numbers.
+
 1.2.2
   * Nicer outline and box-shadow, whenever a `DualSelector` element receives input focus. It now
     surrounds the complete field.

client/django-formset.monolith.ts

@@ -24,6 +24,8 @@ window.addEventListener('DOMContentLoaded', (event) => {
 	customElementNames.push('django-sortable-select');
 	window.customElements.define('django-dual-selector', DualSelectorElement, {extends: 'select'});
 	customElementNames.push('django-dual-selector');
+	window.customElements.define('django-phone-number', DualSelectorElement, {extends: 'input'});
+	customElementNames.push('django-phone-number');
 	window.customElements.define('django-richtext', RichTextAreaElement, {extends: 'textarea'});
 	customElementNames.push('django-richtext');
 	window.customElements.define('django-slug', DjangoSlugElement, {extends: 'input'});

client/django-formset.ts

@@ -60,6 +60,13 @@ window.addEventListener('DOMContentLoaded', (event) => {
 				}).catch(err => reject(err));
 			}));
 		}
+		if (fragmentRoot.querySelector('input[is="django-phone-number"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/PhoneNumber').then(({PhoneNumberElement}) => {
+					defineComponent(resolve, 'django-phone-number', PhoneNumberElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
 		if (fragmentRoot.querySelector('textarea[is="django-richtext"]')) {
 			promises.push(new Promise((resolve, reject) => {
 				import('./django-formset/RichtextArea').then(({RichTextAreaElement}) => {

client/django-formset/PhoneNumber.scss

@@ -0,0 +1,94 @@
+$flag-icons-path: "/static/node_modules/flag-icons/flags" !default;
+$flag-icons-rect-path: "/4x3" !default;
+$flag-icons-square-path: "/1x1" !default;
+$flag-icons-use-square: true !default;
+@import "node_modules/flag-icons/sass/flag-icons-base";
+@import "node_modules/flag-icons/sass/flag-icons-list";
+@import "colors";
+
+[is="django-phone-number"] {
+	--dummy-style: none; // required by PhoneNumberField.transferStyles()
+
+	// Date input fields
+	+ [role="textbox"] {
+		display: flex;
+		justify-content: flex-start;
+
+		&.focus {
+			--dummy-style: none; // required by PhoneNumberField.transferStyles()
+		}
+
+		> .international-picker {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			cursor: pointer;
+
+			&:empty::after {
+				content: "";
+				display: block;
+				width: 0;
+				height: 0;
+				margin-right: 12px;
+				border-style: solid;
+				border-width: 5px 5px 0 5px;
+				border-color: black transparent transparent transparent;
+			}
+
+			span {
+				width: 24px;
+			}
+		}
+
+		> .phone-number-edit {
+			overflow-x: hidden;
+			margin-left: 0.5rem;
+			flex-grow: 1;
+
+			&:focus-visible {
+				outline: none;
+			}
+		}
+
+		&[aria-haspopup="dialog"] {
+			// International prefix popup dialog
+			+ [role="dialog"] {
+				box-shadow: lightgray 0 0 1rem;
+				max-height: 500px;
+				position: absolute;
+				top: 0;
+				left: 0;
+				overflow-y: scroll;
+				background-color: $select-color-dropdown;
+
+				ul {
+					list-style: none;
+					padding: 0;
+					margin: 0;
+					li {
+						padding: 0.25rem;
+						cursor: pointer;
+						&:hover {
+							background-color: $active-items-background-color;
+						}
+						&.selected {
+							background-color: $selected-items-background-color;
+							border: 1px solid $selected-items-border-color;
+						}
+						span {
+							margin-right: 0.5rem;
+						}
+					}
+				}
+			}
+
+			&[aria-expanded="false"] + [role="dialog"] {
+				display: none;
+			}
+
+			&[aria-expanded="true"] + [role="dialog"] {
+				display: block;
+			}
+		}
+	}
+}