ngx-phone-field/fesm2022/ngx-phone-field.mjs

An Angular directive for international phone input with country flag dropdowns.

import * as i0 from '@angular/core';
import { input, inject, ElementRef, Directive } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import intlTelInput from 'intl-tel-input';

class NgxPhoneField {
    ngxPhoneFieldParams = input({}, ...(ngDevMode ? [{ debugName: "ngxPhoneFieldParams" }] : []));
    defaultOptions = {
        initialCountry: '',
        allowDropdown: true,
        autoPlaceholder: 'polite',
        containerClass: '',
        countryOrder: [],
        countrySearch: true,
        customPlaceholder: null,
        dropdownContainer: null,
        excludeCountries: [],
        fixDropdownWidth: true,
        formatAsYouType: true,
        formatOnDisplay: true,
        geoIpLookup: null,
        hiddenInput: null,
        i18n: {},
        loadUtilsOnInit: '',
        nationalMode: true,
        onlyCountries: [],
        placeholderNumberType: 'MOBILE',
        showFlags: true,
        separateDialCode: false,
        strictMode: false,
        useFullscreenPopup: /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 500 || false,
        utilsScript: '',
        validationNumberType: 'MOBILE',
    };
    instance;
    inputListener;
    onTouched = () => { };
    onChange = () => { };
    el = inject(ElementRef);
    ngAfterViewInit() {
        this.instance = intlTelInput(this.el.nativeElement, {
            ...this.defaultOptions,
            ...this.ngxPhoneFieldParams(),
        });
        this.inputListener = () => {
            this.onChange(this.instance);
        };
        this.el.nativeElement.addEventListener('input', this.inputListener);
    }
    ngOnDestroy() {
        this.el.nativeElement.removeEventListener('input', this.inputListener);
        if (this.instance) {
            this.instance.destroy();
        }
    }
    writeValue(value) {
        if (value) {
            this.el.nativeElement.value = value;
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.el.nativeElement.disabled = isDisabled;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NgxPhoneField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.5", type: NgxPhoneField, isStandalone: true, selector: "[ngxPhoneField]", inputs: { ngxPhoneFieldParams: { classPropertyName: "ngxPhoneFieldParams", publicName: "ngxPhoneFieldParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: NgxPhoneField,
                multi: true,
            },
        ], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NgxPhoneField, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngxPhoneField]',
                    standalone: true,
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: NgxPhoneField,
                            multi: true,
                        },
                    ],
                }]
        }], propDecorators: { ngxPhoneFieldParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxPhoneFieldParams", required: false }] }] } });

/*
 * Public API Surface of intl-tel-input
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgxPhoneField };
//# sourceMappingURL=ngx-phone-field.mjs.map