ng19-intl-tel-input
Version:
An Angular wrapper for intl-tel-input library, updated for Angular 19
112 lines (106 loc) • 4.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, PLATFORM_ID, HostListener, Output, Input, Inject, Directive, NgModule } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import intlTelInput from 'intl-tel-input';
import 'intl-tel-input/build/css/intlTelInput.css';
const defaultUtilScript = 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.1/js/utils.js';
class ng19TelInput {
el;
platformId;
ng19TelInputOptions = {};
hasError = new EventEmitter();
ng19TelOutput = new EventEmitter();
countryChange = new EventEmitter();
intlTelInputObject = new EventEmitter();
ngTelInput;
constructor(el, platformId) {
this.el = el;
this.platformId = platformId;
}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
this.ng19TelInputOptions = {
...this.ng19TelInputOptions,
utilsScript: this.getUtilsScript(this.ng19TelInputOptions)
};
this.ngTelInput = intlTelInput(this.el.nativeElement, {
...this.ng19TelInputOptions
});
this.el.nativeElement.addEventListener("countrychange", () => {
this.countryChange.emit(this.ngTelInput.getSelectedCountryData());
});
this.intlTelInputObject.emit(this.ngTelInput);
}
}
onBlur() {
let isInputValid = this.isInputValid();
if (isInputValid) {
let telOutput = this.ngTelInput.getNumber();
this.hasError.emit(isInputValid);
this.ng19TelOutput.emit(telOutput);
}
else {
this.hasError.emit(isInputValid);
}
}
isInputValid() {
return this.ngTelInput.isValidNumber();
}
setCountry(country) {
this.ngTelInput.setCountry(country);
}
getUtilsScript(options) {
return options.utilsScript || defaultUtilScript;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ng19TelInput, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ng19TelInput, isStandalone: false, selector: "[ng19TelInput]", inputs: { ng19TelInputOptions: "ng19TelInputOptions" }, outputs: { hasError: "hasError", ng19TelOutput: "ng19TelOutput", countryChange: "countryChange", intlTelInputObject: "intlTelInputObject" }, host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ng19TelInput, decorators: [{
type: Directive,
args: [{
selector: '[ng19TelInput]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }], propDecorators: { ng19TelInputOptions: [{
type: Input,
args: ['ng19TelInputOptions']
}], hasError: [{
type: Output,
args: ['hasError']
}], ng19TelOutput: [{
type: Output,
args: ['ng19TelOutput']
}], countryChange: [{
type: Output,
args: ['countryChange']
}], intlTelInputObject: [{
type: Output,
args: ['intlTelInputObject']
}], onBlur: [{
type: HostListener,
args: ['blur']
}] } });
// projects/ng19-tel-input/src/lib/ng19-tel-input.module.ts
class Ng19TelInputModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng19TelInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: Ng19TelInputModule, declarations: [ng19TelInput], exports: [ng19TelInput] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng19TelInputModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng19TelInputModule, decorators: [{
type: NgModule,
args: [{
declarations: [ng19TelInput],
exports: [ng19TelInput]
}]
}] });
/*
* Public API Surface of ng19-intl-tel-input
*/
/**
* Generated bundle index. Do not edit.
*/
export { Ng19TelInputModule, ng19TelInput };
//# sourceMappingURL=ng19-intl-tel-input.mjs.map