UNPKG

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
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>; }