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.
122 lines (116 loc) • 6.23 kB
TypeScript
import * as _angular_core from '@angular/core';
import { OnInit, DoCheck, OnDestroy, ElementRef, EventEmitter, WritableSignal, 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 { MatMenu } from '@angular/material/menu';
import { CountryCode, E164Number, NationalNumber, PhoneNumber } from 'libphonenumber-js';
import { Subject } from 'rxjs';
interface CountryFlag {
flagClass: string;
dialCode: string;
name?: string;
areaCodes?: string[];
}
interface Country extends CountryFlag {
name: string;
iso2: 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;
static nextId: number;
matMenu: MatMenu;
menuSearchInput?: ElementRef<HTMLInputElement>;
focusable: ElementRef;
id: string;
get shouldLabelFloat(): boolean;
autocomplete: 'off' | 'tel';
ariaLabel: string;
cssClass?: string;
defaultCountry?: CountryCode;
errorStateMatcher: ErrorStateMatcher;
maxLength: string | number;
name?: string;
placeholder: string;
preferredCountries: string[];
set onlyCountries(countryCodes: string[]);
searchPlaceholder: string;
validation: 'isValid' | 'isPossible';
enablePlaceholder: boolean;
enableSearch: boolean;
resetOnChange: 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;
describedBy: string;
phoneNumber?: E164Number | NationalNumber;
private _allCountries;
$availableCountries: WritableSignal<Country[]>;
$selectableCountries: _angular_core.Signal<Country[]>;
$preferredCountriesInDropDown: WritableSignal<Country[]>;
$selectablePreferredCountriesInDropDown: _angular_core.Signal<Country[]>;
$selectedCountry: WritableSignal<Country>;
numberInstance?: PhoneNumber;
value?: any;
$searchCriteria: _angular_core.ModelSignal<string>;
private _previousFormattedNumber?;
onTouched: () => void;
propagateChange: (_: any) => void;
private errorState?;
constructor(_changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>, _ngControl: NgControl, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher);
ngOnInit(): void;
ngOnDestroy(): void;
ngDoCheck(): void;
onMenuOpened(): void;
updateErrorState(): void;
private _setPreferredCountriesInDropDown;
private _setDefaultCountry;
private _getFilteredCountries;
onPhoneNumberChange(): void;
private _setCountry;
onCountrySelect(country: Country): void;
getCountry(code: CountryCode): Country;
onInputKeyPress(event: any): void;
protected _initAllCountries(): 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, { 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; }; "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; }; "format": { "alias": "format"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "$searchCriteria": { "alias": "$searchCriteria"; "required": false; "isSignal": true; }; }, { "countryChanged": "countryChanged"; "$searchCriteria": "$searchCriteriaChange"; }, never, never, true, never>;
static ngAcceptInputType_enablePlaceholder: unknown;
static ngAcceptInputType_enableSearch: unknown;
static ngAcceptInputType_resetOnChange: unknown;
static ngAcceptInputType_required: unknown;
static ngAcceptInputType_disabled: unknown;
}
declare const ngxMatInputTelValidator: (control: AbstractControl) => ValidationErrors | null;
export { NgxMatInputTelComponent, ngxMatInputTelValidator };