@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
|
@@ -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;
|
|
@@ -2550,6 +2550,8 @@ class IonIntlTelInputComponent {
|
|
|
2550
2550
|
* @memberof IonIntlTelInputComponent
|
|
2551
2551
|
*/
|
|
2552
2552
|
this.inputPlaceholder = '';
|
|
2553
|
+
this.inputLabel = '';
|
|
2554
|
+
this.inputLabelPlacement = '';
|
|
2553
2555
|
/**
|
|
2554
2556
|
* Instead of an example phone number, use a x pattern. Such as xxx-xxx-xxxx, this will be obtained
|
|
2555
2557
|
* based on the example number from the google phone lib.
|
|
@@ -2733,7 +2735,6 @@ class IonIntlTelInputComponent {
|
|
|
2733
2735
|
this.phoneNumber = '';
|
|
2734
2736
|
this.countries = [];
|
|
2735
2737
|
this.disabled = false;
|
|
2736
|
-
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
2737
2738
|
this.onTouched = () => { };
|
|
2738
2739
|
this.propagateChange = (_) => { };
|
|
2739
2740
|
this.startsWith = (input, search) => {
|
|
@@ -2845,7 +2846,7 @@ class IonIntlTelInputComponent {
|
|
|
2845
2846
|
if (value && typeof value === 'string') {
|
|
2846
2847
|
let googleNumber;
|
|
2847
2848
|
try {
|
|
2848
|
-
googleNumber =
|
|
2849
|
+
googleNumber = parsePhoneNumber(value);
|
|
2849
2850
|
}
|
|
2850
2851
|
catch (e) {
|
|
2851
2852
|
}
|
|
@@ -2853,15 +2854,15 @@ class IonIntlTelInputComponent {
|
|
|
2853
2854
|
// If failed to parse, try adding a +1 and see if valid
|
|
2854
2855
|
if (value.length >= 10 && value.indexOf('+') === -1) {
|
|
2855
2856
|
const v = '+1' + value;
|
|
2856
|
-
googleNumber =
|
|
2857
|
+
googleNumber = parsePhoneNumber(v);
|
|
2857
2858
|
}
|
|
2858
2859
|
}
|
|
2859
2860
|
if (!googleNumber) {
|
|
2860
2861
|
console.log('Warning: failed to parse number: ', value);
|
|
2861
2862
|
}
|
|
2862
2863
|
if (googleNumber) {
|
|
2863
|
-
let isoCode = googleNumber && googleNumber.
|
|
2864
|
-
?
|
|
2864
|
+
let isoCode = googleNumber && googleNumber.country
|
|
2865
|
+
? googleNumber.country
|
|
2865
2866
|
: this.country.isoCode;
|
|
2866
2867
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2867
2868
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -2870,7 +2871,7 @@ class IonIntlTelInputComponent {
|
|
|
2870
2871
|
}
|
|
2871
2872
|
}
|
|
2872
2873
|
isoCode = isoCode ? isoCode : this.country ? this.country.isoCode : null;
|
|
2873
|
-
const internationallNo =
|
|
2874
|
+
const internationallNo = googleNumber.formatInternational();
|
|
2874
2875
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
2875
2876
|
this.value = internationallNo;
|
|
2876
2877
|
}
|
|
@@ -2916,14 +2917,14 @@ class IonIntlTelInputComponent {
|
|
|
2916
2917
|
else {
|
|
2917
2918
|
let googleNumber;
|
|
2918
2919
|
try {
|
|
2919
|
-
googleNumber =
|
|
2920
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2920
2921
|
}
|
|
2921
2922
|
catch (e) { }
|
|
2922
2923
|
const internationallNo = googleNumber
|
|
2923
|
-
?
|
|
2924
|
+
? googleNumber.formatInternational()
|
|
2924
2925
|
: '';
|
|
2925
2926
|
const nationalNo = googleNumber
|
|
2926
|
-
?
|
|
2927
|
+
? googleNumber.formatNational()
|
|
2927
2928
|
: '';
|
|
2928
2929
|
if (this.separateDialCode && internationallNo) {
|
|
2929
2930
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
@@ -2976,7 +2977,7 @@ class IonIntlTelInputComponent {
|
|
|
2976
2977
|
}
|
|
2977
2978
|
let googleNumber;
|
|
2978
2979
|
try {
|
|
2979
|
-
googleNumber =
|
|
2980
|
+
googleNumber = parsePhoneNumber(this.phoneNumber, this.country.isoCode.toUpperCase());
|
|
2980
2981
|
}
|
|
2981
2982
|
catch (e) {
|
|
2982
2983
|
return;
|
|
@@ -2985,8 +2986,8 @@ class IonIntlTelInputComponent {
|
|
|
2985
2986
|
// auto select country based on the extension (and areaCode if needed) (e.g select Canada if number starts with +1 416)
|
|
2986
2987
|
if (this.enableAutoCountrySelect) {
|
|
2987
2988
|
isoCode =
|
|
2988
|
-
googleNumber && googleNumber.
|
|
2989
|
-
?
|
|
2989
|
+
googleNumber && googleNumber.country
|
|
2990
|
+
? googleNumber.country
|
|
2990
2991
|
: this.country.isoCode;
|
|
2991
2992
|
if (isoCode && isoCode !== this.country.isoCode) {
|
|
2992
2993
|
const newCountry = this.countries.find((country) => country.isoCode === isoCode);
|
|
@@ -3001,10 +3002,10 @@ class IonIntlTelInputComponent {
|
|
|
3001
3002
|
}
|
|
3002
3003
|
else {
|
|
3003
3004
|
const internationallNo = googleNumber
|
|
3004
|
-
?
|
|
3005
|
+
? googleNumber.formatInternational()
|
|
3005
3006
|
: '';
|
|
3006
3007
|
const nationalNo = googleNumber
|
|
3007
|
-
?
|
|
3008
|
+
? googleNumber.formatNational()
|
|
3008
3009
|
: '';
|
|
3009
3010
|
if (this.separateDialCode && internationallNo) {
|
|
3010
3011
|
this.phoneNumber = this.removeDialCode(internationallNo);
|
|
@@ -3096,13 +3097,13 @@ class IonIntlTelInputComponent {
|
|
|
3096
3097
|
}
|
|
3097
3098
|
}
|
|
3098
3099
|
/** @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 });
|
|
3099
|
-
/** @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: [
|
|
3100
|
+
/** @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: [
|
|
3100
3101
|
{
|
|
3101
3102
|
provide: NG_VALUE_ACCESSOR,
|
|
3102
3103
|
useExisting: forwardRef((() => IonIntlTelInputComponent)),
|
|
3103
3104
|
multi: true,
|
|
3104
3105
|
},
|
|
3105
|
-
], viewQueries: [{ propertyName: "numberInputEl", first: true, predicate: ["numberInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<
|
|
3106
|
+
], 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" }] });
|
|
3106
3107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputComponent, decorators: [{
|
|
3107
3108
|
type: Component,
|
|
3108
3109
|
args: [{ selector: 'ion-intl-tel-input', providers: [
|
|
@@ -3111,7 +3112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3111
3112
|
useExisting: forwardRef((() => IonIntlTelInputComponent)),
|
|
3112
3113
|
multi: true,
|
|
3113
3114
|
},
|
|
3114
|
-
], template: "<
|
|
3115
|
+
], 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"] }]
|
|
3115
3116
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: IonIntlTelInputService }, { type: i1.ModalController }]; }, propDecorators: { cssClass: [{
|
|
3116
3117
|
type: HostBinding,
|
|
3117
3118
|
args: ['class.ion-intl-tel-input']
|
|
@@ -3149,6 +3150,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3149
3150
|
type: Input
|
|
3150
3151
|
}], inputPlaceholder: [{
|
|
3151
3152
|
type: Input
|
|
3153
|
+
}], inputLabel: [{
|
|
3154
|
+
type: Input
|
|
3155
|
+
}], inputLabelPlacement: [{
|
|
3156
|
+
type: Input
|
|
3152
3157
|
}], usePatternPlaceholder: [{
|
|
3153
3158
|
type: Input
|
|
3154
3159
|
}], maxLength: [{
|