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.
100 lines (99 loc) • 5.34 kB
TypeScript
import { FocusMonitor } from '@angular/cdk/a11y';
import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, OnInit, WritableSignal } from '@angular/core';
import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatMenu } from '@angular/material/menu';
import { CountryCode as CC, E164Number, NationalNumber, PhoneNumber } from 'libphonenumber-js';
import { Subject } from 'rxjs';
import { Country } from './model/country.model';
import { PhoneNumberFormat } from './model/phone-number-format.model';
import * as i0 from "@angular/core";
declare class ngxMatInputTelBase {
_defaultErrorStateMatcher: ErrorStateMatcher;
_parentForm: NgForm;
_parentFormGroup: FormGroupDirective;
ngControl: NgControl;
constructor(_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
}
export 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';
cssClass?: string;
errorStateMatcher: ErrorStateMatcher;
placeholder: string;
maxLength: string | number;
name?: string;
preferredCountries: string[];
private _onlyCountries;
set onlyCountries(countries: string[]);
searchPlaceholder: string;
validation: 'isValid' | 'isPossible';
enablePlaceholder: boolean;
enableSearch: boolean;
resetOnChange: boolean;
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[]>;
$preferredCountriesInDropDown: WritableSignal<Country[]>;
$selectedCountry: WritableSignal<Country>;
numberInstance?: PhoneNumber;
value?: any;
searchCriteria?: string;
private _previousFormattedNumber?;
private _format;
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;
private _setPreferredCountriesInDropDown;
updateErrorState(): void;
private _setDefaultCountry;
ngDoCheck(): void;
ngOnDestroy(): void;
onPhoneNumberChange(): void;
private _setCountry;
onCountrySelect(country: Country, el: HTMLInputElement): void;
getCountry(code: CC): 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: i0.ɵɵFactoryDeclaration<NgxMatInputTelComponent, [null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatInputTelComponent, "ngx-mat-input-tel", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "name": { "alias": "name"; "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; }; }, { "countryChanged": "countryChanged"; }, never, never, true, never>;
static ngAcceptInputType_enablePlaceholder: unknown;
static ngAcceptInputType_enableSearch: unknown;
static ngAcceptInputType_resetOnChange: unknown;
static ngAcceptInputType_required: unknown;
static ngAcceptInputType_disabled: unknown;
}
export {};