@serene-dev/ng-tel-input
Version:
This is a wrapper for [intl-tel-input@ 23.0.10](https://github.com/jackocnr/intl-tel-input)
139 lines (134 loc) • 6.24 kB
JavaScript
import { isPlatformBrowser } from '@angular/common';
import * as i0 from '@angular/core';
import { input, output, computed, PLATFORM_ID, Directive, Inject, HostListener } from '@angular/core';
// import { Options, Plugin } from 'intl-tel-input/utils-compiled';
/**
* Directive to validate input of telephone numbers
*/
class NGTelInputDirective {
/**
* Directive to validate input of telephone numbers
*/
constructor(
/**
* Reference to the input element.
*/
elementRef, platformId) {
this.elementRef = elementRef;
this.platformId = platformId;
/**
* Path to intl-tel-input js script.
* IF you wish to import the script outside the directive, you can set this field as undefined or null.
*/
this.scriptPath = input('https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/js/intlTelInput.min.js');
/**
* Path to intl-tel-input utils js script.
*/
this.utilScriptPath = input('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.10/js/utils.js');
/**
* Options that can be provided during initialization.
*/
this._ng2TelInputOptions = input({}, { alias: 'ng2TelInputOptions' });
/**
* Emits an event when an error occurs.
*/
this.hasError = output();
/**
* Emits the current number in the given format (defaults to E.164 standard). The different formats are available in the enum intlTelInputUtils.numberFormat - taken from here. Requires the utilsScript option. Note that even if nationalMode is enabled, this can still return a full international number.
*/
this.ng2TelOutput = output();
/**
* Emits the country data for the currently selected flag.
*/
this.countryChange = output();
/**
* Emits the instance of the intl-tel-input object
*/
this.intlTelInputObject = output();
/**
* Computed Options
*/
this.ng2TelInputOptions = computed(() => ({
...this._ng2TelInputOptions(),
utilsScript: this.utilScriptPath() || this._ng2TelInputOptions()?.utilsScript,
}));
}
/**
* initialise the plugin with optional options.
*/
async ngOnInit() {
await new Promise((resolve) => {
if (this.scriptPath()) {
const scripTag = document.createElement('script');
scripTag.src = this.scriptPath();
document.getElementsByTagName('body')[0].appendChild(scripTag);
scripTag.onload = (e) => {
resolve(true);
};
}
});
if (isPlatformBrowser(this.platformId)) {
// iti;
// debugger;
this.instance = window['intlTelInput'](this.elementRef.nativeElement, {
...this.ng2TelInputOptions(),
});
this.elementRef.nativeElement.addEventListener('countrychange', () => {
this.countryChange.emit(this.instance?.getSelectedCountryData());
});
this.intlTelInputObject.emit(this.instance);
}
}
/**
* Runs validation checks after the content of the input changes.
*/
onBlur() {
let isInputValid = this.isInputValid();
if (isInputValid) {
let telOutput = this.instance?.getNumber();
this.hasError.emit(isInputValid);
this.ng2TelOutput.emit(telOutput);
}
else {
this.hasError.emit(isInputValid);
}
}
/**
* Validate the current number. Expects an internationally formatted number (unless nationalMode is enabled). If validation fails, you can use getValidationError to get more information. Requires the utilsScript option. Also see getNumberType if you want to make sure the user enters a certain type of number e.g. a mobile number.
* @returns Boolean
*/
isInputValid() {
return this.instance?.isValidNumber();
}
/**
* Change the country selection (e.g. when the user is entering their address).
* @param countryCode — country code of the country to be set.
*/
setCountry(country) {
this.instance?.setCountry(country);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NGTelInputDirective, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NGTelInputDirective, isStandalone: true, selector: "[ngTelInput]", inputs: { scriptPath: { classPropertyName: "scriptPath", publicName: "scriptPath", isSignal: true, isRequired: false, transformFunction: null }, utilScriptPath: { classPropertyName: "utilScriptPath", publicName: "utilScriptPath", isSignal: true, isRequired: false, transformFunction: null }, _ng2TelInputOptions: { classPropertyName: "_ng2TelInputOptions", publicName: "ng2TelInputOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasError: "hasError", ng2TelOutput: "ng2TelOutput", countryChange: "countryChange", intlTelInputObject: "intlTelInputObject" }, host: { listeners: { "blur": "onBlur()" } }, exportAs: ["ngTelInput"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NGTelInputDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngTelInput]',
standalone: true,
exportAs: 'ngTelInput',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }], propDecorators: { onBlur: [{
type: HostListener,
args: ['blur']
}] } });
/*
* Public API Surface of ng-tel-input
*/
/**
* Generated bundle index. Do not edit.
*/
export { NGTelInputDirective };
//# sourceMappingURL=serene-dev-ng-tel-input.mjs.map