@crodriguezdominguez/ion-intl-tel-input 2.0.5 → 2.1.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/crodriguezdominguez-ion-intl-tel-input-2.1.1.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 +24 -19
- 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 +33 -28
- package/fesm2015/crodriguezdominguez-ion-intl-tel-input.mjs.map +1 -1
- package/fesm2020/crodriguezdominguez-ion-intl-tel-input.mjs +33 -28
- package/fesm2020/crodriguezdominguez-ion-intl-tel-input.mjs.map +1 -1
- package/lib/ion-intl-tel-input/ion-intl-tel-input.component.d.ts +3 -2
- package/package.json +3 -3
- package/crodriguezdominguez-ion-intl-tel-input-2.0.5.tgz +0 -0
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { Pipe } from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { getExampleNumber } from 'libphonenumber-js';
|
|
3
|
+
import examples from 'libphonenumber-js/mobile/examples';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
export class CountryPlaceholder {
|
|
5
6
|
transform(country, inputPlaceholder, separateDialCode, fallbackPlaceholder, usePatternPlaceholder) {
|
|
6
7
|
if (inputPlaceholder && inputPlaceholder.length > 0) {
|
|
7
8
|
return inputPlaceholder;
|
|
8
9
|
}
|
|
9
|
-
const phoneUtil = PhoneNumberUtil.getInstance();
|
|
10
10
|
try {
|
|
11
|
-
const example =
|
|
12
|
-
let placeholder =
|
|
11
|
+
const example = getExampleNumber(country.isoCode, examples);
|
|
12
|
+
let placeholder = example.formatInternational();
|
|
13
13
|
if (usePatternPlaceholder) {
|
|
14
14
|
const dc = placeholder.substring(0, placeholder.indexOf(' '));
|
|
15
15
|
placeholder = placeholder.substring(placeholder.indexOf(' ') + 1);
|
|
@@ -17,7 +17,7 @@ export class CountryPlaceholder {
|
|
|
17
17
|
}
|
|
18
18
|
if (placeholder) {
|
|
19
19
|
if (separateDialCode) {
|
|
20
|
-
return placeholder.
|
|
20
|
+
return placeholder.substring(placeholder.indexOf(' ') + 1);
|
|
21
21
|
}
|
|
22
22
|
else {
|
|
23
23
|
return placeholder;
|
|
@@ -35,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
35
35
|
type: Pipe,
|
|
36
36
|
args: [{ name: 'countryPlaceholder' }]
|
|
37
37
|
}] });
|
|
38
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY291bnRyeS1wbGFjZWhvbGRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lvbi1pbnRsLXRlbC1pbnB1dC9zcmMvbGliL3BpcGVzL2NvdW50cnktcGxhY2Vob2xkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFFcEQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sbUJBQW1CLENBQUM7QUFDbkQsT0FBTyxRQUFRLE1BQU0sbUNBQW1DLENBQUM7O0FBR3pELE1BQU0sT0FBTyxrQkFBa0I7SUFDN0IsU0FBUyxDQUFDLE9BQWlCLEVBQUUsZ0JBQXdCLEVBQzNDLGdCQUF5QixFQUFFLG1CQUEyQixFQUN0RCxxQkFBOEI7UUFDdEMsSUFBSSxnQkFBZ0IsSUFBSSxnQkFBZ0IsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ25ELE9BQU8sZ0JBQWdCLENBQUM7U0FDekI7UUFFRCxJQUFJO1lBRUYsTUFBTSxPQUFPLEdBQUcsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLE9BQWMsRUFBRSxRQUFRLENBQUMsQ0FBQztZQUNuRSxJQUFJLFdBQVcsR0FBRyxPQUFPLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUVoRCxJQUFJLHFCQUFxQixFQUFFO2dCQUN6QixNQUFNLEVBQUUsR0FBRyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxXQUFXLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7Z0JBQzlELFdBQVcsR0FBRyxXQUFXLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7Z0JBQ2xFLFdBQVcsR0FBRyxFQUFFLEdBQUcsR0FBRyxHQUFHLFdBQVcsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDO2FBQzFEO1lBQ0QsSUFBSSxXQUFXLEVBQUU7Z0JBQ2YsSUFBSSxnQkFBZ0IsRUFBRTtvQkFDcEIsT0FBTyxXQUFXLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7aUJBQzVEO3FCQUFNO29CQUNMLE9BQU8sV0FBVyxDQUFDO2lCQUNwQjthQUNGO1NBQ0Y7UUFBQyxPQUFPLENBQUMsRUFBRTtZQUNWLE9BQU8sbUJBQW1CLENBQUM7U0FDNUI7SUFDSCxDQUFDOztrSUE1QlUsa0JBQWtCO2dJQUFsQixrQkFBa0I7MkZBQWxCLGtCQUFrQjtrQkFEOUIsSUFBSTttQkFBQyxFQUFFLElBQUksRUFBRSxvQkFBb0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvdW50cnlJIH0gZnJvbSAnLi4vbW9kZWxzL2NvdW50cnkubW9kZWwnO1xuaW1wb3J0IHtnZXRFeGFtcGxlTnVtYmVyfSBmcm9tICdsaWJwaG9uZW51bWJlci1qcyc7XG5pbXBvcnQgZXhhbXBsZXMgZnJvbSAnbGlicGhvbmVudW1iZXItanMvbW9iaWxlL2V4YW1wbGVzJztcblxuQFBpcGUoeyBuYW1lOiAnY291bnRyeVBsYWNlaG9sZGVyJyB9KVxuZXhwb3J0IGNsYXNzIENvdW50cnlQbGFjZWhvbGRlciBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xuICB0cmFuc2Zvcm0oY291bnRyeTogQ291bnRyeUksIGlucHV0UGxhY2Vob2xkZXI6IHN0cmluZyxcbiAgICAgICAgICAgIHNlcGFyYXRlRGlhbENvZGU6IGJvb2xlYW4sIGZhbGxiYWNrUGxhY2Vob2xkZXI6IHN0cmluZyxcbiAgICAgICAgICAgIHVzZVBhdHRlcm5QbGFjZWhvbGRlcjogYm9vbGVhbik6IHN0cmluZyB7XG4gICAgaWYgKGlucHV0UGxhY2Vob2xkZXIgJiYgaW5wdXRQbGFjZWhvbGRlci5sZW5ndGggPiAwKSB7XG4gICAgICByZXR1cm4gaW5wdXRQbGFjZWhvbGRlcjtcbiAgICB9XG5cbiAgICB0cnkge1xuXG4gICAgICBjb25zdCBleGFtcGxlID0gZ2V0RXhhbXBsZU51bWJlcihjb3VudHJ5Lmlzb0NvZGUgYXMgYW55LCBleGFtcGxlcyk7XG4gICAgICBsZXQgcGxhY2Vob2xkZXIgPSBleGFtcGxlLmZvcm1hdEludGVybmF0aW9uYWwoKTtcblxuICAgICAgaWYgKHVzZVBhdHRlcm5QbGFjZWhvbGRlcikge1xuICAgICAgICBjb25zdCBkYyA9IHBsYWNlaG9sZGVyLnN1YnN0cmluZygwLCBwbGFjZWhvbGRlci5pbmRleE9mKCcgJykpO1xuICAgICAgICBwbGFjZWhvbGRlciA9IHBsYWNlaG9sZGVyLnN1YnN0cmluZyhwbGFjZWhvbGRlci5pbmRleE9mKCcgJykgKyAxKTtcbiAgICAgICAgcGxhY2Vob2xkZXIgPSBkYyArICcgJyArIHBsYWNlaG9sZGVyLnJlcGxhY2UoL1xcZC9nLCAneCcpO1xuICAgICAgfVxuICAgICAgaWYgKHBsYWNlaG9sZGVyKSB7XG4gICAgICAgIGlmIChzZXBhcmF0ZURpYWxDb2RlKSB7XG4gICAgICAgICAgcmV0dXJuIHBsYWNlaG9sZGVyLnN1YnN0cmluZyhwbGFjZWhvbGRlci5pbmRleE9mKCcgJykgKyAxKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICByZXR1cm4gcGxhY2Vob2xkZXI7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9IGNhdGNoIChlKSB7XG4gICAgICByZXR1cm4gZmFsbGJhY2tQbGFjZWhvbGRlcjtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
|
|
@@ -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;
|
|
@@ -2551,6 +2551,8 @@ class IonIntlTelInputComponent {
|
|
|
2551
2551
|
* @memberof IonIntlTelInputComponent
|
|
2552
2552
|
*/
|
|
2553
2553
|
this.inputPlaceholder = '';
|
|
2554
|
+
this.inputLabel = '';
|
|
2555
|
+
this.inputLabelPlacement = '';
|
|
2554
2556
|
/**
|
|
2555
2557
|
* Instead of an example phone number, use a x pattern. Such as xxx-xxx-xxxx, this will be obtained
|
|
2556
2558
|
* based on the example number from the google phone lib.
|
|
@@ -2734,7 +2736,6 @@ class IonIntlTelInputComponent {
|
|
|
2734
2736
|
this.phoneNumber = '';
|
|
2735
2737
|
this.countries = [];
|
|
2736
2738
|
this.disabled = false;
|
|
2737
|
-
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
2738
2739
|
this.onTouched = () => { };
|
|
2739
2740
|
this.propagateChange = (_) => { };
|
|
2740
2741
|
this.startsWith = (input, search) => {
|
|
@@ -2846,7 +2847,7 @@ class IonIntlTelInputComponent {
|
|
|
2846
2847
|
if (value && typeof value === 'string') {
|
|
2847
2848
|
let googleNumber;
|
|
2848
2849
|
try {
|
|
2849
|
-
googleNumber =
|
|
2850
|
+
googleNumber = parsePhoneNumber(value);
|
|
2850
2851
|
}
|
|
2851
2852
|
catch (e) {
|
|
2852
2853
|
}
|
|
@@ -2854,15 +2855,15 @@ class IonIntlTelInputComponent {
|
|
|
2854
2855
|
// If failed to parse, try adding a +1 and see if valid
|
|
2855
2856
|
if (value.length >= 10 && value.indexOf('+') === -1) {
|
|
2856
2857
|
const v = '+1' + value;
|
|
2857
|
-
googleNumber =
|
|
2858
|
+
googleNumber = parsePhoneNumber(v);
|
|
2858
2859
|
}
|
|
2859
2860
|
}
|
|
2860
2861
|
if (!googleNumber) {
|
|
2861
2862
|
console.log('Warning: failed to parse number: ', value);
|
|
2862
2863
|
}
|
|
2863
2864
|
if (googleNumber) {
|
|
2864
|
-
let isoCode = googleNumber && googleNumber.
|
|
2865
|
-
?
|
|
2865
|
+
let isoCode = googleNumber && googleNumber.country
|
|
2866
|
+
? googleNumber.country
|
|
2866
2867
|
: this.country.isoCode;
|
|
2867
2868
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2868
2869
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -2871,7 +2872,7 @@ class IonIntlTelInputComponent {
|
|
|
2871
2872
|
}
|
|
2872
2873
|
}
|
|
2873
2874
|
isoCode = isoCode ? isoCode : this.country ? this.country.isoCode : null;
|
|
2874
|
-
const internationallNo =
|
|
2875
|
+
const internationallNo = googleNumber.formatInternational();
|
|
2875
2876
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
2876
2877
|
this.value = internationallNo;
|
|
2877
2878
|
}
|
|
@@ -2919,14 +2920,14 @@ class IonIntlTelInputComponent {
|
|
|
2919
2920
|
else {
|
|
2920
2921
|
let googleNumber;
|
|
2921
2922
|
try {
|
|
2922
|
-
googleNumber =
|
|
2923
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2923
2924
|
}
|
|
2924
2925
|
catch (e) { }
|
|
2925
2926
|
const internationallNo = googleNumber
|
|
2926
|
-
?
|
|
2927
|
+
? googleNumber.formatInternational()
|
|
2927
2928
|
: '';
|
|
2928
2929
|
const nationalNo = googleNumber
|
|
2929
|
-
?
|
|
2930
|
+
? googleNumber.formatNational()
|
|
2930
2931
|
: '';
|
|
2931
2932
|
if (this.separateDialCode && internationallNo) {
|
|
2932
2933
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
@@ -2979,7 +2980,7 @@ class IonIntlTelInputComponent {
|
|
|
2979
2980
|
}
|
|
2980
2981
|
let googleNumber;
|
|
2981
2982
|
try {
|
|
2982
|
-
googleNumber =
|
|
2983
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2983
2984
|
}
|
|
2984
2985
|
catch (e) {
|
|
2985
2986
|
return;
|
|
@@ -2988,8 +2989,8 @@ class IonIntlTelInputComponent {
|
|
|
2988
2989
|
// auto select country based on the extension (and areaCode if needed) (e.g select Canada if number starts with +1 416)
|
|
2989
2990
|
if (this.enableAutoCountrySelect) {
|
|
2990
2991
|
isoCode =
|
|
2991
|
-
googleNumber && googleNumber.
|
|
2992
|
-
?
|
|
2992
|
+
googleNumber && googleNumber.country
|
|
2993
|
+
? googleNumber.country
|
|
2993
2994
|
: this.country.isoCode;
|
|
2994
2995
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2995
2996
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -3004,10 +3005,10 @@ class IonIntlTelInputComponent {
|
|
|
3004
3005
|
}
|
|
3005
3006
|
else {
|
|
3006
3007
|
const internationallNo = googleNumber
|
|
3007
|
-
?
|
|
3008
|
+
? googleNumber.formatInternational()
|
|
3008
3009
|
: '';
|
|
3009
3010
|
const nationalNo = googleNumber
|
|
3010
|
-
?
|
|
3011
|
+
? googleNumber.formatNational()
|
|
3011
3012
|
: '';
|
|
3012
3013
|
if (this.separateDialCode && internationallNo) {
|
|
3013
3014
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
@@ -3099,13 +3100,13 @@ class IonIntlTelInputComponent {
|
|
|
3099
3100
|
}
|
|
3100
3101
|
}
|
|
3101
3102
|
/** @nocollapse */ IonIntlTelInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputComponent, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: IonIntlTelInputService }, { token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
|
|
3102
|
-
/** @nocollapse */ IonIntlTelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IonIntlTelInputComponent, selector: "ion-intl-tel-input", inputs: { isEnabled: "isEnabled", autocomplete: "autocomplete", required: "required", defaultCountryiso: "defaultCountryiso", dialCodePrefix: "dialCodePrefix", enableAutoCountrySelect: "enableAutoCountrySelect", enablePlaceholder: "enablePlaceholder", fallbackPlaceholder: "fallbackPlaceholder", inputPlaceholder: "inputPlaceholder", usePatternPlaceholder: "usePatternPlaceholder", maxLength: "maxLength", modalTitle: "modalTitle", modalCssClass: "modalCssClass", modalSearchPlaceholder: "modalSearchPlaceholder", modalCloseText: "modalCloseText", modalCloseButtonSlot: "modalCloseButtonSlot", modalCanSearch: "modalCanSearch", modalShouldBackdropClose: "modalShouldBackdropClose", modalShouldFocusSearchbar: "modalShouldFocusSearchbar", modalSearchFailText: "modalSearchFailText", onlyCountries: "onlyCountries", preferredCountries: "preferredCountries", selectFirstCountry: "selectFirstCountry", separateDialCode: "separateDialCode" }, outputs: { numberChange: "numberChange", numberBlur: "numberBlur", numberFocus: "numberFocus", numberInput: "numberInput", codeChange: "codeChange", codeOpen: "codeOpen", codeClose: "codeClose", codeSelect: "codeSelect" }, host: { properties: { "class.ion-intl-tel-input": "this.cssClass", "class.ion-intl-tel-input-ios": "this.isIos", "class.ion-intl-tel-input-md": "this.isMD", "class.has-focus": "this.hasFocus", "class.ion-intl-tel-input-has-value": "this.hasValueCssClass", "class.ion-intl-tel-input-is-enabled": "this.isEnabled" } }, providers: [
|
|
3103
|
+
/** @nocollapse */ IonIntlTelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IonIntlTelInputComponent, selector: "ion-intl-tel-input", inputs: { isEnabled: "isEnabled", autocomplete: "autocomplete", required: "required", defaultCountryiso: "defaultCountryiso", dialCodePrefix: "dialCodePrefix", enableAutoCountrySelect: "enableAutoCountrySelect", enablePlaceholder: "enablePlaceholder", fallbackPlaceholder: "fallbackPlaceholder", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputLabelPlacement: "inputLabelPlacement", usePatternPlaceholder: "usePatternPlaceholder", maxLength: "maxLength", modalTitle: "modalTitle", modalCssClass: "modalCssClass", modalSearchPlaceholder: "modalSearchPlaceholder", modalCloseText: "modalCloseText", modalCloseButtonSlot: "modalCloseButtonSlot", modalCanSearch: "modalCanSearch", modalShouldBackdropClose: "modalShouldBackdropClose", modalShouldFocusSearchbar: "modalShouldFocusSearchbar", modalSearchFailText: "modalSearchFailText", onlyCountries: "onlyCountries", preferredCountries: "preferredCountries", selectFirstCountry: "selectFirstCountry", separateDialCode: "separateDialCode" }, outputs: { numberChange: "numberChange", numberBlur: "numberBlur", numberFocus: "numberFocus", numberInput: "numberInput", codeChange: "codeChange", codeOpen: "codeOpen", codeClose: "codeClose", codeSelect: "codeSelect" }, host: { properties: { "class.ion-intl-tel-input": "this.cssClass", "class.ion-intl-tel-input-ios": "this.isIos", "class.ion-intl-tel-input-md": "this.isMD", "class.has-focus": "this.hasFocus", "class.ion-intl-tel-input-has-value": "this.hasValueCssClass", "class.ion-intl-tel-input-is-enabled": "this.isEnabled" } }, providers: [
|
|
3103
3104
|
{
|
|
3104
3105
|
provide: NG_VALUE_ACCESSOR,
|
|
3105
3106
|
useExisting: forwardRef((() => IonIntlTelInputComponent)),
|
|
3106
3107
|
multi: true,
|
|
3107
3108
|
},
|
|
3108
|
-
], viewQueries: [{ propertyName: "numberInputEl", first: true, predicate: ["numberInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<
|
|
3109
|
+
], viewQueries: [{ propertyName: "numberInputEl", first: true, predicate: ["numberInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ion-intl-tel-input-number\">\n <ion-input\n #numberInput\n [(ngModel)]=\"phoneNumber\"\n [autocomplete]=\"autocomplete\"\n [required]=\"required\"\n [disabled] = \"disabled\"\n [attr.maxLength]=\"maxLength\"\n type=\"tel\"\n [labelPlacement]=\"inputLabelPlacement\"\n (ionBlur)=\"onIonNumberBlur()\"\n (ionChange)=\"onIonNumberChange($event)\"\n (ionFocus)=\"onIonNumberFocus()\"\n (ionInput)=\"onIonNumberInput($event)\"\n (keydown)=\"onNumberKeyDown($event)\"\n (ngModelChange)=\"onNumberChange()\"\n placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\" >\n <div slot=\"label\">\n {{inputLabel}}\n \n <ion-button (click)=\"openModal()\"\n fill=\"clear\"\n class=\"ion-intl-tel-input-btn\"\n [disabled] = \"disabled\"\n aria-label=\"country\">\n <span class=\"ion-intl-tel-input-flag fi fi-{{country.flagClass}}\"></span><span class=\"ion-intl-tel-input-code\" *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.dialCode}}</span>\n <ion-icon style=\"font-size:14px;opacity:.5;\" name=\"caret-down\"></ion-icon>\n </ion-button>\n </div>\n </ion-input>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center}:host ion-button{color:var(--ion-color);height:100%;margin:0}:host ion-button::part(native){padding-inline-start:0;padding-inline-end:2px;margin:0;font-size:16px;font-weight:400}:host .fi{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "pipe", type: CountryPlaceholder, name: "countryPlaceholder" }] });
|
|
3109
3110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputComponent, decorators: [{
|
|
3110
3111
|
type: Component,
|
|
3111
3112
|
args: [{ selector: 'ion-intl-tel-input', providers: [
|
|
@@ -3114,7 +3115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3114
3115
|
useExisting: forwardRef((() => IonIntlTelInputComponent)),
|
|
3115
3116
|
multi: true,
|
|
3116
3117
|
},
|
|
3117
|
-
], template: "<
|
|
3118
|
+
], template: "<div class=\"ion-intl-tel-input-number\">\n <ion-input\n #numberInput\n [(ngModel)]=\"phoneNumber\"\n [autocomplete]=\"autocomplete\"\n [required]=\"required\"\n [disabled] = \"disabled\"\n [attr.maxLength]=\"maxLength\"\n type=\"tel\"\n [labelPlacement]=\"inputLabelPlacement\"\n (ionBlur)=\"onIonNumberBlur()\"\n (ionChange)=\"onIonNumberChange($event)\"\n (ionFocus)=\"onIonNumberFocus()\"\n (ionInput)=\"onIonNumberInput($event)\"\n (keydown)=\"onNumberKeyDown($event)\"\n (ngModelChange)=\"onNumberChange()\"\n placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\" >\n <div slot=\"label\">\n {{inputLabel}}\n \n <ion-button (click)=\"openModal()\"\n fill=\"clear\"\n class=\"ion-intl-tel-input-btn\"\n [disabled] = \"disabled\"\n aria-label=\"country\">\n <span class=\"ion-intl-tel-input-flag fi fi-{{country.flagClass}}\"></span><span class=\"ion-intl-tel-input-code\" *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.dialCode}}</span>\n <ion-icon style=\"font-size:14px;opacity:.5;\" name=\"caret-down\"></ion-icon>\n </ion-button>\n </div>\n </ion-input>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center}:host ion-button{color:var(--ion-color);height:100%;margin:0}:host ion-button::part(native){padding-inline-start:0;padding-inline-end:2px;margin:0;font-size:16px;font-weight:400}:host .fi{margin-right:5px}\n"] }]
|
|
3118
3119
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: IonIntlTelInputService }, { type: i1.ModalController }]; }, propDecorators: { cssClass: [{
|
|
3119
3120
|
type: HostBinding,
|
|
3120
3121
|
args: ['class.ion-intl-tel-input']
|
|
@@ -3152,6 +3153,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3152
3153
|
type: Input
|
|
3153
3154
|
}], inputPlaceholder: [{
|
|
3154
3155
|
type: Input
|
|
3156
|
+
}], inputLabel: [{
|
|
3157
|
+
type: Input
|
|
3158
|
+
}], inputLabelPlacement: [{
|
|
3159
|
+
type: Input
|
|
3155
3160
|
}], usePatternPlaceholder: [{
|
|
3156
3161
|
type: Input
|
|
3157
3162
|
}], maxLength: [{
|