@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,13 +2,14 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Directive, Injectable, Component, Input, ViewChild, 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 * as i1 from '@ionic/angular';
|
|
7
7
|
import { IonicModule } from '@ionic/angular';
|
|
8
8
|
import * as i2 from '@angular/common';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
10
10
|
import * as i3 from '@angular/cdk/scrolling';
|
|
11
11
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
12
|
+
import examples from 'libphonenumber-js/mobile/examples';
|
|
12
13
|
|
|
13
14
|
class IonIntlTelInputValidators {
|
|
14
15
|
static phone(control) {
|
|
@@ -16,8 +17,8 @@ class IonIntlTelInputValidators {
|
|
|
16
17
|
let phoneNumber;
|
|
17
18
|
if (typeof control.value === 'string') {
|
|
18
19
|
try {
|
|
19
|
-
phoneNumber =
|
|
20
|
-
if (
|
|
20
|
+
phoneNumber = parsePhoneNumber(control.value);
|
|
21
|
+
if (phoneNumber.isValid()) {
|
|
21
22
|
return null;
|
|
22
23
|
}
|
|
23
24
|
}
|
|
@@ -29,8 +30,8 @@ class IonIntlTelInputValidators {
|
|
|
29
30
|
// If failed to parse, try adding a +1 and see if valid
|
|
30
31
|
if (control.value.length >= 10 && control.value.indexOf('+') === -1) {
|
|
31
32
|
const v = '+1' + control.value;
|
|
32
|
-
phoneNumber =
|
|
33
|
-
if (
|
|
33
|
+
phoneNumber = parsePhoneNumber(v);
|
|
34
|
+
if (phoneNumber.isValid()) {
|
|
34
35
|
return null;
|
|
35
36
|
}
|
|
36
37
|
}
|
|
@@ -2402,10 +2403,10 @@ class IonIntTelCodeComponent {
|
|
|
2402
2403
|
}
|
|
2403
2404
|
}
|
|
2404
2405
|
/** @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 });
|
|
2405
|
-
/** @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
|
|
2406
|
+
/** @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"] }] });
|
|
2406
2407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntTelCodeComponent, decorators: [{
|
|
2407
2408
|
type: Component,
|
|
2408
|
-
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
|
|
2409
|
+
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" }]
|
|
2409
2410
|
}], ctorParameters: function () { return [{ type: i1.ModalController }]; }, propDecorators: { country: [{
|
|
2410
2411
|
type: Input
|
|
2411
2412
|
}], canSearch: [{
|
|
@@ -2436,10 +2437,9 @@ class CountryPlaceholder {
|
|
|
2436
2437
|
if (inputPlaceholder && inputPlaceholder.length > 0) {
|
|
2437
2438
|
return inputPlaceholder;
|
|
2438
2439
|
}
|
|
2439
|
-
const phoneUtil = PhoneNumberUtil.getInstance();
|
|
2440
2440
|
try {
|
|
2441
|
-
const example =
|
|
2442
|
-
let placeholder =
|
|
2441
|
+
const example = getExampleNumber(country.isoCode, examples);
|
|
2442
|
+
let placeholder = example.formatInternational();
|
|
2443
2443
|
if (usePatternPlaceholder) {
|
|
2444
2444
|
const dc = placeholder.substring(0, placeholder.indexOf(' '));
|
|
2445
2445
|
placeholder = placeholder.substring(placeholder.indexOf(' ') + 1);
|
|
@@ -2447,7 +2447,7 @@ class CountryPlaceholder {
|
|
|
2447
2447
|
}
|
|
2448
2448
|
if (placeholder) {
|
|
2449
2449
|
if (separateDialCode) {
|
|
2450
|
-
return placeholder.
|
|
2450
|
+
return placeholder.substring(placeholder.indexOf(' ') + 1);
|
|
2451
2451
|
}
|
|
2452
2452
|
else {
|
|
2453
2453
|
return placeholder;
|
|
@@ -2733,7 +2733,6 @@ class IonIntlTelInputComponent {
|
|
|
2733
2733
|
this.phoneNumber = '';
|
|
2734
2734
|
this.countries = [];
|
|
2735
2735
|
this.disabled = false;
|
|
2736
|
-
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
2737
2736
|
this.onTouched = () => { };
|
|
2738
2737
|
this.propagateChange = (_) => { };
|
|
2739
2738
|
this.startsWith = (input, search) => {
|
|
@@ -2845,7 +2844,7 @@ class IonIntlTelInputComponent {
|
|
|
2845
2844
|
if (value && typeof value === 'string') {
|
|
2846
2845
|
let googleNumber;
|
|
2847
2846
|
try {
|
|
2848
|
-
googleNumber =
|
|
2847
|
+
googleNumber = parsePhoneNumber(value);
|
|
2849
2848
|
}
|
|
2850
2849
|
catch (e) {
|
|
2851
2850
|
}
|
|
@@ -2853,15 +2852,15 @@ class IonIntlTelInputComponent {
|
|
|
2853
2852
|
// If failed to parse, try adding a +1 and see if valid
|
|
2854
2853
|
if (value.length >= 10 && value.indexOf('+') === -1) {
|
|
2855
2854
|
const v = '+1' + value;
|
|
2856
|
-
googleNumber =
|
|
2855
|
+
googleNumber = parsePhoneNumber(v);
|
|
2857
2856
|
}
|
|
2858
2857
|
}
|
|
2859
2858
|
if (!googleNumber) {
|
|
2860
2859
|
console.log('Warning: failed to parse number: ', value);
|
|
2861
2860
|
}
|
|
2862
2861
|
if (googleNumber) {
|
|
2863
|
-
let isoCode = googleNumber && googleNumber.
|
|
2864
|
-
?
|
|
2862
|
+
let isoCode = googleNumber && googleNumber.country
|
|
2863
|
+
? googleNumber.country
|
|
2865
2864
|
: this.country.isoCode;
|
|
2866
2865
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2867
2866
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -2870,7 +2869,7 @@ class IonIntlTelInputComponent {
|
|
|
2870
2869
|
}
|
|
2871
2870
|
}
|
|
2872
2871
|
isoCode = isoCode ? isoCode : this.country ? this.country.isoCode : null;
|
|
2873
|
-
const internationallNo =
|
|
2872
|
+
const internationallNo = googleNumber.formatInternational();
|
|
2874
2873
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
2875
2874
|
this.value = internationallNo;
|
|
2876
2875
|
}
|
|
@@ -2916,14 +2915,14 @@ class IonIntlTelInputComponent {
|
|
|
2916
2915
|
else {
|
|
2917
2916
|
let googleNumber;
|
|
2918
2917
|
try {
|
|
2919
|
-
googleNumber =
|
|
2918
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2920
2919
|
}
|
|
2921
2920
|
catch (e) { }
|
|
2922
2921
|
const internationallNo = googleNumber
|
|
2923
|
-
?
|
|
2922
|
+
? googleNumber.formatInternational()
|
|
2924
2923
|
: '';
|
|
2925
2924
|
const nationalNo = googleNumber
|
|
2926
|
-
?
|
|
2925
|
+
? googleNumber.formatNational()
|
|
2927
2926
|
: '';
|
|
2928
2927
|
if (this.separateDialCode && internationallNo) {
|
|
2929
2928
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
@@ -2976,7 +2975,7 @@ class IonIntlTelInputComponent {
|
|
|
2976
2975
|
}
|
|
2977
2976
|
let googleNumber;
|
|
2978
2977
|
try {
|
|
2979
|
-
googleNumber =
|
|
2978
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2980
2979
|
}
|
|
2981
2980
|
catch (e) {
|
|
2982
2981
|
return;
|
|
@@ -2985,8 +2984,8 @@ class IonIntlTelInputComponent {
|
|
|
2985
2984
|
// auto select country based on the extension (and areaCode if needed) (e.g select Canada if number starts with +1 416)
|
|
2986
2985
|
if (this.enableAutoCountrySelect) {
|
|
2987
2986
|
isoCode =
|
|
2988
|
-
googleNumber && googleNumber.
|
|
2989
|
-
?
|
|
2987
|
+
googleNumber && googleNumber.country
|
|
2988
|
+
? googleNumber.country
|
|
2990
2989
|
: this.country.isoCode;
|
|
2991
2990
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2992
2991
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -3001,10 +3000,10 @@ class IonIntlTelInputComponent {
|
|
|
3001
3000
|
}
|
|
3002
3001
|
else {
|
|
3003
3002
|
const internationallNo = googleNumber
|
|
3004
|
-
?
|
|
3003
|
+
? googleNumber.formatInternational()
|
|
3005
3004
|
: '';
|
|
3006
3005
|
const nationalNo = googleNumber
|
|
3007
|
-
?
|
|
3006
|
+
? googleNumber.formatNational()
|
|
3008
3007
|
: '';
|
|
3009
3008
|
if (this.separateDialCode && internationallNo) {
|
|
3010
3009
|
this.phoneNumber = this.removeDialCode(internationallNo);
|