ngxsmk-tel-input
Version:
Angular international telephone input (intl-tel-input UI + libphonenumber-js validation). ControlValueAccessor. SSR-safe.
133 lines • 7.49 kB
TypeScript
import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
import { CountryCode } from 'libphonenumber-js';
import { NgxsmkTelInputService } from './ngxsmk-tel-input.service';
import { CountryMap, IntlTelI18n } from './types';
import * as i0 from "@angular/core";
export declare class NgxsmkTelInputComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor, Validator {
private readonly zone;
private readonly tel;
inputRef: ElementRef<HTMLInputElement>;
initialCountry: CountryCode | 'auto';
preferredCountries: CountryCode[];
onlyCountries?: CountryCode[];
/** Dropdown shows dial code; input will NEVER show dial code */
separateDialCode: boolean;
allowDropdown: boolean;
/** 'formatted' => national with spaces; 'digits' => digits only */
nationalDisplay: 'formatted' | 'digits';
/** 'typing' (live), 'blur', or 'off' */
formatWhenValid: 'off' | 'blur' | 'typing';
placeholder?: string;
autocomplete: string;
name?: string;
inputId?: string;
disabled: boolean;
label?: string;
hint?: string;
errorText?: string;
size: 'sm' | 'md' | 'lg';
variant: 'outline' | 'filled' | 'underline';
showClear: boolean;
autoFocus: boolean;
selectOnFocus: boolean;
showErrorWhenTouched: boolean;
dropdownAttachToBody: boolean;
dropdownZIndex: number;
i18n?: IntlTelI18n;
set telI18n(v: IntlTelI18n | undefined);
localizedCountries?: CountryMap;
set telLocalizedCountries(v: CountryMap | undefined);
clearAriaLabel: string;
dir: 'ltr' | 'rtl';
autoPlaceholder: 'off' | 'polite' | 'aggressive';
utilsScript?: string;
customPlaceholder?: (example: string, country: any) => string;
digitsOnly: boolean;
lockWhenValid: boolean;
theme: 'light' | 'dark' | 'auto';
countryChange: EventEmitter<{
iso2: CountryCode;
}>;
validityChange: EventEmitter<boolean>;
inputChange: EventEmitter<{
raw: string;
e164: string | null;
iso2: CountryCode;
}>;
private iti;
private onChange;
private onTouchedCb;
private validatorChange?;
private lastEmittedValid;
private pendingWrite;
private touched;
private isDestroyed;
private eventListeners;
private allowDropdownWasTrue;
private suppressEvents;
readonly resolvedId: string;
private readonly platformId;
private currentTheme;
constructor(zone: NgZone, tel: NgxsmkTelInputService);
ngAfterViewInit(): void;
private initAndWire;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
writeValue(val: string | null): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
validate(_: AbstractControl): ValidationErrors | null;
registerOnValidatorChange(fn: () => void): void;
focus(): void;
selectCountry(iso2: CountryCode): void;
clearInput(): void;
private initIntlTelInput;
private reinitPlugin;
private destroyPlugin;
private bindDomListeners;
onBlur(): void;
onFocus(): void;
private handleInput;
/** Convert any string to digits only (NSN basis). */
private toNSN;
/** Strip exactly one leading trunk '0' from national input. */
private stripLeadingZero;
/** Current country calling code (e.g. "44", "94"). */
private currentDialCode;
/** Convert E.164 (+<cc><nsn>) to NSN (never includes trunk '0'). */
private nsnFromE164;
/** Format NSN for a region (adds spaces but NEVER a trunk '0'). */
private formatNSN;
/** Compose visible value based on settings. */
private displayValue;
currentRaw(): string;
private currentIso2;
private setInputValue;
get showError(): boolean;
private isCurrentlyValid;
/** Make flag/dropdown non-interactive when disabled */
private applyDisabledUi;
/** Returns true if nsn would be TOO_LONG for the current country. */
private wouldExceedMax;
/** Clean up event listeners to prevent memory leaks */
private cleanupEventListeners;
/** Detect and apply theme based on user preference and system settings */
private detectAndApplyTheme;
/** Apply theme to the component */
private applyTheme;
/** Apply theme to the dropdown if it exists */
private applyThemeToDropdown;
/** Get current theme */
getCurrentTheme(): 'light' | 'dark';
/** Set theme programmatically */
setTheme(theme: 'light' | 'dark'): void;
/** Update dropdown theme when it's opened */
private updateDropdownTheme;
/** Setup observer to watch for dropdown changes and apply theme */
private setupDropdownThemeObserver;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkTelInputComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxsmkTelInputComponent, "ngxsmk-tel-input", never, { "initialCountry": { "alias": "initialCountry"; "required": false; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "allowDropdown": { "alias": "allowDropdown"; "required": false; }; "nationalDisplay": { "alias": "nationalDisplay"; "required": false; }; "formatWhenValid": { "alias": "formatWhenValid"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; }; "showErrorWhenTouched": { "alias": "showErrorWhenTouched"; "required": false; }; "dropdownAttachToBody": { "alias": "dropdownAttachToBody"; "required": false; }; "dropdownZIndex": { "alias": "dropdownZIndex"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "telI18n": { "alias": "telI18n"; "required": false; }; "localizedCountries": { "alias": "localizedCountries"; "required": false; }; "telLocalizedCountries": { "alias": "telLocalizedCountries"; "required": false; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "autoPlaceholder": { "alias": "autoPlaceholder"; "required": false; }; "utilsScript": { "alias": "utilsScript"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "digitsOnly": { "alias": "digitsOnly"; "required": false; }; "lockWhenValid": { "alias": "lockWhenValid"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; }, { "countryChange": "countryChange"; "validityChange": "validityChange"; "inputChange": "inputChange"; }, never, never, true, never>;
}
//# sourceMappingURL=ngxsmk-tel-input.component.d.ts.map