ngx-material-intl-tel-input
Version:
Angular Material international telephone input
191 lines (190 loc) • 11.7 kB
TypeScript
import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, ControlContainer, FormControl, FormGroup } from '@angular/forms';
import { MatSelect } from '@angular/material/select';
import { ReplaySubject, Subject } from 'rxjs';
import { CountryCode } from '../data/country-code';
import { Country } from '../types/country.model';
import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
import { MatFormFieldAppearance } from '@angular/material/form-field';
import { GeoIpService } from '../services/geo-ip/geo-ip.service';
import { TextLabels } from '../types/text-labels.type';
import { CountryDataService } from '../services/country-data/country-data.service';
import * as i0 from "@angular/core";
export declare class NgxMaterialIntlTelInputComponent implements OnInit, AfterViewInit, OnDestroy {
private countryCodeData;
private geoIpService;
private countryDataService;
private controlContainer;
/** control for the selected country prefix */
prefixCtrl: FormControl<Country | null>;
/** control for the MatSelect filter keyword */
prefixFilterCtrl: FormControl<string | null>;
/** list of countries filtered by search keyword */
filteredCountries: ReplaySubject<Country[]>;
singleSelect: import("@angular/core").Signal<MatSelect | undefined>;
numberInput: import("@angular/core").Signal<ElementRef<any> | undefined>;
/** Subject that emits when the component has been destroyed. */
protected _onDestroy: Subject<void>;
allCountries: Country[];
phoneNumberUtil: PhoneNumberUtil;
telForm: FormGroup<{
prefixCtrl: FormControl<Country | null>;
numberControl: FormControl<string | null>;
}>;
fieldControl: import("@angular/core").ModelSignal<AbstractControl<string | null, string | null> | FormControl<any> | null>;
fieldControlName: import("@angular/core").InputSignal<string>;
required: import("@angular/core").ModelSignal<boolean>;
disabled: import("@angular/core").ModelSignal<boolean>;
appearance: import("@angular/core").InputSignal<MatFormFieldAppearance>;
enablePlaceholder: import("@angular/core").InputSignal<boolean>;
autoIpLookup: import("@angular/core").InputSignal<boolean>;
autoSelectCountry: import("@angular/core").InputSignal<boolean>;
autoSelectedCountry: import("@angular/core").InputSignal<string>;
numberValidation: import("@angular/core").InputSignal<boolean>;
iconMakeCall: import("@angular/core").InputSignal<boolean>;
initialValue: import("@angular/core").ModelSignal<string>;
enableSearch: import("@angular/core").InputSignal<boolean>;
includeDialCode: import("@angular/core").InputSignal<boolean>;
emojiFlags: import("@angular/core").InputSignal<boolean>;
hidePhoneIcon: import("@angular/core").InputSignal<boolean>;
preferredCountries: import("@angular/core").InputSignal<string[]>;
visibleCountries: import("@angular/core").InputSignal<string[]>;
excludedCountries: import("@angular/core").InputSignal<string[]>;
textLabels: import("@angular/core").InputSignal<TextLabels>;
useMask: import("@angular/core").InputSignal<boolean>;
forceSelectedCountryCode: import("@angular/core").InputSignal<boolean>;
showMaskPlaceholder: import("@angular/core").InputSignal<boolean>;
outputNumberFormat: import("@angular/core").InputSignal<PhoneNumberFormat.E164 | PhoneNumberFormat.INTERNATIONAL | PhoneNumberFormat.RFC3966>;
currentValue: import("@angular/core").OutputEmitterRef<string>;
currentCountryCode: import("@angular/core").OutputEmitterRef<string>;
currentCountryISO: import("@angular/core").OutputEmitterRef<string>;
isFocused: import("@angular/core").WritableSignal<boolean>;
isLoading: import("@angular/core").WritableSignal<boolean>;
constructor(countryCodeData: CountryCode, geoIpService: GeoIpService, countryDataService: CountryDataService, controlContainer: ControlContainer);
/**
* Initialize the component and perform necessary setup tasks.
*
*/
ngOnInit(): void;
/**
* Fetches country data and populates the allCountries array.
*/
protected fetchCountryData(): void;
/**
* Adds validations to the form field based on the current configuration.
* It sets required validators and disabled state, and if number validation is enabled,
* it adds a custom validator to check the validity of the phone number.
*/
private addValidations;
/**
* Sets the required validators for the field control based on the 'required' input property.
* If 'required' is true, adds a 'Validators.required' validator to the field control.
* If 'required' is false, removes the 'Validators.required' validator from the field control.
*/
setRequiredValidators(): void;
/**
* Sets the disabled state of the telForm and fieldControl based on the 'disabled' input property.
* If 'disabled' is true, both telForm and fieldControl are disabled.
* If 'disabled' is false, both telForm and fieldControl are enabled.
*/
setDisabledState(): void;
/**
* A lifecycle hook that is called after Angular has fully initialized a component's view.
*
* @return {void}
*/
ngAfterViewInit(): void;
/**
* Method called when the component is destroyed.
*
*/
ngOnDestroy(): void;
/**
* Performs a geo IP lookup and sets the prefix control value based on the country retrieved.
*/
private geoIpLookup;
/**
* Sets the initial value after the filteredCountries are loaded initially
*/
protected setInitialPrefixValue(): void;
/**
* Method to filter the list of countries based on a search keyword.
*
*/
protected filterCountries(): void;
/**
* A method that handles the focus event for the input.
*
*/
onInputFocus(): void;
/**
* A method that handles the blur event for the input.
*/
onInputBlur(): void;
/**
* Listens for changes in the telForm value and updates the fieldControl accordingly.
*/
private startTelFormValueChangesListener;
/**
* Listens for changes in the prefix control value and updates the number control accordingly.
* If includeDialCode is true and the data contains a dialCode, sets the number control value with the dial code.
* If isLoading is false, focuses on the number input element after a timeout.
*/
private startPrefixValueChangesListener;
/**
* Sets the initial telephone value based on the initial value.
*/
private setInitialTelValue;
/**
* Set the auto selected country based on the specified criteria.
*
*/
private setAutoSelectedCountry;
/**
* Listens to changes in the field control value and updates it accordingly.
* If the value is valid, it parses and formats it using the phoneNumberUtil.
* If the value is not valid, it sets the value as is.
* Finally, emits the currentValue signal with the updated field control value.
*/
private startFieldControlValueChangesListener;
/**
* Listens to changes in the status of the field control and updates the 'disabled' model accordingly.
* If the status is 'DISABLED', sets the 'disabled' model to true; otherwise, sets it to false.
*/
private startFieldControlStatusChangesListener;
/**
* Sets the field control based on the provided field control name.
* If the field control name exists in the control container, it sets the field control to that value.
* Additionally, it checks for the initial value, required validator, and disabled state of the field control.
*/
private setFieldControl;
/**
* Sets the cursor position in the input element after formatting the phone number.
*
* @param inputElement - The HTML input element where the cursor position is to be set.
* @param cursorPosition - The current cursor position in the input element.
* @param parsed - The parsed phone number object.
* @param currentValue - The current value of the input element.
*/
private setCursorPosition;
/**
* Adjusts the cursor position in an input field after a value change,
* accounting for added or removed spaces in the new value.
*
* @param originalPosition - The original cursor position before the value change.
* @param oldValue - The previous value of the input field.
* @param newValue - The new value of the input field.
* @returns The adjusted cursor position, ensuring it remains within valid bounds.
*/
private adjustCursorPosition;
/**
* Counts the number of spaces in a string before a specified position.
*
* @param value - The string to be evaluated.
* @param position - The position in the string up to which spaces are counted.
* @returns The number of spaces found before the specified position.
*/
private countSpacesBeforePosition;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxMaterialIntlTelInputComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxMaterialIntlTelInputComponent, "ngx-material-intl-tel-input", never, { "fieldControl": { "alias": "fieldControl"; "required": false; "isSignal": true; }; "fieldControlName": { "alias": "fieldControlName"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "enablePlaceholder": { "alias": "enablePlaceholder"; "required": false; "isSignal": true; }; "autoIpLookup": { "alias": "autoIpLookup"; "required": false; "isSignal": true; }; "autoSelectCountry": { "alias": "autoSelectCountry"; "required": false; "isSignal": true; }; "autoSelectedCountry": { "alias": "autoSelectedCountry"; "required": false; "isSignal": true; }; "numberValidation": { "alias": "numberValidation"; "required": false; "isSignal": true; }; "iconMakeCall": { "alias": "iconMakeCall"; "required": false; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "includeDialCode": { "alias": "includeDialCode"; "required": false; "isSignal": true; }; "emojiFlags": { "alias": "emojiFlags"; "required": false; "isSignal": true; }; "hidePhoneIcon": { "alias": "hidePhoneIcon"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "visibleCountries": { "alias": "visibleCountries"; "required": false; "isSignal": true; }; "excludedCountries": { "alias": "excludedCountries"; "required": false; "isSignal": true; }; "textLabels": { "alias": "textLabels"; "required": false; "isSignal": true; }; "useMask": { "alias": "useMask"; "required": false; "isSignal": true; }; "forceSelectedCountryCode": { "alias": "forceSelectedCountryCode"; "required": false; "isSignal": true; }; "showMaskPlaceholder": { "alias": "showMaskPlaceholder"; "required": false; "isSignal": true; }; "outputNumberFormat": { "alias": "outputNumberFormat"; "required": false; "isSignal": true; }; }, { "fieldControl": "fieldControlChange"; "required": "requiredChange"; "disabled": "disabledChange"; "initialValue": "initialValueChange"; "currentValue": "currentValue"; "currentCountryCode": "currentCountryCode"; "currentCountryISO": "currentCountryISO"; }, never, never, true, never>;
}