intl-tel-input 23.4.0 → 23.4.1
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 +5 -5
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput.d.ts +2 -0
- package/build/js/intlTelInput.js +18 -3
- package/build/js/intlTelInput.min.js +2 -2
- package/build/js/intlTelInputWithUtils.js +18 -3
- package/build/js/intlTelInputWithUtils.min.js +2 -2
- package/package.json +1 -1
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +17 -2
- package/react/build/IntlTelInput.d.ts +2 -0
- package/react/build/IntlTelInput.js +17 -2
- package/react/build/IntlTelInputWithUtils.cjs +17 -2
- package/react/build/IntlTelInputWithUtils.js +17 -2
package/package.json
CHANGED
package/react/README.md
CHANGED
|
@@ -29,7 +29,7 @@ import "intl-tel-input/styles";
|
|
|
29
29
|
|
|
30
30
|
See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/ValidationApp.tsx) for a more fleshed out example of how to handle validation.
|
|
31
31
|
|
|
32
|
-
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"` instead, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@23.4.
|
|
32
|
+
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"` instead, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@23.4.1/build/js/utils.js"`.
|
|
33
33
|
|
|
34
34
|
## Props
|
|
35
35
|
Here's a list of all of the current props you can pass to the IntlTelInput react component.
|
|
@@ -1531,6 +1531,13 @@ var Iti = class {
|
|
|
1531
1531
|
}
|
|
1532
1532
|
this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
1533
1533
|
this.isRTL = !!this.telInput.closest("[dir=rtl]");
|
|
1534
|
+
if (this.options.separateDialCode) {
|
|
1535
|
+
if (this.isRTL) {
|
|
1536
|
+
this.originalPaddingRight = this.telInput.style.paddingRight;
|
|
1537
|
+
} else {
|
|
1538
|
+
this.originalPaddingLeft = this.telInput.style.paddingLeft;
|
|
1539
|
+
}
|
|
1540
|
+
}
|
|
1534
1541
|
this.options.i18n = { ...en_default, ...this.options.i18n };
|
|
1535
1542
|
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
1536
1543
|
this.resolveAutoCountryPromise = resolve;
|
|
@@ -2648,7 +2655,8 @@ var Iti = class {
|
|
|
2648
2655
|
//********************
|
|
2649
2656
|
//* Remove plugin.
|
|
2650
2657
|
destroy() {
|
|
2651
|
-
|
|
2658
|
+
const { allowDropdown, separateDialCode } = this.options;
|
|
2659
|
+
if (allowDropdown) {
|
|
2652
2660
|
this._closeDropdown();
|
|
2653
2661
|
this.selectedCountry.removeEventListener(
|
|
2654
2662
|
"click",
|
|
@@ -2672,6 +2680,13 @@ var Iti = class {
|
|
|
2672
2680
|
this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
|
|
2673
2681
|
}
|
|
2674
2682
|
this.telInput.removeAttribute("data-intl-tel-input-id");
|
|
2683
|
+
if (separateDialCode) {
|
|
2684
|
+
if (this.isRTL) {
|
|
2685
|
+
this.telInput.style.paddingRight = this.originalPaddingRight;
|
|
2686
|
+
} else {
|
|
2687
|
+
this.telInput.style.paddingLeft = this.originalPaddingLeft;
|
|
2688
|
+
}
|
|
2689
|
+
}
|
|
2675
2690
|
const wrapper = this.telInput.parentNode;
|
|
2676
2691
|
wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
|
|
2677
2692
|
wrapper?.parentNode?.removeChild(wrapper);
|
|
@@ -2804,7 +2819,7 @@ var intlTelInput = Object.assign(
|
|
|
2804
2819
|
//* A map from instance ID to instance object.
|
|
2805
2820
|
instances: {},
|
|
2806
2821
|
loadUtils,
|
|
2807
|
-
version: "23.4.
|
|
2822
|
+
version: "23.4.1"
|
|
2808
2823
|
}
|
|
2809
2824
|
);
|
|
2810
2825
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -897,6 +897,8 @@ declare module "intl-tel-input" {
|
|
|
897
897
|
private hiddenInputCountry;
|
|
898
898
|
private maxCoreNumberLength;
|
|
899
899
|
private defaultCountry;
|
|
900
|
+
private originalPaddingRight;
|
|
901
|
+
private originalPaddingLeft;
|
|
900
902
|
private _handleHiddenInputSubmit;
|
|
901
903
|
private _handleLabelClick;
|
|
902
904
|
private _handleClickSelectedCountry;
|
|
@@ -1495,6 +1495,13 @@ var Iti = class {
|
|
|
1495
1495
|
}
|
|
1496
1496
|
this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
1497
1497
|
this.isRTL = !!this.telInput.closest("[dir=rtl]");
|
|
1498
|
+
if (this.options.separateDialCode) {
|
|
1499
|
+
if (this.isRTL) {
|
|
1500
|
+
this.originalPaddingRight = this.telInput.style.paddingRight;
|
|
1501
|
+
} else {
|
|
1502
|
+
this.originalPaddingLeft = this.telInput.style.paddingLeft;
|
|
1503
|
+
}
|
|
1504
|
+
}
|
|
1498
1505
|
this.options.i18n = { ...en_default, ...this.options.i18n };
|
|
1499
1506
|
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
1500
1507
|
this.resolveAutoCountryPromise = resolve;
|
|
@@ -2612,7 +2619,8 @@ var Iti = class {
|
|
|
2612
2619
|
//********************
|
|
2613
2620
|
//* Remove plugin.
|
|
2614
2621
|
destroy() {
|
|
2615
|
-
|
|
2622
|
+
const { allowDropdown, separateDialCode } = this.options;
|
|
2623
|
+
if (allowDropdown) {
|
|
2616
2624
|
this._closeDropdown();
|
|
2617
2625
|
this.selectedCountry.removeEventListener(
|
|
2618
2626
|
"click",
|
|
@@ -2636,6 +2644,13 @@ var Iti = class {
|
|
|
2636
2644
|
this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
|
|
2637
2645
|
}
|
|
2638
2646
|
this.telInput.removeAttribute("data-intl-tel-input-id");
|
|
2647
|
+
if (separateDialCode) {
|
|
2648
|
+
if (this.isRTL) {
|
|
2649
|
+
this.telInput.style.paddingRight = this.originalPaddingRight;
|
|
2650
|
+
} else {
|
|
2651
|
+
this.telInput.style.paddingLeft = this.originalPaddingLeft;
|
|
2652
|
+
}
|
|
2653
|
+
}
|
|
2639
2654
|
const wrapper = this.telInput.parentNode;
|
|
2640
2655
|
wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
|
|
2641
2656
|
wrapper?.parentNode?.removeChild(wrapper);
|
|
@@ -2768,7 +2783,7 @@ var intlTelInput = Object.assign(
|
|
|
2768
2783
|
//* A map from instance ID to instance object.
|
|
2769
2784
|
instances: {},
|
|
2770
2785
|
loadUtils,
|
|
2771
|
-
version: "23.4.
|
|
2786
|
+
version: "23.4.1"
|
|
2772
2787
|
}
|
|
2773
2788
|
);
|
|
2774
2789
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -1531,6 +1531,13 @@ var Iti = class {
|
|
|
1531
1531
|
}
|
|
1532
1532
|
this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
1533
1533
|
this.isRTL = !!this.telInput.closest("[dir=rtl]");
|
|
1534
|
+
if (this.options.separateDialCode) {
|
|
1535
|
+
if (this.isRTL) {
|
|
1536
|
+
this.originalPaddingRight = this.telInput.style.paddingRight;
|
|
1537
|
+
} else {
|
|
1538
|
+
this.originalPaddingLeft = this.telInput.style.paddingLeft;
|
|
1539
|
+
}
|
|
1540
|
+
}
|
|
1534
1541
|
this.options.i18n = { ...en_default, ...this.options.i18n };
|
|
1535
1542
|
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
1536
1543
|
this.resolveAutoCountryPromise = resolve;
|
|
@@ -2648,7 +2655,8 @@ var Iti = class {
|
|
|
2648
2655
|
//********************
|
|
2649
2656
|
//* Remove plugin.
|
|
2650
2657
|
destroy() {
|
|
2651
|
-
|
|
2658
|
+
const { allowDropdown, separateDialCode } = this.options;
|
|
2659
|
+
if (allowDropdown) {
|
|
2652
2660
|
this._closeDropdown();
|
|
2653
2661
|
this.selectedCountry.removeEventListener(
|
|
2654
2662
|
"click",
|
|
@@ -2672,6 +2680,13 @@ var Iti = class {
|
|
|
2672
2680
|
this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
|
|
2673
2681
|
}
|
|
2674
2682
|
this.telInput.removeAttribute("data-intl-tel-input-id");
|
|
2683
|
+
if (separateDialCode) {
|
|
2684
|
+
if (this.isRTL) {
|
|
2685
|
+
this.telInput.style.paddingRight = this.originalPaddingRight;
|
|
2686
|
+
} else {
|
|
2687
|
+
this.telInput.style.paddingLeft = this.originalPaddingLeft;
|
|
2688
|
+
}
|
|
2689
|
+
}
|
|
2675
2690
|
const wrapper = this.telInput.parentNode;
|
|
2676
2691
|
wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
|
|
2677
2692
|
wrapper?.parentNode?.removeChild(wrapper);
|
|
@@ -2804,7 +2819,7 @@ var intlTelInput = Object.assign(
|
|
|
2804
2819
|
//* A map from instance ID to instance object.
|
|
2805
2820
|
instances: {},
|
|
2806
2821
|
loadUtils,
|
|
2807
|
-
version: "23.4.
|
|
2822
|
+
version: "23.4.1"
|
|
2808
2823
|
}
|
|
2809
2824
|
);
|
|
2810
2825
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -1495,6 +1495,13 @@ var Iti = class {
|
|
|
1495
1495
|
}
|
|
1496
1496
|
this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
1497
1497
|
this.isRTL = !!this.telInput.closest("[dir=rtl]");
|
|
1498
|
+
if (this.options.separateDialCode) {
|
|
1499
|
+
if (this.isRTL) {
|
|
1500
|
+
this.originalPaddingRight = this.telInput.style.paddingRight;
|
|
1501
|
+
} else {
|
|
1502
|
+
this.originalPaddingLeft = this.telInput.style.paddingLeft;
|
|
1503
|
+
}
|
|
1504
|
+
}
|
|
1498
1505
|
this.options.i18n = { ...en_default, ...this.options.i18n };
|
|
1499
1506
|
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
1500
1507
|
this.resolveAutoCountryPromise = resolve;
|
|
@@ -2612,7 +2619,8 @@ var Iti = class {
|
|
|
2612
2619
|
//********************
|
|
2613
2620
|
//* Remove plugin.
|
|
2614
2621
|
destroy() {
|
|
2615
|
-
|
|
2622
|
+
const { allowDropdown, separateDialCode } = this.options;
|
|
2623
|
+
if (allowDropdown) {
|
|
2616
2624
|
this._closeDropdown();
|
|
2617
2625
|
this.selectedCountry.removeEventListener(
|
|
2618
2626
|
"click",
|
|
@@ -2636,6 +2644,13 @@ var Iti = class {
|
|
|
2636
2644
|
this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
|
|
2637
2645
|
}
|
|
2638
2646
|
this.telInput.removeAttribute("data-intl-tel-input-id");
|
|
2647
|
+
if (separateDialCode) {
|
|
2648
|
+
if (this.isRTL) {
|
|
2649
|
+
this.telInput.style.paddingRight = this.originalPaddingRight;
|
|
2650
|
+
} else {
|
|
2651
|
+
this.telInput.style.paddingLeft = this.originalPaddingLeft;
|
|
2652
|
+
}
|
|
2653
|
+
}
|
|
2639
2654
|
const wrapper = this.telInput.parentNode;
|
|
2640
2655
|
wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
|
|
2641
2656
|
wrapper?.parentNode?.removeChild(wrapper);
|
|
@@ -2768,7 +2783,7 @@ var intlTelInput = Object.assign(
|
|
|
2768
2783
|
//* A map from instance ID to instance object.
|
|
2769
2784
|
instances: {},
|
|
2770
2785
|
loadUtils,
|
|
2771
|
-
version: "23.4.
|
|
2786
|
+
version: "23.4.1"
|
|
2772
2787
|
}
|
|
2773
2788
|
);
|
|
2774
2789
|
var intl_tel_input_default = intlTelInput;
|