@crodriguezdominguez/ion-intl-tel-input 2.0.4 → 2.1.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/crodriguezdominguez-ion-intl-tel-input-2.1.0.tgz +0 -0
- package/esm2020/lib/ion-intl-tel-input/ion-intl-tel-code.component.mjs +3 -3
- package/esm2020/lib/ion-intl-tel-input/ion-intl-tel-input.component.mjs +15 -16
- package/esm2020/lib/ion-intl-tel-input.directive.mjs +6 -6
- package/esm2020/lib/pipes/country-placeholder.mjs +6 -6
- package/fesm2015/crodriguezdominguez-ion-intl-tel-input.mjs +24 -25
- package/fesm2015/crodriguezdominguez-ion-intl-tel-input.mjs.map +1 -1
- package/fesm2020/crodriguezdominguez-ion-intl-tel-input.mjs +24 -25
- package/fesm2020/crodriguezdominguez-ion-intl-tel-input.mjs.map +1 -1
- package/lib/ion-intl-tel-input/ion-intl-tel-input.component.d.ts +0 -1
- package/package.json +3 -3
- package/crodriguezdominguez-ion-intl-tel-input-2.0.4.tgz +0 -0
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Directive, Component, Input, ViewChild, Injectable, Pipe, EventEmitter, forwardRef, HostBinding, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i4 from '@angular/forms';
|
|
4
4
|
import { NG_VALIDATORS, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
5
|
-
import {
|
|
5
|
+
import { parsePhoneNumber, getExampleNumber } from 'libphonenumber-js';
|
|
6
6
|
import { __awaiter } from 'tslib';
|
|
7
7
|
import * as i1 from '@ionic/angular';
|
|
8
8
|
import { IonicModule } from '@ionic/angular';
|
|
@@ -10,6 +10,7 @@ import * as i2 from '@angular/common';
|
|
|
10
10
|
import { CommonModule } from '@angular/common';
|
|
11
11
|
import * as i3 from '@angular/cdk/scrolling';
|
|
12
12
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
13
|
+
import examples from 'libphonenumber-js/mobile/examples';
|
|
13
14
|
|
|
14
15
|
class IonIntlTelInputValidators {
|
|
15
16
|
static phone(control) {
|
|
@@ -17,8 +18,8 @@ class IonIntlTelInputValidators {
|
|
|
17
18
|
let phoneNumber;
|
|
18
19
|
if (typeof control.value === 'string') {
|
|
19
20
|
try {
|
|
20
|
-
phoneNumber =
|
|
21
|
-
if (
|
|
21
|
+
phoneNumber = parsePhoneNumber(control.value);
|
|
22
|
+
if (phoneNumber.isValid()) {
|
|
22
23
|
return null;
|
|
23
24
|
}
|
|
24
25
|
}
|
|
@@ -30,8 +31,8 @@ class IonIntlTelInputValidators {
|
|
|
30
31
|
// If failed to parse, try adding a +1 and see if valid
|
|
31
32
|
if (control.value.length >= 10 && control.value.indexOf('+') === -1) {
|
|
32
33
|
const v = '+1' + control.value;
|
|
33
|
-
phoneNumber =
|
|
34
|
-
if (
|
|
34
|
+
phoneNumber = parsePhoneNumber(v);
|
|
35
|
+
if (phoneNumber.isValid()) {
|
|
35
36
|
return null;
|
|
36
37
|
}
|
|
37
38
|
}
|
|
@@ -123,10 +124,10 @@ class IonIntTelCodeComponent {
|
|
|
123
124
|
}
|
|
124
125
|
}
|
|
125
126
|
/** @nocollapse */ IonIntTelCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntTelCodeComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
|
|
126
|
-
/** @nocollapse */ IonIntTelCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IonIntTelCodeComponent, selector: "ion-intl-tel-code", inputs: { country: "country", canSearch: "canSearch", closeButtonText: "closeButtonText", closeButtonSlot: "closeButtonSlot", countries: "countries", searchFailText: "searchFailText", searchPlaceholder: "searchPlaceholder", shouldFocusSearchbar: "shouldFocusSearchbar", title: "title", dialCode: "dialCode" }, viewQueries: [{ propertyName: "sbar", first: true, predicate: ["searchBar"], descendants: true }], ngImport: i0, template: "<ion-header>\n <ion-toolbar>\n <ion-title class=\"ion-text-center\">\n {{title}}\n </ion-title>\n\n <ion-buttons [slot]=\"closeButtonSlot\">\n <ion-button
|
|
127
|
+
/** @nocollapse */ IonIntTelCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IonIntTelCodeComponent, selector: "ion-intl-tel-code", inputs: { country: "country", canSearch: "canSearch", closeButtonText: "closeButtonText", closeButtonSlot: "closeButtonSlot", countries: "countries", searchFailText: "searchFailText", searchPlaceholder: "searchPlaceholder", shouldFocusSearchbar: "shouldFocusSearchbar", title: "title", dialCode: "dialCode" }, viewQueries: [{ propertyName: "sbar", first: true, predicate: ["searchBar"], descendants: true }], ngImport: i0, template: "<ion-header>\n <ion-toolbar>\n <ion-title class=\"ion-text-center\">\n {{title}}\n </ion-title>\n\n <ion-buttons [slot]=\"closeButtonSlot\">\n <ion-button (click)=\"closeModal()\">{{closeButtonText}}</ion-button>\n </ion-buttons>\n\n </ion-toolbar>\n <ion-searchbar #searchBar *ngIf=\"canSearch\" placeholder=\"{{searchPlaceholder}}\" [debounce]=\"400\"\n (keyup.enter)=\"$event.target.blur()\" (ionChange)=\"search($event)\"></ion-searchbar>\n</ion-header>\n\n<ion-content>\n <cdk-virtual-scroll-viewport style=\"width: 100%; height: 100%;\" itemSize=\"56\" minBufferPx=\"900\" maxBufferPx=\"1350\">\n <ion-list>\n <ion-radio-group [value]=\"country.isoCode\">\n <ion-item style=\"white-space:normal\" *cdkVirtualFor=\"let c of countries\">\n <ion-radio labelPlacement=\"end\" [value]=\"c.isoCode\" slot=\"start\" color=\"primary\" (click)=\"itemTapped(c)\">\n <span class=\"fi fi-{{c.flagClass}}\"></span> {{c.name}} <span *ngIf=\"dialCode\">{{dialCode}}{{c.displayDialCode}}</span>\n </ion-radio>\n </ion-item>\n </ion-radio-group>\n <ion-item lines=\"none\" *ngIf=\"notFound\">\n <ion-text>{{searchFailText}}</ion-text>\n </ion-item>\n </ion-list>\n </cdk-virtual-scroll-viewport>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonRadio, selector: "ion-radio", inputs: ["color", "disabled", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.RadioValueAccessor, selector: "ion-radio" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
|
|
127
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntTelCodeComponent, decorators: [{
|
|
128
129
|
type: Component,
|
|
129
|
-
args: [{ selector: 'ion-intl-tel-code', template: "<ion-header>\n <ion-toolbar>\n <ion-title class=\"ion-text-center\">\n {{title}}\n </ion-title>\n\n <ion-buttons [slot]=\"closeButtonSlot\">\n <ion-button
|
|
130
|
+
args: [{ selector: 'ion-intl-tel-code', template: "<ion-header>\n <ion-toolbar>\n <ion-title class=\"ion-text-center\">\n {{title}}\n </ion-title>\n\n <ion-buttons [slot]=\"closeButtonSlot\">\n <ion-button (click)=\"closeModal()\">{{closeButtonText}}</ion-button>\n </ion-buttons>\n\n </ion-toolbar>\n <ion-searchbar #searchBar *ngIf=\"canSearch\" placeholder=\"{{searchPlaceholder}}\" [debounce]=\"400\"\n (keyup.enter)=\"$event.target.blur()\" (ionChange)=\"search($event)\"></ion-searchbar>\n</ion-header>\n\n<ion-content>\n <cdk-virtual-scroll-viewport style=\"width: 100%; height: 100%;\" itemSize=\"56\" minBufferPx=\"900\" maxBufferPx=\"1350\">\n <ion-list>\n <ion-radio-group [value]=\"country.isoCode\">\n <ion-item style=\"white-space:normal\" *cdkVirtualFor=\"let c of countries\">\n <ion-radio labelPlacement=\"end\" [value]=\"c.isoCode\" slot=\"start\" color=\"primary\" (click)=\"itemTapped(c)\">\n <span class=\"fi fi-{{c.flagClass}}\"></span> {{c.name}} <span *ngIf=\"dialCode\">{{dialCode}}{{c.displayDialCode}}</span>\n </ion-radio>\n </ion-item>\n </ion-radio-group>\n <ion-item lines=\"none\" *ngIf=\"notFound\">\n <ion-text>{{searchFailText}}</ion-text>\n </ion-item>\n </ion-list>\n </cdk-virtual-scroll-viewport>\n</ion-content>\n" }]
|
|
130
131
|
}], ctorParameters: function () { return [{ type: i1.ModalController }]; }, propDecorators: { country: [{
|
|
131
132
|
type: Input
|
|
132
133
|
}], canSearch: [{
|
|
@@ -2437,10 +2438,9 @@ class CountryPlaceholder {
|
|
|
2437
2438
|
if (inputPlaceholder && inputPlaceholder.length > 0) {
|
|
2438
2439
|
return inputPlaceholder;
|
|
2439
2440
|
}
|
|
2440
|
-
const phoneUtil = PhoneNumberUtil.getInstance();
|
|
2441
2441
|
try {
|
|
2442
|
-
const example =
|
|
2443
|
-
let placeholder =
|
|
2442
|
+
const example = getExampleNumber(country.isoCode, examples);
|
|
2443
|
+
let placeholder = example.formatInternational();
|
|
2444
2444
|
if (usePatternPlaceholder) {
|
|
2445
2445
|
const dc = placeholder.substring(0, placeholder.indexOf(' '));
|
|
2446
2446
|
placeholder = placeholder.substring(placeholder.indexOf(' ') + 1);
|
|
@@ -2448,7 +2448,7 @@ class CountryPlaceholder {
|
|
|
2448
2448
|
}
|
|
2449
2449
|
if (placeholder) {
|
|
2450
2450
|
if (separateDialCode) {
|
|
2451
|
-
return placeholder.
|
|
2451
|
+
return placeholder.substring(placeholder.indexOf(' ') + 1);
|
|
2452
2452
|
}
|
|
2453
2453
|
else {
|
|
2454
2454
|
return placeholder;
|
|
@@ -2734,7 +2734,6 @@ class IonIntlTelInputComponent {
|
|
|
2734
2734
|
this.phoneNumber = '';
|
|
2735
2735
|
this.countries = [];
|
|
2736
2736
|
this.disabled = false;
|
|
2737
|
-
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
2738
2737
|
this.onTouched = () => { };
|
|
2739
2738
|
this.propagateChange = (_) => { };
|
|
2740
2739
|
this.startsWith = (input, search) => {
|
|
@@ -2846,7 +2845,7 @@ class IonIntlTelInputComponent {
|
|
|
2846
2845
|
if (value && typeof value === 'string') {
|
|
2847
2846
|
let googleNumber;
|
|
2848
2847
|
try {
|
|
2849
|
-
googleNumber =
|
|
2848
|
+
googleNumber = parsePhoneNumber(value);
|
|
2850
2849
|
}
|
|
2851
2850
|
catch (e) {
|
|
2852
2851
|
}
|
|
@@ -2854,15 +2853,15 @@ class IonIntlTelInputComponent {
|
|
|
2854
2853
|
// If failed to parse, try adding a +1 and see if valid
|
|
2855
2854
|
if (value.length >= 10 && value.indexOf('+') === -1) {
|
|
2856
2855
|
const v = '+1' + value;
|
|
2857
|
-
googleNumber =
|
|
2856
|
+
googleNumber = parsePhoneNumber(v);
|
|
2858
2857
|
}
|
|
2859
2858
|
}
|
|
2860
2859
|
if (!googleNumber) {
|
|
2861
2860
|
console.log('Warning: failed to parse number: ', value);
|
|
2862
2861
|
}
|
|
2863
2862
|
if (googleNumber) {
|
|
2864
|
-
let isoCode = googleNumber && googleNumber.
|
|
2865
|
-
?
|
|
2863
|
+
let isoCode = googleNumber && googleNumber.country
|
|
2864
|
+
? googleNumber.country
|
|
2866
2865
|
: this.country.isoCode;
|
|
2867
2866
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2868
2867
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -2871,7 +2870,7 @@ class IonIntlTelInputComponent {
|
|
|
2871
2870
|
}
|
|
2872
2871
|
}
|
|
2873
2872
|
isoCode = isoCode ? isoCode : this.country ? this.country.isoCode : null;
|
|
2874
|
-
const internationallNo =
|
|
2873
|
+
const internationallNo = googleNumber.formatInternational();
|
|
2875
2874
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
2876
2875
|
this.value = internationallNo;
|
|
2877
2876
|
}
|
|
@@ -2919,14 +2918,14 @@ class IonIntlTelInputComponent {
|
|
|
2919
2918
|
else {
|
|
2920
2919
|
let googleNumber;
|
|
2921
2920
|
try {
|
|
2922
|
-
googleNumber =
|
|
2921
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2923
2922
|
}
|
|
2924
2923
|
catch (e) { }
|
|
2925
2924
|
const internationallNo = googleNumber
|
|
2926
|
-
?
|
|
2925
|
+
? googleNumber.formatInternational()
|
|
2927
2926
|
: '';
|
|
2928
2927
|
const nationalNo = googleNumber
|
|
2929
|
-
?
|
|
2928
|
+
? googleNumber.formatNational()
|
|
2930
2929
|
: '';
|
|
2931
2930
|
if (this.separateDialCode && internationallNo) {
|
|
2932
2931
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
@@ -2979,7 +2978,7 @@ class IonIntlTelInputComponent {
|
|
|
2979
2978
|
}
|
|
2980
2979
|
let googleNumber;
|
|
2981
2980
|
try {
|
|
2982
|
-
googleNumber =
|
|
2981
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2983
2982
|
}
|
|
2984
2983
|
catch (e) {
|
|
2985
2984
|
return;
|
|
@@ -2988,8 +2987,8 @@ class IonIntlTelInputComponent {
|
|
|
2988
2987
|
// auto select country based on the extension (and areaCode if needed) (e.g select Canada if number starts with +1 416)
|
|
2989
2988
|
if (this.enableAutoCountrySelect) {
|
|
2990
2989
|
isoCode =
|
|
2991
|
-
googleNumber && googleNumber.
|
|
2992
|
-
?
|
|
2990
|
+
googleNumber && googleNumber.country
|
|
2991
|
+
? googleNumber.country
|
|
2993
2992
|
: this.country.isoCode;
|
|
2994
2993
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2995
2994
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -3004,10 +3003,10 @@ class IonIntlTelInputComponent {
|
|
|
3004
3003
|
}
|
|
3005
3004
|
else {
|
|
3006
3005
|
const internationallNo = googleNumber
|
|
3007
|
-
?
|
|
3006
|
+
? googleNumber.formatInternational()
|
|
3008
3007
|
: '';
|
|
3009
3008
|
const nationalNo = googleNumber
|
|
3010
|
-
?
|
|
3009
|
+
? googleNumber.formatNational()
|
|
3011
3010
|
: '';
|
|
3012
3011
|
if (this.separateDialCode && internationallNo) {
|
|
3013
3012
|
this.phoneNumber = this.removeDialCode(internationallNo);
|