angular-phone-number
Version:
A comprehensive international phone number input component for Angular applications with country selection, validation, and formatting.
112 lines (111 loc) • 4.12 kB
TypeScript
import { ElementRef, EventEmitter, SimpleChanges, OnInit, OnChanges } from '@angular/core';
import { ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { CountryData } from '../data-types/countryList';
import { Country } from '../data-types/country';
import * as i0 from "@angular/core";
export declare class AngularPhoneNumber implements ControlValueAccessor, Validator, OnInit, OnChanges {
private elementRef;
error: boolean | undefined;
defaultCountry: string;
preferredCountries: string[];
border: boolean;
disabled: boolean;
language: 'ar' | 'en';
mode: 'ar' | 'all';
priorityCountries: string[];
inputChanged: EventEmitter<string | number | null>;
countryChanged: EventEmitter<Country | null>;
modalOpened: EventEmitter<boolean>;
sanitizer: DomSanitizer;
countryList: CountryData;
dataSet: Country[];
showModal: boolean;
selectedCountry: Country;
inputFocused: boolean;
value: string;
globeSVG: string;
private static readonly ARAB_COUNTRY_CODES;
constructor(elementRef: ElementRef);
onClickOutside(event: MouseEvent): void;
onChange: (value: string) => void;
onTouched: () => void;
onBlur(): void;
onFocus(): void;
writeValue(value: string): void;
registerOnChange(fn: (value: string) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState(isDisabled: boolean): void;
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
/**
* Initialize component with the correct country ordering and filtering
*/
private initializeComponent;
/**
* Apply all ordering rules to the country list
*/
private applyCountryOrdering;
/**
* Reset country list to the original dataset
*/
private resetCountryList;
/**
* Sets the default country based on input
*/
private setDefaultCountry;
/**
* Apply preferred countries filter to narrow down the available options
*/
private applyPreferredCountriesFilter;
/**
* Toggle the country selection modal
*/
toggleModal(): void;
/**
* Update the full phone number value and notify changes
*/
setFullPhoneNumber(): void;
/**
* Handle country selection
*/
selectCountry(data: Country): void;
/**
* Extract country code and phone number from input
*/
extractValues(phoneNumber: string): void;
/**
* Try to determine the country from user input
*/
getCountryWithInput(): void;
/**
* Handle input changes
*/
onInputChanged(): void;
/**
* Filter countries based on search term
*/
filterCountries(searchTerm: string): void;
/**
* Handle search input changes
*/
onSearchChange(event: Event): void;
/**
* Prioritize Arab countries if mode is 'ar'
*/
prioritizeArabCountries(): void;
/**
* Apply priority countries to the top of the list
*/
applyPriorityCountries(): void;
/**
* Get sanitized SVG icon
*/
getIcon(iconString: string | undefined): SafeHtml | undefined;
/**
* Validate the phone number input
*/
validate(): ValidationErrors | null;
static ɵfac: i0.ɵɵFactoryDeclaration<AngularPhoneNumber, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AngularPhoneNumber, "angular-phone-number", never, { "error": { "alias": "error"; "required": false; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "border": { "alias": "border"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "language": { "alias": "language"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "priorityCountries": { "alias": "priorityCountries"; "required": false; }; }, { "inputChanged": "inputChanged"; "countryChanged": "countryChanged"; "modalOpened": "modalOpened"; }, never, never, true, never>;
}