ion-intl-tel-input
Version:
An Ionic component for International Phone Number Input, that allows all countries, validation with google phone lib, limited countries, preferred countries, virtual scrolling and much more.
1,365 lines • 94.5 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, Input, forwardRef, Output, EventEmitter, ViewChild, ElementRef, HostBinding, } from '@angular/core';
import { NG_VALUE_ACCESSOR, } from '@angular/forms';
import { IonInput, Platform } from '@ionic/angular';
import { PhoneNumberFormat, PhoneNumberUtil, } from 'google-libphonenumber';
import { IonIntlTelInputService } from '../ion-intl-tel-input.service';
// import { ionIntlTelInputValidator } from '../ion-intl-tel-input.directive';
import { raf } from '../util/util';
/**
* @ignore
*/
var IonIntlTelInputComponent = /** @class */ (function () {
function IonIntlTelInputComponent(el, platform, ionIntlTelInputService) {
var _this = this;
this.el = el;
this.platform = platform;
this.ionIntlTelInputService = ionIntlTelInputService;
this.cssClass = true;
/**
* Iso Code of default selected Country.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
*/
this.defaultCountryiso = '';
/**
* Determines whether to use `00` or `+` as dial code prefix.
* Available attributes are '+' | '00'.
* See more on.
*
* \@default +
* \@memberof IonIntlTelInputComponent
*/
this.dialCodePrefix = '+';
/**
* Determines whether to select automatic country based on user input.
* See more on.
*
* \@default false
* \@memberof IonIntlTelInputComponent
*/
this.enableAutoCountrySelect = false;
/**
* Determines whether an example number will be shown as a placeholder in input.
* See more on.
*
* \@default true
* \@memberof IonIntlTelInputComponent
*/
this.enablePlaceholder = true;
/**
* A fallaback placeholder to be used if no example number is found for a country.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
*/
this.fallbackPlaceholder = '';
/**
* If a custom placeholder is needed for input.
* If this property is set it will override `enablePlaceholder` and only this placeholder will be shown.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
*/
this.inputPlaceholder = '';
/**
* Maximum Length for input.
* See more on.
*
* \@default '15'
* \@memberof IonIntlTelInputComponent
*/
this.maxLength = '15';
/**
* Title of modal opened to select country dial code.
* See more on.
*
* \@default 'Select Country'
* \@memberof IonIntlTelInputComponent
*/
this.modalTitle = 'Select Country';
/**
* CSS class to attach to dial code selectionmodal.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
*/
this.modalCssClass = '';
/**
* Placeholder for input in dial code selection modal.
* See more on.
*
* \@default 'Enter country name'
* \@memberof IonIntlTelInputComponent
*/
this.modalSearchPlaceholder = 'Enter country name';
/**
* Text for close button in dial code selection modal.
* See more on.
*
* \@default 'Close'
* \@memberof IonIntlTelInputComponent
*/
this.modalCloseText = 'Close';
/**
* Slot for close button in dial code selection modal. [Ionic slots](https://ionicframework.com/docs/api/item) are supported
* See more on.
*
* \@default 'end'
* \@memberof IonIntlTelInputComponent
*/
this.modalCloseButtonSlot = 'end';
/**
* Determines whether dial code selection modal should be searchable or not.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
*/
this.modalCanSearch = true;
/**
* Determines whether dial code selection modal is closed on backdrop click.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
*/
this.modalShouldBackdropClose = true;
/**
* Determines whether input should be focused when dial code selection modal is opened.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
*/
this.modalShouldFocusSearchbar = true;
/**
* Message to show when no countries are found for search in dial code selection modal.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
*/
this.modalSearchFailText = 'No countries found';
/**
* List of iso codes of manually selected countries as string, which will appear in the dropdown.
* **Note**: `onlyCountries` should be a string array of country iso codes.
* See more on.
*
* \@default null
* \@memberof IonIntlTelInputComponent
*/
this.onlyCountries = [];
/**
* List of iso codesn as string of countries, which will appear at the top in dial code selection modal.
* **Note**: `preferredCountries` should be a string array of country iso codes.
* See more on.
*
* \@default null
* \@memberof IonIntlTelInputComponent
*/
this.preferredCountries = [];
/**
* Determines whether first country should be selected in dial code select or not.
* See more on.
*
* \@default true
* \@memberof IonIntlTelInputComponent
*/
this.selectFirstCountry = true;
/**
* Determines whether to visually separate dialcode into the drop down element.
* See more on.
*
* \@default true
* \@memberof IonIntlTelInputComponent
*/
this.separateDialCode = true;
/**
* Fires when the Phone number Input is changed.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.numberChange = new EventEmitter();
/**
* Fires when the Phone number Input is blurred.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.numberBlur = new EventEmitter();
/**
* Fires when the Phone number Input is focused.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.numberFocus = new EventEmitter();
/**
* Fires when the user is typing in Phone number Input.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.numberInput = new EventEmitter();
/**
* Fires when the dial code selection is changed.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.codeChange = new EventEmitter();
/**
* Fires when the dial code selection modal is opened.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.codeOpen = new EventEmitter();
/**
* Fires when the dial code selection modal is closed.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.codeClose = new EventEmitter();
/**
* Fires when a dial code is selected in dial code selection modal.
* See more on.
*
* \@memberof IonIntlTelInputComponent
*/
this.codeSelect = new EventEmitter();
// tslint:disable-next-line: variable-name
this._value = null;
this.phoneNumber = '';
this.countries = [];
this.disabled = false;
this.phoneUtil = PhoneNumberUtil.getInstance();
this.onTouched = (/**
* @return {?}
*/
function () { });
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
this.startsWith = (/**
* @param {?} input
* @param {?} search
* @return {?}
*/
function (input, search) {
return input.substr(0, search.length) === search;
});
this.getClasses = (/**
* @param {?} element
* @return {?}
*/
function (element) {
/** @type {?} */
var classList = element.classList;
/** @type {?} */
var classes = [];
for (var i = 0; i < classList.length; i++) {
/** @type {?} */
var item = classList.item(i);
if (item !== null && _this.startsWith(item, 'ng-')) {
classes.push("ion-" + item.substr(3));
}
}
return classes;
});
this.setClasses = (/**
* @param {?} element
* @param {?} classes
* @return {?}
*/
function (element, classes) {
/** @type {?} */
var classList = element.classList;
[
'ion-valid',
'ion-invalid',
'ion-touched',
'ion-untouched',
'ion-dirty',
'ion-pristine',
].forEach((/**
* @param {?} c
* @return {?}
*/
function (c) { return classList.remove(c); }));
classes.forEach((/**
* @param {?} c
* @return {?}
*/
function (c) { return classList.add(c); }));
});
this.setIonicClasses = (/**
* @param {?} element
* @return {?}
*/
function (element) {
raf((/**
* @return {?}
*/
function () {
/** @type {?} */
var input = (/** @type {?} */ (element.nativeElement));
/** @type {?} */
var classes = _this.getClasses(input);
_this.setClasses(input, classes);
/** @type {?} */
var item = input.closest('ion-item');
if (item) {
_this.setClasses(item, classes);
}
}));
});
this.setItemClass = (/**
* @param {?} element
* @param {?} className
* @param {?} addClass
* @return {?}
*/
function (element, className, addClass) {
/** @type {?} */
var input = (/** @type {?} */ (element.nativeElement));
/** @type {?} */
var item = input.closest('ion-item');
if (item) {
/** @type {?} */
var classList = item.classList;
if (addClass) {
classList.add(className);
}
else {
classList.remove(className);
}
}
});
}
Object.defineProperty(IonIntlTelInputComponent.prototype, "hasValueCssClass", {
get: /**
* @return {?}
*/
function () {
return this.hasValue();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IonIntlTelInputComponent.prototype, "isEnabled", {
get: /**
* @return {?}
*/
function () {
return !this.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IonIntlTelInputComponent.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._value = value;
this.setIonicClasses(this.el);
},
enumerable: true,
configurable: true
});
/**
* @param {?} change
* @return {?}
*/
IonIntlTelInputComponent.prototype.emitValueChange = /**
* @param {?} change
* @return {?}
*/
function (change) {
this.propagateChange(change);
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.isIos = this.platform.is('ios');
this.isMD = !this.isIos;
this.setItemClass(this.el, 'item-interactive', true);
this.fetchAllCountries();
this.setPreferredCountries();
if (this.onlyCountries.length) {
this.countries = this.countries.filter((/**
* @param {?} country
* @return {?}
*/
function (country) {
return _this.onlyCountries.includes(country.isoCode);
}));
}
if (this.selectFirstCountry) {
if (this.defaultCountryiso) {
this.setCountry(this.getCountryByIsoCode(this.defaultCountryiso));
}
else {
if (this.preferredCountries.length &&
this.preferredCountries.includes(this.defaultCountryiso)) {
this.setCountry(this.getCountryByIsoCode(this.preferredCountries[0]));
}
else {
this.setCountry(this.countries[0]);
}
}
}
};
/**
* @param {?} changes
* @return {?}
*/
IonIntlTelInputComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (this.countries &&
changes.defaulyCountryisoCode &&
changes.defaulyCountryisoCode.currentValue !==
changes.defaulyCountryisoCode.previousValue) {
this.setCountry(changes.defaulyCountryisoCode.currentValue);
}
};
/**
* @param {?} fn
* @return {?}
*/
IonIntlTelInputComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
IonIntlTelInputComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} obj
* @return {?}
*/
IonIntlTelInputComponent.prototype.writeValue = /**
* @param {?} obj
* @return {?}
*/
function (obj) {
this.fillValues(obj);
};
/**
* @param {?} isDisabled
* @return {?}
*/
IonIntlTelInputComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* @param {?} value
* @return {?}
*/
IonIntlTelInputComponent.prototype.fillValues = /**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (value &&
value !== null &&
typeof value === 'object' &&
!this.isNullOrWhiteSpace(value)) {
this.phoneNumber = value.nationalNumber;
this.setCountry(this.getCountryByIsoCode(value.isoCode));
this.value = value;
}
else if (this.value &&
this.value !== null &&
typeof this.value === 'object' &&
!this.isNullOrWhiteSpace(this.value)) {
this.phoneNumber = this.value.nationalNumber;
this.setCountry(this.getCountryByIsoCode(this.value.isoCode));
}
setTimeout((/**
* @return {?}
*/
function () {
_this.onNumberChange();
}), 1);
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.hasValue = /**
* @return {?}
*/
function () {
return !this.isNullOrWhiteSpace(this.value);
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.onCodeOpen = /**
* @return {?}
*/
function () {
this.codeOpen.emit();
};
/**
* @param {?} event
* @return {?}
*/
IonIntlTelInputComponent.prototype.onCodeChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
if (this.isNullOrWhiteSpace(this.phoneNumber)) {
this.emitValueChange(null);
}
else {
/** @type {?} */
var googleNumber = void 0;
try {
googleNumber = this.phoneUtil.parse(this.phoneNumber, this.country.isoCode.toUpperCase());
}
catch (e) { }
/** @type {?} */
var internationallNo = googleNumber
? this.phoneUtil.format(googleNumber, PhoneNumberFormat.INTERNATIONAL)
: '';
/** @type {?} */
var nationalNo = googleNumber
? this.phoneUtil.format(googleNumber, PhoneNumberFormat.NATIONAL)
: '';
if (this.separateDialCode && internationallNo) {
this.phoneNumber = this.removeDialCode(internationallNo);
}
this.emitValueChange({
internationalNumber: internationallNo,
nationalNumber: nationalNo,
isoCode: this.country.isoCode,
dialCode: this.dialCodePrefix + this.country.dialCode,
});
this.codeChange.emit();
}
setTimeout((/**
* @return {?}
*/
function () {
_this.numberInputEl.setFocus();
}), 400);
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.onCodeClose = /**
* @return {?}
*/
function () {
this.onTouched();
this.setIonicClasses(this.el);
this.hasFocus = false;
this.setItemClass(this.el, 'item-has-focus', false);
this.codeClose.emit();
};
/**
* @param {?} event
* @return {?}
*/
IonIntlTelInputComponent.prototype.onCodeSearchCountries = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var text = event.text.trim().toLowerCase();
event.component.startSearch();
event.component.items = this.filterCountries(text);
event.component.endSearch();
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.onCodeSelect = /**
* @return {?}
*/
function () {
this.codeSelect.emit();
};
/**
* @param {?} event
* @return {?}
*/
IonIntlTelInputComponent.prototype.onIonNumberChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.setIonicClasses(this.el);
this.numberChange.emit(event);
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.onIonNumberBlur = /**
* @return {?}
*/
function () {
this.onTouched();
this.setIonicClasses(this.el);
this.hasFocus = false;
this.setItemClass(this.el, 'item-has-focus', false);
this.numberBlur.emit();
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.onIonNumberFocus = /**
* @return {?}
*/
function () {
this.hasFocus = true;
this.setItemClass(this.el, 'item-has-focus', true);
this.numberFocus.emit();
};
/**
* @param {?} event
* @return {?}
*/
IonIntlTelInputComponent.prototype.onIonNumberInput = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.numberInput.emit(event);
};
/**
* @return {?}
*/
IonIntlTelInputComponent.prototype.onNumberChange = /**
* @return {?}
*/
function () {
if (!this.phoneNumber) {
this.value = null;
this.emitValueChange(null);
return;
}
if (this.country) {
this.emitValueChange({
internationalNumber: this.dialCodePrefix + this.country.dialCode + ' ' + this.phoneNumber,
nationalNumber: this.phoneNumber,
isoCode: this.country.isoCode,
dialCode: this.dialCodePrefix + this.country.dialCode,
});
}
/** @type {?} */
var googleNumber;
try {
googleNumber = this.phoneUtil.parse(this.phoneNumber, this.country.isoCode.toUpperCase());
}
catch (e) {
return;
}
/** @type {?} */
var isoCode = this.country ? this.country.isoCode : null;
// auto select country based on the extension (and areaCode if needed) (e.g select Canada if number starts with +1 416)
if (this.enableAutoCountrySelect) {
isoCode =
googleNumber && googleNumber.getCountryCode()
? this.getCountryIsoCode(googleNumber.getCountryCode(), googleNumber)
: this.country.isoCode;
if (isoCode && isoCode !== this.country.isoCode) {
/** @type {?} */
var newCountry = this.countries.find((/**
* @param {?} country
* @return {?}
*/
function (country) { return country.isoCode === isoCode; }));
if (newCountry) {
this.country = newCountry;
}
}
}
isoCode = isoCode ? isoCode : this.country ? this.country.isoCode : null;
if (!this.phoneNumber || !isoCode) {
this.emitValueChange(null);
}
else {
/** @type {?} */
var internationallNo = googleNumber
? this.phoneUtil.format(googleNumber, PhoneNumberFormat.INTERNATIONAL)
: '';
/** @type {?} */
var nationalNo = googleNumber
? this.phoneUtil.format(googleNumber, PhoneNumberFormat.NATIONAL)
: '';
if (this.separateDialCode && internationallNo) {
this.phoneNumber = this.removeDialCode(internationallNo);
}
this.emitValueChange({
internationalNumber: internationallNo,
nationalNumber: nationalNo,
isoCode: this.country.isoCode,
dialCode: this.dialCodePrefix + this.country.dialCode,
});
}
};
/**
* @param {?} event
* @return {?}
*/
IonIntlTelInputComponent.prototype.onNumberKeyDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var allowedChars = /^[0-9\+\-\ ]/;
/** @type {?} */
var allowedCtrlChars = /[axcv]/;
/** @type {?} */
var allowedOtherKeys = [
'ArrowLeft',
'ArrowUp',
'ArrowRight',
'ArrowDown',
'Home',
'End',
'Insert',
'Delete',
'Backspace',
];
if (!allowedChars.test(event.key) &&
!(event.ctrlKey && allowedCtrlChars.test(event.key)) &&
!allowedOtherKeys.includes(event.key)) {
event.preventDefault();
}
};
/**
* @private
* @param {?} text
* @return {?}
*/
IonIntlTelInputComponent.prototype.filterCountries = /**
* @private
* @param {?} text
* @return {?}
*/
function (text) {
return this.countries.filter((/**
* @param {?} country
* @return {?}
*/
function (country) {
return (country.name.toLowerCase().indexOf(text) !== -1 ||
country.name.toLowerCase().indexOf(text) !== -1 ||
country.dialCode.toString().toLowerCase().indexOf(text) !== -1);
}));
};
/**
* @private
* @param {?} countryCode
* @param {?} googleNumber
* @return {?}
*/
IonIntlTelInputComponent.prototype.getCountryIsoCode = /**
* @private
* @param {?} countryCode
* @param {?} googleNumber
* @return {?}
*/
function (countryCode, googleNumber) {
/** @type {?} */
var rawNumber = ((/** @type {?} */ (googleNumber))).values_[2].toString();
/** @type {?} */
var countries = this.countries.filter((/**
* @param {?} country
* @return {?}
*/
function (country) { return country.dialCode === countryCode.toString(); }));
/** @type {?} */
var mainCountry = countries.find((/**
* @param {?} country
* @return {?}
*/
function (country) { return country.areaCodes === undefined; }));
/** @type {?} */
var secondaryCountries = countries.filter((/**
* @param {?} country
* @return {?}
*/
function (country) { return country.areaCodes !== undefined; }));
/** @type {?} */
var matchedCountry = mainCountry ? mainCountry.isoCode : undefined;
secondaryCountries.forEach((/**
* @param {?} country
* @return {?}
*/
function (country) {
country.areaCodes.forEach((/**
* @param {?} areaCode
* @return {?}
*/
function (areaCode) {
if (rawNumber.startsWith(areaCode)) {
matchedCountry = country.isoCode;
}
}));
}));
return matchedCountry;
};
/**
* @private
* @return {?}
*/
IonIntlTelInputComponent.prototype.fetchAllCountries = /**
* @private
* @return {?}
*/
function () {
this.countries = this.ionIntlTelInputService.getListOfCountries();
};
/**
* @private
* @param {?} isoCode
* @return {?}
*/
IonIntlTelInputComponent.prototype.getCountryByIsoCode = /**
* @private
* @param {?} isoCode
* @return {?}
*/
function (isoCode) {
var e_1, _a;
try {
for (var _b = tslib_1.__values(this.countries), _c = _b.next(); !_c.done; _c = _b.next()) {
var country = _c.value;
if (country.isoCode === isoCode) {
return country;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return;
};
/**
* @private
* @param {?} value
* @return {?}
*/
IonIntlTelInputComponent.prototype.isNullOrWhiteSpace = /**
* @private
* @param {?} value
* @return {?}
*/
function (value) {
if (value === null || value === undefined) {
return true;
}
if (typeof value === 'string' && value === '') {
return true;
}
if (typeof value === 'object' && Object.keys(value).length === 0) {
return true;
}
return false;
};
/**
* @private
* @param {?} phoneNumber
* @return {?}
*/
IonIntlTelInputComponent.prototype.removeDialCode = /**
* @private
* @param {?} phoneNumber
* @return {?}
*/
function (phoneNumber) {
if (this.separateDialCode && phoneNumber) {
phoneNumber = phoneNumber.substr(phoneNumber.indexOf(' ') + 1);
}
return phoneNumber;
};
/**
* @private
* @param {?} country
* @return {?}
*/
IonIntlTelInputComponent.prototype.setCountry = /**
* @private
* @param {?} country
* @return {?}
*/
function (country) {
this.country = country;
this.codeChange.emit(this.country);
};
/**
* @private
* @return {?}
*/
IonIntlTelInputComponent.prototype.setPreferredCountries = /**
* @private
* @return {?}
*/
function () {
var e_2, _a;
try {
for (var _b = tslib_1.__values(this.preferredCountries), _c = _b.next(); !_c.done; _c = _b.next()) {
var preferedCountryIsoCode = _c.value;
/** @type {?} */
var country = this.getCountryByIsoCode(preferedCountryIsoCode);
country.priority = country ? 1 : country.priority;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
this.countries.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) {
return a.priority > b.priority ? -1 : a.priority < b.priority ? 1 : 0;
}));
};
IonIntlTelInputComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line: component-selector
selector: 'ion-intl-tel-input',
template: "<div class=\"ion-intl-tel-input-code\">\n <ionic-selectable\n #codeSelect\n [(ngModel)]=\"country\"\n [canSearch]=\"modalCanSearch\"\n closeButtonText=\"{{modalCloseText}}\"\n closeButtonSlot=\"{{modalCloseButtonSlot}}\"\n [disabled] = \"disabled\"\n [hasVirtualScroll]=\"true\"\n itemTextField=\"name\"\n [items]=\"countries\"\n itemValueField=\"dialCode\"\n modalCssClass=\"ionic-tel-input-modal {{modalCssClass}}\"\n placeholder=\"Country\"\n searchFailText=\"{{modalSearchFailText}}\"\n searchPlaceholder=\"{{modalSearchPlaceholder}}\"\n [shouldBackdropClose]=\"modalShouldBackdropClose\"\n [shouldFocusSearchbar]=\"modalShouldFocusSearchbar\"\n (onChange)=\"onCodeChange($event)\"\n (onClose)=\"onCodeClose()\"\n (onOpen)=\"onCodeOpen()\"\n (onSearch)=\"onCodeSearchCountries($event)\"\n (onSelect)=\"onCodeSelect()\"\n >\n <ng-template ionicSelectableTitleTemplate>\n {{modalTitle}}\n </ng-template>\n <ng-template ionicSelectableValueTemplate let-country=\"value\">\n <span class=\"flag-icon flag-icon-{{country.flagClass}}\"></span>\n <span *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.dialCode}}</span>\n </ng-template>\n <ng-template ionicSelectableItemTemplate let-country=\"item\">\n <span class=\"ion-margin-end\">{{country.name}}</span>\n <span *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.dialCode}}</span>\n </ng-template>\n <ng-template ionicSelectableItemEndTemplate let-country=\"item\">\n <span class=\"flag-icon flag-icon-{{country.flagClass}}\"></span>\n </ng-template>\n </ionic-selectable>\n</div>\n\n<div class=\"ion-intl-tel-input-number\">\n <ion-input\n #numberInput\n [(ngModel)]=\"phoneNumber\"\n autocomplete=\"off\"\n [disabled] = \"disabled\" \n [attr.maxLength]=\"maxLength\"\n type=\"tel\"\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}}\" >\n </ion-input>\n</div>\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return IonIntlTelInputComponent; })),
multi: true,
},
],
styles: [":host{width:100%;display:-webkit-box;display:flex;-webkit-box-align:end;align-items:flex-end}:host .ion-intl-tel-input-code{position:relative}:host .ion-intl-tel-input-number{-webkit-box-flex:1;flex:1}:host .ionic-selectable-label-default,:host .ionic-selectable-label-fixed{max-width:100%}:host .ionic-selectable:not(:host.ionic-selectable-label-stacked):not(:host.ionic-selectable-label-floating) ::ng-deep .ionic-selectable-inner .ionic-selectable-value{padding-top:10px;padding-bottom:10px}:host .ionic-selectable:not(:host.ionic-selectable-label-stacked):not(:host.ionic-selectable-label-floating) ::ng-deep .ionic-selectable-icon-inner{top:17px}:host .flag-icon{margin-right:5px}"]
}] }
];
/** @nocollapse */
IonIntlTelInputComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Platform },
{ type: IonIntlTelInputService }
]; };
IonIntlTelInputComponent.propDecorators = {
cssClass: [{ type: HostBinding, args: ['class.ion-intl-tel-input',] }],
isIos: [{ type: HostBinding, args: ['class.ion-intl-tel-input-ios',] }],
isMD: [{ type: HostBinding, args: ['class.ion-intl-tel-input-md',] }],
hasFocus: [{ type: HostBinding, args: ['class.has-focus',] }],
hasValueCssClass: [{ type: HostBinding, args: ['class.ion-intl-tel-input-has-value',] }],
isEnabled: [{ type: HostBinding, args: ['class.ion-intl-tel-input-is-enabled',] }, { type: Input, args: ['isEnabled',] }],
defaultCountryiso: [{ type: Input }],
dialCodePrefix: [{ type: Input }],
enableAutoCountrySelect: [{ type: Input }],
enablePlaceholder: [{ type: Input }],
fallbackPlaceholder: [{ type: Input }],
inputPlaceholder: [{ type: Input }],
maxLength: [{ type: Input }],
modalTitle: [{ type: Input }],
modalCssClass: [{ type: Input }],
modalSearchPlaceholder: [{ type: Input }],
modalCloseText: [{ type: Input }],
modalCloseButtonSlot: [{ type: Input }],
modalCanSearch: [{ type: Input }],
modalShouldBackdropClose: [{ type: Input }],
modalShouldFocusSearchbar: [{ type: Input }],
modalSearchFailText: [{ type: Input }],
onlyCountries: [{ type: Input }],
preferredCountries: [{ type: Input }],
selectFirstCountry: [{ type: Input }],
separateDialCode: [{ type: Input }],
numberChange: [{ type: Output }],
numberBlur: [{ type: Output }],
numberFocus: [{ type: Output }],
numberInput: [{ type: Output }],
codeChange: [{ type: Output }],
codeOpen: [{ type: Output }],
codeClose: [{ type: Output }],
codeSelect: [{ type: Output }],
numberInputEl: [{ type: ViewChild, args: ['numberInput', { static: false },] }]
};
return IonIntlTelInputComponent;
}());
export { IonIntlTelInputComponent };
if (false) {
/** @type {?} */
IonIntlTelInputComponent.prototype.cssClass;
/** @type {?} */
IonIntlTelInputComponent.prototype.isIos;
/** @type {?} */
IonIntlTelInputComponent.prototype.isMD;
/** @type {?} */
IonIntlTelInputComponent.prototype.hasFocus;
/**
* Iso Code of default selected Country.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.defaultCountryiso;
/**
* Determines whether to use `00` or `+` as dial code prefix.
* Available attributes are '+' | '00'.
* See more on.
*
* \@default +
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.dialCodePrefix;
/**
* Determines whether to select automatic country based on user input.
* See more on.
*
* \@default false
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.enableAutoCountrySelect;
/**
* Determines whether an example number will be shown as a placeholder in input.
* See more on.
*
* \@default true
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.enablePlaceholder;
/**
* A fallaback placeholder to be used if no example number is found for a country.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.fallbackPlaceholder;
/**
* If a custom placeholder is needed for input.
* If this property is set it will override `enablePlaceholder` and only this placeholder will be shown.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.inputPlaceholder;
/**
* Maximum Length for input.
* See more on.
*
* \@default '15'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.maxLength;
/**
* Title of modal opened to select country dial code.
* See more on.
*
* \@default 'Select Country'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalTitle;
/**
* CSS class to attach to dial code selectionmodal.
* See more on.
*
* \@default ''
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalCssClass;
/**
* Placeholder for input in dial code selection modal.
* See more on.
*
* \@default 'Enter country name'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalSearchPlaceholder;
/**
* Text for close button in dial code selection modal.
* See more on.
*
* \@default 'Close'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalCloseText;
/**
* Slot for close button in dial code selection modal. [Ionic slots](https://ionicframework.com/docs/api/item) are supported
* See more on.
*
* \@default 'end'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalCloseButtonSlot;
/**
* Determines whether dial code selection modal should be searchable or not.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalCanSearch;
/**
* Determines whether dial code selection modal is closed on backdrop click.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalShouldBackdropClose;
/**
* Determines whether input should be focused when dial code selection modal is opened.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalShouldFocusSearchbar;
/**
* Message to show when no countries are found for search in dial code selection modal.
* See more on.
*
* \@default 'true'
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.modalSearchFailText;
/**
* List of iso codes of manually selected countries as string, which will appear in the dropdown.
* **Note**: `onlyCountries` should be a string array of country iso codes.
* See more on.
*
* \@default null
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.onlyCountries;
/**
* List of iso codesn as string of countries, which will appear at the top in dial code selection modal.
* **Note**: `preferredCountries` should be a string array of country iso codes.
* See more on.
*
* \@default null
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.preferredCountries;
/**
* Determines whether first country should be selected in dial code select or not.
* See more on.
*
* \@default true
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.selectFirstCountry;
/**
* Determines whether to visually separate dialcode into the drop down element.
* See more on.
*
* \@default true
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.separateDialCode;
/**
* Fires when the Phone number Input is changed.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.numberChange;
/**
* Fires when the Phone number Input is blurred.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.numberBlur;
/**
* Fires when the Phone number Input is focused.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.numberFocus;
/**
* Fires when the user is typing in Phone number Input.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.numberInput;
/**
* Fires when the dial code selection is changed.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.codeChange;
/**
* Fires when the dial code selection modal is opened.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.codeOpen;
/**
* Fires when the dial code selection modal is closed.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.codeClose;
/**
* Fires when a dial code is selected in dial code selection modal.
* See more on.
*
* \@memberof IonIntlTelInputComponent
* @type {?}
*/
IonIntlTelInputComponent.prototype.codeSelect;
/** @type {?} */
IonIntlTelInputComponent.prototype.numberInputEl;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype._value;
/** @type {?} */
IonIntlTelInputComponent.prototype.country;
/** @type {?} */
IonIntlTelInputComponent.prototype.phoneNumber;
/** @type {?} */
IonIntlTelInputComponent.prototype.countries;
/** @type {?} */
IonIntlTelInputComponent.prototype.disabled;
/** @type {?} */
IonIntlTelInputComponent.prototype.phoneUtil;
/** @type {?} */
IonIntlTelInputComponent.prototype.onTouched;
/** @type {?} */
IonIntlTelInputComponent.prototype.propagateChange;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.startsWith;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.getClasses;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.setClasses;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.setIonicClasses;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.setItemClass;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.el;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.platform;
/**
* @type {?}
* @private
*/
IonIntlTelInputComponent.prototype.ionIntlTelInputService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW9uLWludGwtdGVsLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2lvbi1pbnRsLXRlbC1pbnB1dC8iLCJzb3VyY2VzIjpbImxpYi9pb24taW50bC10ZWwtaW5wdXQvaW9uLWludGwtdGVsLWlucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsS0FBSyxFQUNMLFVBQVUsRUFDVixNQUFNLEVBQ04sWUFBWSxFQUdaLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxHQUNaLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFDTCxpQkFBaUIsR0FHbEIsTUFBTSxnQkFBZ0IsQ0FBQztBQUV4QixPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBR3BELE9BQU8sRUFFTCxpQkFBaUIsRUFDakIsZUFBZSxHQUNoQixNQUFNLHVCQUF1QixDQUFDO0FBSS9CLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtCQUErQixDQUFDOztBQUV2RSxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sY0FBYyxDQUFDOzs7O0FBS25DO0lBdVVFLGtDQUNVLEVBQWMsRUFDZCxRQUFrQixFQUNsQixzQkFBOEM7UUFIeEQsaUJBSUk7UUFITSxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUNsQiwyQkFBc0IsR0FBdEIsc0JBQXNCLENBQXdCO1FBdFR4RCxhQUFRLEdBQUcsSUFBSSxDQUFDOzs7Ozs7OztRQXlCaEIsc0JBQWlCLEdBQUcsRUFBRSxDQUFDOzs7Ozs7Ozs7UUFXdkIsbUJBQWMsR0FBZSxHQUFHLENBQUM7Ozs7Ozs7O1FBVWpDLDRCQUF1QixHQUFHLEtBQUssQ0FBQzs7Ozs7Ozs7UUFVaEMsc0JBQWlCLEdBQUcsSUFBSSxDQUFDOzs7Ozs7OztRQVV6Qix3QkFBbUIsR0FBRyxFQUFFLENBQUM7Ozs7Ozs7OztR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