angular-phone-number-input
Version:
``` npm i angular-phone-number-input ``` Have implemented country-specific validations using [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js)
126 lines (125 loc) • 5.08 kB
TypeScript
import { AbstractControl, 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 AngularPhoneNumberInput implements ControlValueAccessor, Validator {
error: boolean | undefined;
defaultCountry: string;
preferredCountries: string[];
border: boolean;
sanitizer: DomSanitizer;
countryList: CountryData;
dataSet: CountryData;
showModal: boolean;
selectedCountry: Country;
inputFocused: boolean;
disabled: boolean;
value: string;
globeSVG: string;
/** Callback function triggered on value change. */
onChange: (value: string) => void;
/** Callback function triggered on input touch. */
onTouched: () => void;
/** Handles the input blur event. */
onBlur: () => void;
/**
* Handles the input focus event.
*/
onFocus: () => void;
/**
* Writes a new value to the input.
* @param obj - The new value.
*/
writeValue: (value: string) => void;
/**
* Registers a callback function to be executed when the input value changes.
* @param fn - The callback function.
*/
registerOnChange: (fn: () => void) => void;
/**
* Registers a callback function to be executed when the input is touched.
* @param fn - The callback function.
*/
registerOnTouched: (fn: () => void) => void;
/**
* Sets the disabled state of the input.
* @param isDisabled - The disabled state.
*/
setDisabledState: (isDisabled: boolean) => void;
/**
* Initializes default country and preferred countries on component initialization.
* Calls setDefaultCountry and setPreferredCountries methods.
*/
ngOnInit(): void;
/**
* Sets the default country based on the provided defaultCountry value.
* If the default country exists in the countryList, sets the selectedCountry accordingly.
*/
setDefaultCountry: () => void;
/**
* Sets preferred countries based on the provided preferredCountries array.
* Filters the countryList to contain only the preferred countries if they exist.
*/
setPreferredCountries: () => void;
/**
* Toggles the modal visibility and sets the dataSet to the current countryList.
*/
toggleModal(): void;
/**
* Sets the full phone number by concatenating the country dial code and the input value.
* Updates the value using the onChange callback.
* @returns {void}
*/
setFullPhoneNumber: () => void;
/**
* Selects a country and emits the corresponding event.
* @param {Country} data - The selected country data.
*/
selectCountry(data: {
key: string;
value: CountryData[string];
}): void;
/**
* Extracts the country code and phone number from the provided phone number string.
* @param {string} phoneNumber - The input phone number string.
* @returns {void}
*/
extractValues: (phoneNumber: string) => void;
/**
* Tries to determine the selected country based on the provided input value.
* Updates the selected country and value if a matching country code is found.
* @returns {void}
*/
getCountryWithInput(): void;
/**
* Emits the current input value.
*/
onInputChanged(): void;
/**
* Filters the countries based on the provided search term and updates the dataset.
* @param {string} searchTerm - The term to search for within country names or dial codes.
* @returns {void}
*/
filterCountries(searchTerm: string): void;
/**
* Handles changes in the search input by invoking the filterCountries method with the input value.
* @param {Event} event - The event object from the search input.
* @returns {void}
*/
onSearchChange(event: Event): void;
/**
* Retrieves the sanitized HTML representation of an icon string.
* @param {string | undefined} iconString - The string representation of an SVG icon.
* @returns {SafeHtml | undefined} The sanitized HTML representation of the icon string.
*/
getIcon: (iconString: string | undefined) => SafeHtml | undefined;
/**
* Validates the input control.
* @param control - The AbstractControl instance.
* @returns ValidationErrors if value is null.
*/
validate: (control: AbstractControl) => ValidationErrors | null;
static ɵfac: i0.ɵɵFactoryDeclaration<AngularPhoneNumberInput, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AngularPhoneNumberInput, "angular-phone-number-input", never, { "error": { "alias": "error"; "required": false; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "border": { "alias": "border"; "required": false; }; }, {}, never, never, true, never>;
}