intl-tel-input 19.1.0 → 19.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -2
- package/build/css/demo.css +5 -14
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput-jquery.js +15 -9
- package/build/js/intlTelInput-jquery.min.js +3 -3
- package/build/js/intlTelInput.js +15 -9
- package/build/js/intlTelInput.min.js +3 -3
- package/composer.json +1 -1
- package/grunt/jasmine.js +0 -2
- package/index.js +0 -3
- package/package.json +10 -5
- package/react/DemoApp.js +50 -0
- package/react/IntlTelInput.js +94 -0
- package/react/demo-bundle.js +25972 -0
- package/react/demo.html +18 -0
- package/src/css/demo.scss +6 -15
- package/src/js/intlTelInput.js +15 -9
package/react/demo.html
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>IntlTelInput React Component</title>
|
|
8
|
+
<link rel="stylesheet" href="../build/css/intlTelInput.css" />
|
|
9
|
+
<link rel="stylesheet" href="../build/css/demo.css" />
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
<h1>IntlTelInput React Component</h1>
|
|
14
|
+
<div id="app"></div>
|
|
15
|
+
<script src="./demo-bundle.js"></script>
|
|
16
|
+
</body>
|
|
17
|
+
|
|
18
|
+
</html>
|
package/src/css/demo.scss
CHANGED
|
@@ -8,21 +8,6 @@ body {
|
|
|
8
8
|
color: #555;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
// example code blocks
|
|
12
|
-
pre {
|
|
13
|
-
margin: 0 !important; // override prism.css
|
|
14
|
-
display: inline-block;
|
|
15
|
-
}
|
|
16
|
-
// override weird rule in prism.css that puts a background on '='
|
|
17
|
-
.token.operator,
|
|
18
|
-
.token.entity,
|
|
19
|
-
.token.url,
|
|
20
|
-
.language-css .token.string,
|
|
21
|
-
.style .token.string,
|
|
22
|
-
.token.variable {
|
|
23
|
-
background: none;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
11
|
// general form styling
|
|
27
12
|
input,
|
|
28
13
|
button {
|
|
@@ -56,9 +41,15 @@ button {
|
|
|
56
41
|
color: #fff;
|
|
57
42
|
background-color: #428bca;
|
|
58
43
|
border: 1px solid #357ebd;
|
|
44
|
+
margin-left: 5px;
|
|
59
45
|
&:hover {
|
|
60
46
|
background-color: #3276b1;
|
|
61
47
|
border-color: #285e8e;
|
|
62
48
|
cursor: pointer;
|
|
63
49
|
}
|
|
64
50
|
}
|
|
51
|
+
|
|
52
|
+
// for react demo
|
|
53
|
+
.notice {
|
|
54
|
+
margin-top: 15px;
|
|
55
|
+
}
|
package/src/js/intlTelInput.js
CHANGED
|
@@ -780,7 +780,7 @@ class Iti {
|
|
|
780
780
|
const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
|
|
781
781
|
const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
|
|
782
782
|
const isDeleteForwards = e && e.inputType === "deleteContentForward";
|
|
783
|
-
const formattedValue = this.
|
|
783
|
+
const formattedValue = this._formatNumberAsYouType();
|
|
784
784
|
const newCaretPos = this._translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
|
|
785
785
|
this.telInput.value = formattedValue
|
|
786
786
|
this.telInput.setSelectionRange(newCaretPos, newCaretPos);
|
|
@@ -1646,6 +1646,20 @@ class Iti {
|
|
|
1646
1646
|
this._trigger("countrychange");
|
|
1647
1647
|
}
|
|
1648
1648
|
|
|
1649
|
+
// format the number as the user types
|
|
1650
|
+
_formatNumberAsYouType() {
|
|
1651
|
+
const val = this._getFullNumber().trim();
|
|
1652
|
+
const result = window.intlTelInputUtils
|
|
1653
|
+
? intlTelInputUtils.formatNumberAsYouType(val, this.selectedCountryData.iso2)
|
|
1654
|
+
: val;
|
|
1655
|
+
// if showSelectedDialCode and they haven't (re)typed the dial code in the input as well, then remove the dial code
|
|
1656
|
+
if (this.options.showSelectedDialCode && this.telInput.value.charAt(0) !== '+') {
|
|
1657
|
+
const { dialCode } = this.selectedCountryData;
|
|
1658
|
+
return result.split(`+${dialCode}`)[1].trim();
|
|
1659
|
+
}
|
|
1660
|
+
return result;
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1649
1663
|
/**************************
|
|
1650
1664
|
* SECRET PUBLIC METHODS
|
|
1651
1665
|
**************************/
|
|
@@ -1797,14 +1811,6 @@ class Iti {
|
|
|
1797
1811
|
: null;
|
|
1798
1812
|
}
|
|
1799
1813
|
|
|
1800
|
-
// format the number as the user types
|
|
1801
|
-
formatNumberAsYouType() {
|
|
1802
|
-
const val = this._getFullNumber().trim();
|
|
1803
|
-
return window.intlTelInputUtils
|
|
1804
|
-
? intlTelInputUtils.formatNumberAsYouType(val, this.selectedCountryData.iso2)
|
|
1805
|
-
: val;
|
|
1806
|
-
}
|
|
1807
|
-
|
|
1808
1814
|
// update the selected flag, and update the input val accordingly
|
|
1809
1815
|
setCountry(originalCountryCode) {
|
|
1810
1816
|
const countryCode = originalCountryCode.toLowerCase();
|