ngx-mat-intl-tel-input
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.
96 lines • 5.09 kB
TypeScript
import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import { MatFormFieldControl } from '@angular/material/form-field';
import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { CountryCode as CC, E164Number, NationalNumber, PhoneNumber } from 'libphonenumber-js';
import { CountryCode } from './data/country-code';
import { Country } from './model/country.model';
import { PhoneNumberFormat } from './model/phone-number-format.model';
import { FocusMonitor } from '@angular/cdk/a11y';
import { CanUpdateErrorState, ErrorStateMatcher, _AbstractConstructor, _Constructor } from '@angular/material/core';
import { MatInput } from '@angular/material/input';
import { MatMenu } from '@angular/material/menu';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
declare class NgxMatIntlTelInputBase {
_defaultErrorStateMatcher: ErrorStateMatcher;
_parentForm: NgForm;
_parentFormGroup: FormGroupDirective;
/** @docs-private */
ngControl: NgControl;
readonly stateChanges: Subject<void>;
constructor(_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective,
/** @docs-private */
ngControl: NgControl);
}
declare type CanUpdateErrorStateCtor = _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState>;
declare const _NgxMatIntlTelInputMixinBase: CanUpdateErrorStateCtor & typeof NgxMatIntlTelInputBase;
export declare class NgxMatIntlTelInputComponent extends _NgxMatIntlTelInputMixinBase implements OnInit, OnDestroy, DoCheck, CanUpdateErrorState, MatFormFieldControl<any> {
private _changeDetectorRef;
private countryCodeData;
private fm;
private elRef;
ngControl: NgControl;
static nextId: number;
preferredCountries: Array<string>;
enablePlaceholder: boolean;
inputPlaceholder: string | undefined;
cssClass: string | undefined;
name: string | undefined;
onlyCountries: Array<string>;
errorStateMatcher: ErrorStateMatcher;
enableSearch: boolean;
searchPlaceholder: string | undefined;
describedBy: string;
get format(): PhoneNumberFormat;
set format(value: PhoneNumberFormat);
matMenu: MatMenu | undefined;
private _placeholder;
private _required;
private _disabled;
stateChanges: Subject<void>;
focused: boolean;
id: string;
phoneNumber: NationalNumber | undefined;
allCountries: Array<Country>;
preferredCountriesInDropDown: Array<Country>;
selectedCountry: Country | undefined;
numberInstance: PhoneNumber | undefined;
value: E164Number | string | undefined;
searchCriteria: string | undefined;
countryChanged: EventEmitter<Country>;
private previousFormattedNumber;
private _format;
static getPhoneNumberPlaceHolder(countryISOCode: CC): string | undefined;
onTouched: () => void;
propagateChange: (_: any) => void;
constructor(_changeDetectorRef: ChangeDetectorRef, countryCodeData: CountryCode, fm: FocusMonitor, elRef: ElementRef<HTMLElement>, ngControl: NgControl, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher);
ngOnInit(): void;
ngDoCheck(): void;
onPhoneNumberChange(): void;
onCountrySelect(country: Country, el: MatInput): void;
getCountry(code: string): Country;
onInputKeyPress(event: KeyboardEvent): void;
protected fetchCountryData(): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
writeValue(value: any): void;
get empty(): boolean;
get shouldLabelFloat(): boolean;
get placeholder(): string;
set placeholder(value: string);
get required(): boolean;
set required(value: boolean);
get disabled(): boolean;
set disabled(value: boolean);
setDescribedByIds(ids: string[]): void;
onContainerClick(event: MouseEvent): void;
reset(): void;
ngOnDestroy(): void;
private get formattedPhoneNumber();
private formatAsYouTypeIfEnabled;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatIntlTelInputComponent, [null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatIntlTelInputComponent, "ngx-mat-intl-tel-input", never, { "preferredCountries": "preferredCountries"; "enablePlaceholder": "enablePlaceholder"; "inputPlaceholder": "inputPlaceholder"; "cssClass": "cssClass"; "name": "name"; "onlyCountries": "onlyCountries"; "errorStateMatcher": "errorStateMatcher"; "enableSearch": "enableSearch"; "searchPlaceholder": "searchPlaceholder"; "describedBy": "describedBy"; "format": "format"; "placeholder": "placeholder"; "required": "required"; "disabled": "disabled"; }, { "countryChanged": "countryChanged"; }, never, never, true>;
}
export {};
//# sourceMappingURL=ngx-mat-intl-tel-input.component.d.ts.map