ngx-mat-input-tel
Version:
An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
162 lines (155 loc) • 8.04 kB
TypeScript
import * as _angular_core from '@angular/core';
import { OnInit, DoCheck, OnDestroy, ElementRef, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import { NgForm, FormGroupDirective, NgControl, AbstractControl, ValidationErrors } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { CountryCode, E164Number, NationalNumber, PhoneNumber } from 'libphonenumber-js';
import { Subject } from 'rxjs';
interface CountryFlag {
iso2: string;
dialCode: string;
name?: string;
areaCodes?: string[];
}
interface Country extends CountryFlag {
name: string;
priority: number;
placeholder?: string;
}
type PhoneNumberFormat = "default" | "national" | "international";
declare class ngxMatInputTelBase {
_defaultErrorStateMatcher: ErrorStateMatcher;
_parentForm: NgForm;
_parentFormGroup: FormGroupDirective;
ngControl: NgControl;
constructor(_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
}
declare class NgxMatInputTelComponent extends ngxMatInputTelBase implements OnInit, DoCheck, OnDestroy {
private _changeDetectorRef;
private _focusMonitor;
private _elementRef;
private _dialog;
static nextId: number;
focusable: ElementRef;
id: string;
get shouldLabelFloat(): boolean;
autocomplete: "off" | "tel";
ariaLabel: string;
cssClass?: string;
defaultCountry?: CountryCode;
errorStateMatcher: ErrorStateMatcher;
maxLength: string | number | undefined;
name: string;
placeholder: string;
countriesName: Record<string, string>;
private _preferredCountries;
set preferredCountries(value: string[]);
private _onlyCountries;
set onlyCountries(countryCodes: string[]);
searchPlaceholder: string;
validation: "isValid" | "isPossible";
enablePlaceholder: boolean;
enableSearch: boolean;
resetOnChange: boolean;
separateDialCode: boolean;
hideAreaCodes: boolean;
private _format;
set format(value: PhoneNumberFormat);
get format(): PhoneNumberFormat;
private _required;
set required(value: boolean);
get required(): boolean;
private _disabled;
set disabled(value: boolean);
get disabled(): boolean;
get empty(): boolean;
countryChanged: EventEmitter<Country>;
stateChanges: Subject<void>;
focused: boolean;
isDialCodeFocused: boolean;
isPhoneInputFocused: boolean;
describedBy: string;
phoneNumber?: E164Number | NationalNumber;
private _allCountries;
$availableCountries: _angular_core.WritableSignal<Record<string, Country>>;
$preferredCountriesInDropDown: _angular_core.WritableSignal<Record<string, Country>>;
$selectedCountry: _angular_core.WritableSignal<Country>;
numberInstance?: PhoneNumber;
value?: string | null;
private _previousFormattedNumber?;
onTouched: () => void;
propagateChange: (_: any) => void;
private errorState?;
constructor(_changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog, _ngControl: NgControl, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher);
ngOnInit(): void;
ngOnDestroy(): void;
ngDoCheck(): void;
openCountrySelector(): void;
updateErrorState(): void;
onPhoneNumberChange(): void;
private _setPreferredCountriesInDropDown;
private _setDefaultCountry;
private _getFilteredCountries;
private _setCountry;
onCountrySelect(country: {
key: string;
value: Country;
}): void;
getCountry(code: CountryCode): Country;
onInputKeyPress(event: any): void;
onDialCodeFocus(): void;
onDialCodeBlur(): void;
onPhoneInputFocus(): void;
onPhoneInputBlur(): void;
onPhoneInputBlurAndTouch(): void;
protected _initAllCountries(): Record<string, Country>;
private _getPhoneNumberPlaceHolder;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
writeValue(value: any): void;
setDescribedByIds(ids: string[]): void;
onContainerClick(event: MouseEvent): void;
reset(): void;
private formattedPhoneNumber;
private formatAsYouTypeIfEnabled;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatInputTelComponent, [null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null]>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatInputTelComponent, "ngx-mat-input-tel", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "countriesName": { "alias": "countriesName"; "required": false; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "validation": { "alias": "validation"; "required": false; }; "enablePlaceholder": { "alias": "enablePlaceholder"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "resetOnChange": { "alias": "resetOnChange"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "hideAreaCodes": { "alias": "hideAreaCodes"; "required": false; }; "format": { "alias": "format"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "countryChanged": "countryChanged"; }, never, never, true, never>;
static ngAcceptInputType_enablePlaceholder: unknown;
static ngAcceptInputType_enableSearch: unknown;
static ngAcceptInputType_resetOnChange: unknown;
static ngAcceptInputType_separateDialCode: unknown;
static ngAcceptInputType_hideAreaCodes: unknown;
static ngAcceptInputType_required: unknown;
static ngAcceptInputType_disabled: unknown;
}
interface NgxMatInputTelDialogData {
selectedCountry: Country;
availableCountries: Record<string, Country>;
preferredCountriesInDropDown: Record<string, Country>;
enableSearch: boolean;
searchPlaceholder: string;
ariaLabel: string;
}
declare class NgxMatInputTelDialog implements OnInit {
dialogRef: MatDialogRef<NgxMatInputTelDialog>;
data: NgxMatInputTelDialogData;
searchInput?: ElementRef<HTMLInputElement>;
$searchCriteria: _angular_core.WritableSignal<string>;
$selectableCountries: _angular_core.Signal<Record<string, Country>>;
$selectablePreferredCountriesInDropDown: _angular_core.Signal<Record<string, Country>>;
$showDivider: _angular_core.Signal<boolean>;
constructor(dialogRef: MatDialogRef<NgxMatInputTelDialog>, data: NgxMatInputTelDialogData);
ngOnInit(): void;
onCountrySelect(country: {
key: string;
value: Country;
}): void;
private _getOnSearchCountries;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatInputTelDialog, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatInputTelDialog, "ngx-mat-input-tel-dialog", never, {}, {}, never, never, true, never>;
}
declare function ngxMatInputTelValidatorFactory(onlyCountries?: string[]): (control: AbstractControl) => ValidationErrors | null;
export { NgxMatInputTelComponent, NgxMatInputTelDialog, ngxMatInputTelValidatorFactory };
export type { NgxMatInputTelDialogData };