@crodriguezdominguez/ion-intl-tel-input
Version:
An Ionic component for International Phone Number Input, that allows all countries, validation with libphonenumber-js, limited countries, preferred countries, virtual scrolling and much more.
362 lines (355 loc) • 16.2 kB
TypeScript
import { Validator, AbstractControl, ValidationErrors, ControlValueAccessor } from '@angular/forms';
import * as _angular_core from '@angular/core';
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { IonSearchbar } from '@ionic/angular/standalone';
declare class IonIntlTelInputValidators {
static phone(control: AbstractControl): ValidationErrors | null;
}
declare class IonIntlTelInputValidatorDirective implements Validator {
validate(control: AbstractControl): ValidationErrors | null;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IonIntlTelInputValidatorDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IonIntlTelInputValidatorDirective, "[ionIntlTelInputValid]", never, {}, {}, never, never, true, never>;
}
interface CountryI {
name: string;
isoCode: string;
dialCode: string;
flagClass: string;
priority: number;
placeholder: string;
areaCodes?: Array<string>;
displayDialCode: string;
}
/**
* @ignore
*/
declare class IonIntlTelInputComponent implements ControlValueAccessor, OnInit, OnChanges {
private readonly el;
private readonly platform;
private readonly ionIntlTelInputService;
private readonly modalCtrl;
cssClass: boolean;
isIos: boolean;
isMD: boolean;
hasFocus: any;
get hasValueCssClass(): boolean;
get isEnabled(): boolean;
/**
* autocomplete, set to 'tel' if needed
*
* @default 'off'
* @memberof IonIntlTelInputComponent
*/
readonly autocomplete: _angular_core.InputSignal<"off" | "tel">;
/**
* required, passed onto ion-input so we can be accessiblity compliant
*
* @default false
* @memberof IonIntlTelInputComponent
*/
readonly required: _angular_core.InputSignal<boolean>;
/**
* Iso Code of default selected Country.
* See more on.
*
* @default ''
* @memberof IonIntlTelInputComponent
*/
readonly defaultCountryiso: _angular_core.InputSignal<string>;
/**
* Determines whether to use `00` or `+` as dial code prefix.
* Available attributes are '+' | '00'.
* See more on.
*
* @default +
* @memberof IonIntlTelInputComponent
*/
readonly dialCodePrefix: _angular_core.InputSignal<"+" | "00">;
/**
* Determines whether to select automatic country based on user input.
* See more on.
*
* @default true
* @memberof IonIntlTelInputComponent
*/
readonly enableAutoCountrySelect: _angular_core.InputSignal<boolean>;
/**
* Determines whether an example number will be shown as a placeholder in input.
* See more on.
*
* @default true
* @memberof IonIntlTelInputComponent
*/
readonly enablePlaceholder: _angular_core.InputSignal<boolean>;
/**
* A fallaback placeholder to be used if no example number is found for a country.
* See more on.
*
* @default ''
* @memberof IonIntlTelInputComponent
*/
readonly fallbackPlaceholder: _angular_core.InputSignal<string>;
/**
* 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
*/
readonly inputPlaceholder: _angular_core.InputSignal<string>;
readonly inputLabel: _angular_core.InputSignal<string>;
readonly inputLabelColor: _angular_core.InputSignal<any>;
readonly inputLabelPlacement: _angular_core.InputSignal<"start" | "end" | "floating" | "stacked" | "fixed">;
/**
* Instead of an example phone number, use a x pattern. Such as xxx-xxx-xxxx, this will be obtained
* based on the example number from the google phone lib.
*
* @default true
* @memberof IonIntlTelInputComponent
*/
readonly usePatternPlaceholder: _angular_core.InputSignal<boolean>;
/**
* Maximum Length for input.
* See more on.
*
* @default '15'
* @memberof IonIntlTelInputComponent
*/
readonly maxLength: _angular_core.InputSignal<string>;
/**
* Title of modal opened to select country dial code.
* See more on.
*
* @default 'Select Country'
* @memberof IonIntlTelInputComponent
*/
readonly modalTitle: _angular_core.InputSignal<string>;
/**
* CSS class to attach to dial code selectionmodal.
* See more on.
*
* @default 'ion-intl-tel-modal'
* @memberof IonIntlTelInputComponent
*/
readonly modalCssClass: _angular_core.InputSignal<string>;
/**
* Placeholder for input in dial code selection modal.
* See more on.
*
* @default 'Enter country name'
* @memberof IonIntlTelInputComponent
*/
readonly modalSearchPlaceholder: _angular_core.InputSignal<string>;
/**
* Text for close button in dial code selection modal.
* See more on.
*
* @default 'Close'
* @memberof IonIntlTelInputComponent
*/
readonly modalCloseText: _angular_core.InputSignal<string>;
/**
* 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
*/
readonly modalCloseButtonSlot: _angular_core.InputSignal<"start" | "end" | "primary" | "secondary">;
/**
* Determines whether dial code selection modal should be searchable or not.
* See more on.
*
* @default 'true'
* @memberof IonIntlTelInputComponent
*/
readonly modalCanSearch: _angular_core.InputSignal<boolean>;
/**
* Determines whether dial code selection modal is closed on backdrop click.
* See more on.
*
* @default 'true'
* @memberof IonIntlTelInputComponent
*/
readonly modalShouldBackdropClose: _angular_core.InputSignal<boolean>;
/**
* Determines whether input should be focused when dial code selection modal is opened.
* See more on.
*
* @default 'true'
* @memberof IonIntlTelInputComponent
*/
readonly modalShouldFocusSearchbar: _angular_core.InputSignal<boolean>;
/**
* Message to show when no countries are found for search in dial code selection modal.
* See more on.
*
* @default 'true'
* @memberof IonIntlTelInputComponent
*/
readonly modalSearchFailText: _angular_core.InputSignal<string>;
/**
* 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
*/
readonly onlyCountries: _angular_core.InputSignal<string[]>;
/**
* 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
*/
readonly preferredCountries: _angular_core.InputSignal<string[]>;
/**
* Determines whether first country should be selected in dial code select or not.
* See more on.
*
* @default true
* @memberof IonIntlTelInputComponent
*/
readonly selectFirstCountry: _angular_core.InputSignal<boolean>;
/**
* Determines whether to visually separate dialcode into the drop down element.
* See more on.
*
* @default true
* @memberof IonIntlTelInputComponent
*/
readonly separateDialCode: _angular_core.InputSignal<boolean>;
/**
* Fires when the Phone number Input is changed.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly numberChange: _angular_core.OutputEmitterRef<Event>;
/**
* Fires when the Phone number Input is blurred.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly numberBlur: _angular_core.OutputEmitterRef<void>;
/**
* Fires when the Phone number Input is focused.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly numberFocus: _angular_core.OutputEmitterRef<void>;
/**
* Fires when the user is typing in Phone number Input.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly numberInput: _angular_core.OutputEmitterRef<KeyboardEvent>;
/**
* Fires when the dial code selection is changed.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly codeChange: _angular_core.OutputEmitterRef<CountryI>;
/**
* Fires when the dial code selection modal is opened.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly codeOpen: _angular_core.OutputEmitterRef<any>;
/**
* Fires when the dial code selection modal is closed.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly codeClose: _angular_core.OutputEmitterRef<any>;
/**
* Fires when a dial code is selected in dial code selection modal.
* See more on.
*
* @memberof IonIntlTelInputComponent
*/
readonly codeSelect: _angular_core.OutputEmitterRef<string>;
private readonly numberInputEl;
private _value;
country: CountryI;
phoneNumber: string;
countries: CountryI[];
disabled: boolean;
onTouched: () => void;
propagateChange: (_: string | null) => void;
constructor();
get value(): string | null;
set value(value: string | null);
emitValueChange(change: string | null): void;
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
writeValue(obj: string): void;
setDisabledState(isDisabled: boolean): void;
fillValues(value: string): void;
hasValue(): boolean;
openModal(): Promise<void>;
onCodeChange(): void;
onIonNumberChange(event: Event): void;
onIonNumberBlur(): void;
onIonNumberFocus(): void;
onIonNumberInput(event: KeyboardEvent): void;
onNumberChange(): void;
onNumberKeyDown(event: KeyboardEvent): void;
private fetchAllCountries;
private getCountryByIsoCode;
private isNullOrWhiteSpace;
private removeDialCode;
private setCountry;
private setPreferredCountries;
private readonly getClasses;
private readonly setClasses;
private readonly setIonicClasses;
private readonly setItemClass;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IonIntlTelInputComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IonIntlTelInputComponent, "ion-intl-tel-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "defaultCountryiso": { "alias": "defaultCountryiso"; "required": false; "isSignal": true; }; "dialCodePrefix": { "alias": "dialCodePrefix"; "required": false; "isSignal": true; }; "enableAutoCountrySelect": { "alias": "enableAutoCountrySelect"; "required": false; "isSignal": true; }; "enablePlaceholder": { "alias": "enablePlaceholder"; "required": false; "isSignal": true; }; "fallbackPlaceholder": { "alias": "fallbackPlaceholder"; "required": false; "isSignal": true; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; "isSignal": true; }; "inputLabel": { "alias": "inputLabel"; "required": false; "isSignal": true; }; "inputLabelColor": { "alias": "inputLabelColor"; "required": false; "isSignal": true; }; "inputLabelPlacement": { "alias": "inputLabelPlacement"; "required": false; "isSignal": true; }; "usePatternPlaceholder": { "alias": "usePatternPlaceholder"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "modalTitle": { "alias": "modalTitle"; "required": false; "isSignal": true; }; "modalCssClass": { "alias": "modalCssClass"; "required": false; "isSignal": true; }; "modalSearchPlaceholder": { "alias": "modalSearchPlaceholder"; "required": false; "isSignal": true; }; "modalCloseText": { "alias": "modalCloseText"; "required": false; "isSignal": true; }; "modalCloseButtonSlot": { "alias": "modalCloseButtonSlot"; "required": false; "isSignal": true; }; "modalCanSearch": { "alias": "modalCanSearch"; "required": false; "isSignal": true; }; "modalShouldBackdropClose": { "alias": "modalShouldBackdropClose"; "required": false; "isSignal": true; }; "modalShouldFocusSearchbar": { "alias": "modalShouldFocusSearchbar"; "required": false; "isSignal": true; }; "modalSearchFailText": { "alias": "modalSearchFailText"; "required": false; "isSignal": true; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "selectFirstCountry": { "alias": "selectFirstCountry"; "required": false; "isSignal": true; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; "isSignal": true; }; }, { "numberChange": "numberChange"; "numberBlur": "numberBlur"; "numberFocus": "numberFocus"; "numberInput": "numberInput"; "codeChange": "codeChange"; "codeOpen": "codeOpen"; "codeClose": "codeClose"; "codeSelect": "codeSelect"; }, never, never, true, never>;
}
declare class IonIntTelCodeComponent implements OnInit {
private readonly modalController;
readonly country: _angular_core.InputSignal<CountryI>;
readonly canSearch: _angular_core.InputSignal<boolean>;
readonly closeButtonText: _angular_core.InputSignal<string>;
readonly closeButtonSlot: _angular_core.InputSignal<string>;
readonly countries: _angular_core.InputSignal<CountryI[]>;
readonly searchFailText: _angular_core.InputSignal<string>;
readonly searchPlaceholder: _angular_core.InputSignal<string>;
readonly shouldFocusSearchbar: _angular_core.InputSignal<boolean>;
readonly title: _angular_core.InputSignal<string>;
readonly dialCode: _angular_core.InputSignal<string>;
protected readonly searchBar: _angular_core.Signal<IonSearchbar>;
protected readonly displayedCountries: _angular_core.Signal<CountryI[]>;
protected readonly searchText: _angular_core.WritableSignal<string>;
protected readonly notFound: _angular_core.Signal<boolean>;
private allCountries;
ngOnInit(): void;
ionViewDidEnter(): void;
search(ev: any): void;
itemTapped(c: any): Promise<void>;
closeModal(): Promise<void>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IonIntTelCodeComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IonIntTelCodeComponent, "ion-intl-tel-code", never, { "country": { "alias": "country"; "required": false; "isSignal": true; }; "canSearch": { "alias": "canSearch"; "required": false; "isSignal": true; }; "closeButtonText": { "alias": "closeButtonText"; "required": false; "isSignal": true; }; "closeButtonSlot": { "alias": "closeButtonSlot"; "required": false; "isSignal": true; }; "countries": { "alias": "countries"; "required": false; "isSignal": true; }; "searchFailText": { "alias": "searchFailText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "shouldFocusSearchbar": { "alias": "shouldFocusSearchbar"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dialCode": { "alias": "dialCode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare class IonIntlTelInputService {
countryList: CountryI[];
constructor();
getListOfCountries(): any;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IonIntlTelInputService, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<IonIntlTelInputService>;
}
export { IonIntTelCodeComponent, IonIntlTelInputComponent, IonIntlTelInputService, IonIntlTelInputValidatorDirective, IonIntlTelInputValidators };