("", [Validators.required]),
});
isSubmitted = false;
get phone() {
return this.fg.get("phone");
}
ngOnInit(): void {
this.phone?.valueChanges.subscribe(() => {
this.isSubmitted = false;
});
}
handleSubmit(): void {
this.phone?.markAsTouched();
if (this.fg.valid) {
this.isSubmitted = true;
}
}
}
================================================
FILE: angular/demo/form/index.html
================================================
Angular App - Form Validation Demo
Angular Form Validation Demo
A simple Angular app using reactive forms with the IntlTelInput component for phone number entry and validation.
Enter a phone number and click "Validate" to see form validation in action.
================================================
FILE: angular/demo/form/main.ts
================================================
import 'zone.js';
import "@angular/compiler";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './form.component';
bootstrapApplication(AppComponent)
.catch((err) => console.error(err));
================================================
FILE: angular/demo/set-number/index.html
================================================
Angular App - Set Number Demo
Angular App - Set Number Demo
A simple Angular app, using the IntlTelInput component to handle phone number entry, calling setNumber and validation.
Click "Set Number" then click "Validate" to check that the angular internals have updated correctly.
================================================
FILE: angular/demo/set-number/main.ts
================================================
import 'zone.js';
import "@angular/compiler";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './set-number.component';
bootstrapApplication(AppComponent)
.catch((err) => console.error(err));
================================================
FILE: angular/demo/set-number/set-number.component.ts
================================================
import { Component, ViewChild } from '@angular/core';
import { IntlTelInputComponent, PHONE_ERROR_MESSAGES } from '../../src/intl-tel-input/angularWithUtils';
@Component({
selector: "app-root",
template: `
@if (notice) {
{{ notice }}
}
`,
standalone: true,
imports: [IntlTelInputComponent]
})
export class AppComponent {
@ViewChild('telInput') telInput!: IntlTelInputComponent;
isValid: boolean | null = null;
number: string | null = null;
errorCode: number | null = null;
notice: string | null = null;
handleNumberChange(value: string): void {
this.number = value;
}
handleValidityChange(value: boolean): void {
this.isValid = value;
}
handleErrorCodeChange(value: number | null): void {
this.errorCode = value;
}
handleSetNumber(): void {
const instance = this.telInput?.getInstance();
if (instance) {
instance.setNumber('+14155552671');
}
}
handleSubmit(): void {
if (this.isValid) {
this.notice = `Valid number: ${this.number}`;
} else {
const errorMessage = PHONE_ERROR_MESSAGES[this.errorCode || 0] || "Invalid number";
this.notice = `Error: ${errorMessage}`;
}
}
}
================================================
FILE: angular/demo/simple/index.html
================================================
Angular App - Simple Demo
Angular App - Simple Demo
A simple Angular app, using the IntlTelInput component to handle phone number entry.
================================================
FILE: angular/demo/simple/main.ts
================================================
import 'zone.js';
import "@angular/compiler";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './simple.component';
bootstrapApplication(AppComponent)
.catch((err) => console.error(err));
================================================
FILE: angular/demo/simple/simple.component.ts
================================================
import { Component } from '@angular/core';
import { IntlTelInputComponent } from '../../src/intl-tel-input/angularWithUtils';
@Component({
selector: "app-root",
template: `
`,
standalone: true,
imports: [IntlTelInputComponent]
})
export class AppComponent {}
================================================
FILE: angular/demo/toggle-disabled/index.html
================================================
Angular App - Toggle disabled prop Demo
Angular App - Toggle disabled prop Demo
A simple Angular app, using the IntlTelInput component to show it toggle.
Click the button to enable/disable component.
================================================
FILE: angular/demo/toggle-disabled/main.ts
================================================
import 'zone.js';
import "@angular/compiler";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './toggle-disabled.component';
bootstrapApplication(AppComponent)
.catch((err) => console.error(err));
================================================
FILE: angular/demo/toggle-disabled/toggle-disabled.component.ts
================================================
import { Component } from '@angular/core';
import { IntlTelInputComponent } from '../../src/intl-tel-input/angularWithUtils';
@Component({
selector: "app-root",
template: `
`,
standalone: true,
imports: [IntlTelInputComponent]
})
export class AppComponent {
isDisabled: boolean = false;
toggleDisabled(): void {
this.isDisabled = !this.isDisabled;
}
}
================================================
FILE: angular/demo/validation/index.html
================================================
Angular App - Validation Demo
Angular App - Validation Demo
A simple Angular app, using the IntlTelInput component to handle phone number entry and validation.
Enter a phone number below and click "Validate".
================================================
FILE: angular/demo/validation/main.ts
================================================
import 'zone.js';
import "@angular/compiler";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './validation.component';
bootstrapApplication(AppComponent)
.catch((err) => console.error(err));
================================================
FILE: angular/demo/validation/validation.component.ts
================================================
import { Component } from '@angular/core';
import { IntlTelInputComponent, PHONE_ERROR_MESSAGES } from '../../src/intl-tel-input/angularWithUtils';
@Component({
selector: "app-root",
template: `
@if (notice) {
{{ notice }}
}
`,
standalone: true,
imports: [IntlTelInputComponent]
})
export class AppComponent {
isValid: boolean | null = null;
number: string | null = null;
errorCode: number | null = null;
notice: string | null = null;
handleNumberChange(value: string): void {
this.number = value;
}
handleValidityChange(value: boolean): void {
this.isValid = value;
}
handleErrorCodeChange(value: number | null): void {
this.errorCode = value;
}
handleSubmit(): void {
if (this.isValid) {
this.notice = `Valid number: ${this.number}`;
} else {
const errorMessage = PHONE_ERROR_MESSAGES[this.errorCode || 0] || "Invalid number";
this.notice = `Error: ${errorMessage}`;
}
}
}
================================================
FILE: angular/src/intl-tel-input/angular.ts
================================================
import intlTelInput from "../intl-tel-input";
//* Keep the TS imports separate, as the above line gets substituted in the angularWithUtils build process.
import { Iti } from "../intl-tel-input";
import {
Component,
Input,
OnDestroy,
ViewChild,
ElementRef,
Output,
EventEmitter,
forwardRef,
AfterViewInit,
OnChanges,
SimpleChanges,
} from "@angular/core";
import {
ControlValueAccessor,
NG_VALUE_ACCESSOR,
NG_VALIDATORS,
Validator,
AbstractControl,
ValidationErrors,
} from "@angular/forms";
import { SomeOptions } from "../modules/types/public-api";
export { intlTelInput };
export const PHONE_ERROR_MESSAGES: string[] = [
"invalid",
"invalid-country-code",
"too-short",
"too-long",
"invalid-format",
];
@Component({
selector: "intl-tel-input",
standalone: true,
template: `
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => IntlTelInputComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => IntlTelInputComponent),
multi: true,
},
],
})
export class IntlTelInputComponent
implements
AfterViewInit,
OnDestroy,
OnChanges,
ControlValueAccessor,
Validator
{
@ViewChild("inputRef", { static: true })
inputRef!: ElementRef;
@Input() initialValue?: string;
@Input() usePreciseValidation: boolean = false;
@Input() inputProps: Record = {};
@Input() disabled: boolean = false;
@Input() initOptions?: SomeOptions;
@Output() numberChange = new EventEmitter();
@Output() countryChange = new EventEmitter();
@Output() validityChange = new EventEmitter();
@Output() errorCodeChange = new EventEmitter();
@Output() blur = new EventEmitter();
@Output() focus = new EventEmitter();
@Output() keydown = new EventEmitter();
@Output() keyup = new EventEmitter();
@Output() paste = new EventEmitter();
@Output() click = new EventEmitter();
private iti?: Iti;
private appliedInputPropKeys = new Set();
private lastEmittedNumber?: string;
private lastEmittedCountry?: string;
private lastEmittedValidity?: boolean;
private lastEmittedErrorCode?: number | null;
private countryChangeHandler = () => this.handleInput();
// eslint-disable-next-line class-methods-use-this
private onChange: (value: string) => void = () => {};
// eslint-disable-next-line class-methods-use-this
private onTouched: () => void = () => {};
// eslint-disable-next-line class-methods-use-this
private onValidatorChange: () => void = () => {};
ngAfterViewInit() {
if (this.inputRef.nativeElement) {
this.iti = intlTelInput(this.inputRef.nativeElement, this.initOptions);
}
this.inputRef.nativeElement.addEventListener(
"countrychange",
this.countryChangeHandler,
);
this.applyInputProps();
if (this.initialValue) {
this.iti?.setNumber(this.initialValue);
}
if (this.disabled) {
this.iti?.setDisabled(this.disabled);
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes["disabled"]) {
this.iti?.setDisabled(this.disabled);
}
if (changes["inputProps"]) {
this.applyInputProps();
}
}
handleInput() {
if (!this.iti) return;
const num = this.iti.getNumber() || "";
const countryIso = this.iti.getSelectedCountryData().iso2 || "";
let hasChanged = false;
if (num !== this.lastEmittedNumber) {
this.lastEmittedNumber = num;
this.numberChange.emit(num);
this.onChange(num);
hasChanged = true;
}
if (countryIso !== this.lastEmittedCountry) {
this.lastEmittedCountry = countryIso;
this.countryChange.emit(countryIso);
hasChanged = true;
}
const isValid = this.usePreciseValidation
? this.iti.isValidNumberPrecise()
: this.iti.isValidNumber();
const errorCode = isValid ? null : this.iti.getValidationError();
if (isValid !== this.lastEmittedValidity) {
this.lastEmittedValidity = isValid;
this.validityChange.emit(isValid);
hasChanged = true;
}
if (errorCode !== this.lastEmittedErrorCode) {
this.lastEmittedErrorCode = errorCode;
this.errorCodeChange.emit(errorCode);
hasChanged = true;
}
if (hasChanged) {
this.onValidatorChange();
}
}
handleBlur(event: FocusEvent) {
this.onTouched();
this.blur.emit(event);
}
handleFocus(event: FocusEvent) {
this.focus.emit(event);
}
handleKeyDown(event: KeyboardEvent) {
this.keydown.emit(event);
}
handleKeyUp(event: KeyboardEvent) {
this.keyup.emit(event);
}
handlePaste(event: ClipboardEvent) {
this.paste.emit(event);
}
handleClick(event: MouseEvent) {
this.click.emit(event);
}
/**
* This method must be called in `ngAfterViewInit` or later lifecycle hooks,
* not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.
*/
getInstance(): Iti | null {
return this.iti;
}
/**
* This method must be called in `ngAfterViewInit` or later lifecycle hooks,
* not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.
*/
getInput(): HTMLInputElement | null {
return this.inputRef.nativeElement;
}
ngOnDestroy() {
this.iti?.destroy();
this.inputRef.nativeElement.removeEventListener(
"countrychange",
this.countryChangeHandler,
);
}
private applyInputProps(): void {
const currentKeys = new Set();
Object.entries(this.inputProps).forEach(([key, value]) => {
currentKeys.add(key);
this.inputRef.nativeElement.setAttribute(key, value);
});
this.appliedInputPropKeys.forEach((key) => {
if (!currentKeys.has(key)) {
this.inputRef.nativeElement.removeAttribute(key);
}
});
this.appliedInputPropKeys = currentKeys;
}
// ============ ControlValueAccessor Implementation ============
writeValue(value: string | null): void {
if (this.iti) {
this.iti.setNumber(value || "");
}
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
this.iti?.setDisabled(isDisabled);
}
// ============ Validator Implementation ============
validate(control: AbstractControl): ValidationErrors | null {
if (!control.value || !this.iti) {
return null;
}
const isValid = this.usePreciseValidation
? this.iti.isValidNumberPrecise()
: this.iti.isValidNumber();
if (isValid) {
return null;
}
const errorCode = this.iti.getValidationError();
return {
invalidPhone: {
errorCode,
errorMessage: PHONE_ERROR_MESSAGES[errorCode] ?? "unknown",
},
};
}
registerOnValidatorChange(fn: () => void): void {
this.onValidatorChange = fn;
}
}
================================================
FILE: angular/src/intl-tel-input/angularWithUtils.ts
================================================
//* THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
import intlTelInput from "./intlTelInputWithUtils";
//* Keep the TS imports separate, as the above line gets substituted in the angularWithUtils build process.
import { Iti } from "../intl-tel-input";
import {
Component,
Input,
OnDestroy,
ViewChild,
ElementRef,
Output,
EventEmitter,
forwardRef,
AfterViewInit,
OnChanges,
SimpleChanges,
} from "@angular/core";
import {
ControlValueAccessor,
NG_VALUE_ACCESSOR,
NG_VALIDATORS,
Validator,
AbstractControl,
ValidationErrors,
} from "@angular/forms";
import { SomeOptions } from "../modules/types/public-api";
export { intlTelInput };
export const PHONE_ERROR_MESSAGES: string[] = [
"invalid",
"invalid-country-code",
"too-short",
"too-long",
"invalid-format",
];
@Component({
selector: "intl-tel-input",
standalone: true,
template: `
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => IntlTelInputComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => IntlTelInputComponent),
multi: true,
},
],
})
export class IntlTelInputComponent
implements
AfterViewInit,
OnDestroy,
OnChanges,
ControlValueAccessor,
Validator
{
@ViewChild("inputRef", { static: true })
inputRef!: ElementRef;
@Input() initialValue?: string;
@Input() usePreciseValidation: boolean = false;
@Input() inputProps: Record = {};
@Input() disabled: boolean = false;
@Input() initOptions?: SomeOptions;
@Output() numberChange = new EventEmitter();
@Output() countryChange = new EventEmitter();
@Output() validityChange = new EventEmitter();
@Output() errorCodeChange = new EventEmitter();
@Output() blur = new EventEmitter();
@Output() focus = new EventEmitter();
@Output() keydown = new EventEmitter();
@Output() keyup = new EventEmitter();
@Output() paste = new EventEmitter();
@Output() click = new EventEmitter();
private iti?: Iti;
private appliedInputPropKeys = new Set();
private lastEmittedNumber?: string;
private lastEmittedCountry?: string;
private lastEmittedValidity?: boolean;
private lastEmittedErrorCode?: number | null;
private countryChangeHandler = () => this.handleInput();
// eslint-disable-next-line class-methods-use-this
private onChange: (value: string) => void = () => {};
// eslint-disable-next-line class-methods-use-this
private onTouched: () => void = () => {};
// eslint-disable-next-line class-methods-use-this
private onValidatorChange: () => void = () => {};
ngAfterViewInit() {
if (this.inputRef.nativeElement) {
this.iti = intlTelInput(this.inputRef.nativeElement, this.initOptions);
}
this.inputRef.nativeElement.addEventListener(
"countrychange",
this.countryChangeHandler,
);
this.applyInputProps();
if (this.initialValue) {
this.iti?.setNumber(this.initialValue);
}
if (this.disabled) {
this.iti?.setDisabled(this.disabled);
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes["disabled"]) {
this.iti?.setDisabled(this.disabled);
}
if (changes["inputProps"]) {
this.applyInputProps();
}
}
handleInput() {
if (!this.iti) return;
const num = this.iti.getNumber() || "";
const countryIso = this.iti.getSelectedCountryData().iso2 || "";
let hasChanged = false;
if (num !== this.lastEmittedNumber) {
this.lastEmittedNumber = num;
this.numberChange.emit(num);
this.onChange(num);
hasChanged = true;
}
if (countryIso !== this.lastEmittedCountry) {
this.lastEmittedCountry = countryIso;
this.countryChange.emit(countryIso);
hasChanged = true;
}
const isValid = this.usePreciseValidation
? this.iti.isValidNumberPrecise()
: this.iti.isValidNumber();
const errorCode = isValid ? null : this.iti.getValidationError();
if (isValid !== this.lastEmittedValidity) {
this.lastEmittedValidity = isValid;
this.validityChange.emit(isValid);
hasChanged = true;
}
if (errorCode !== this.lastEmittedErrorCode) {
this.lastEmittedErrorCode = errorCode;
this.errorCodeChange.emit(errorCode);
hasChanged = true;
}
if (hasChanged) {
this.onValidatorChange();
}
}
handleBlur(event: FocusEvent) {
this.onTouched();
this.blur.emit(event);
}
handleFocus(event: FocusEvent) {
this.focus.emit(event);
}
handleKeyDown(event: KeyboardEvent) {
this.keydown.emit(event);
}
handleKeyUp(event: KeyboardEvent) {
this.keyup.emit(event);
}
handlePaste(event: ClipboardEvent) {
this.paste.emit(event);
}
handleClick(event: MouseEvent) {
this.click.emit(event);
}
/**
* This method must be called in `ngAfterViewInit` or later lifecycle hooks,
* not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.
*/
getInstance(): Iti | null {
return this.iti;
}
/**
* This method must be called in `ngAfterViewInit` or later lifecycle hooks,
* not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.
*/
getInput(): HTMLInputElement | null {
return this.inputRef.nativeElement;
}
ngOnDestroy() {
this.iti?.destroy();
this.inputRef.nativeElement.removeEventListener(
"countrychange",
this.countryChangeHandler,
);
}
private applyInputProps(): void {
const currentKeys = new Set();
Object.entries(this.inputProps).forEach(([key, value]) => {
currentKeys.add(key);
this.inputRef.nativeElement.setAttribute(key, value);
});
this.appliedInputPropKeys.forEach((key) => {
if (!currentKeys.has(key)) {
this.inputRef.nativeElement.removeAttribute(key);
}
});
this.appliedInputPropKeys = currentKeys;
}
// ============ ControlValueAccessor Implementation ============
writeValue(value: string | null): void {
if (this.iti) {
this.iti.setNumber(value || "");
}
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
this.iti?.setDisabled(isDisabled);
}
// ============ Validator Implementation ============
validate(control: AbstractControl): ValidationErrors | null {
if (!control.value || !this.iti) {
return null;
}
const isValid = this.usePreciseValidation
? this.iti.isValidNumberPrecise()
: this.iti.isValidNumber();
if (isValid) {
return null;
}
const errorCode = this.iti.getValidationError();
return {
invalidPhone: {
errorCode,
errorMessage: PHONE_ERROR_MESSAGES[errorCode] ?? "unknown",
},
};
}
registerOnValidatorChange(fn: () => void): void {
this.onValidatorChange = fn;
}
}
================================================
FILE: angular/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"moduleResolution": "node",
"esModuleInterop": true, //* Required for react (etc) default imports.
"experimentalDecorators": true, //* Required for angular decorators.
"emitDecoratorMetadata": true, //* Required for angular decorators.
"declaration": true, //* Generate .d.ts files.
"outDir": "build/temp",
"declarationDir": "build/types",
"rootDir": "./src",
"allowJs": true, // allow importing .mjs files e.g. i18n files
},
"angularCompilerOptions": {
"strictTemplates": true,
},
"include": [
"src/intl-tel-input/angular.ts",
"src/intl-tel-input/angularWithUtils.ts",
"src/intl-tel-input/i18n/index.ts",
],
}
================================================
FILE: build.js
================================================
/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-var-requires */
const { build } = require("esbuild");
const packageJson = require("./package.json");
const getBanner = (moduleName) =>
"/*\n" +
` * International Telephone Input v${packageJson.version}\n` +
` * ${packageJson.repository.url}\n` +
" * Licensed under the MIT license\n" +
" */\n\n" +
// we can remove this UMD hack once it is supported by esbuild: https://github.com/evanw/esbuild/issues/507
"// UMD\n" +
"(function(factory) {\n" +
" if (typeof module === 'object' && module.exports) {\n" +
" module.exports = factory();\n" +
" } else {\n" +
` window.${moduleName} = factory();\n` +
" }\n" +
"}(() => {\n";
const footer =
"\n// UMD\n" +
" return factoryOutput.default;\n" +
"}));";
const shared = {
bundle: true,
logLevel: "info",
format: "iife",
globalName: "factoryOutput",
footer: {
js: footer,
},
define: {
"process.env.VERSION": `"${packageJson.version}"`,
},
};
//* build/js/intlTelInput.js
build({
...shared,
banner: {
js: getBanner("intlTelInput"),
},
entryPoints: ["src/js/intl-tel-input.ts"],
minify: false,
outfile: "build/js/intlTelInput.js",
});
//* build/js/intlTelInput.min.js
build({
...shared,
banner: {
js: getBanner("intlTelInput"),
},
entryPoints: ["src/js/intl-tel-input.ts"],
minify: true,
outfile: "build/js/intlTelInput.min.js",
});
//* build/js/data.js
build({
...shared,
banner: {
js: getBanner("allCountries"),
},
entryPoints: ["src/js/intl-tel-input/data.ts"],
minify: false,
outfile: "build/js/data.js",
});
//* build/js/data.min.js
build({
...shared,
banner: {
js: getBanner("allCountries"),
},
entryPoints: ["src/js/intl-tel-input/data.ts"],
minify: true,
outfile: "build/js/data.min.js",
});
//* build/js/intlTelInputWithUtils.js
build({
...shared,
banner: {
js: getBanner("intlTelInput"),
},
entryPoints: ["src/js/intl-tel-input/intlTelInputWithUtils.ts"],
minify: false,
outfile: "build/js/intlTelInputWithUtils.js",
});
//* build/js/intlTelInputWithUtils.min.js
build({
...shared,
banner: {
js: getBanner("intlTelInput"),
},
entryPoints: ["src/js/intl-tel-input/intlTelInputWithUtils.ts"],
minify: true,
outfile: "build/js/intlTelInputWithUtils.min.js",
});
//* build/js/i18n
build({
charset: "utf8",
entryPoints: ["src/js/intl-tel-input/i18n/**/*.ts"],
outdir: "build/js/i18n",
});
================================================
FILE: composer.json
================================================
{
"name": "jackocnr/intl-tel-input",
"version": "26.8.1",
"description": "A JavaScript plugin for entering and validating international telephone numbers",
"keywords": [
"international",
"i18n",
"country",
"dial",
"code",
"telephone",
"tel",
"number",
"mobile",
"input",
"flag"
],
"homepage": "https://github.com/jackocnr/intl-tel-input",
"type": "library",
"license": "MIT",
"authors": [
{
"name": "Jack O'Connor",
"homepage": "http://jackocnr.com"
}
],
"minimum-stability": "stable",
"prefer-stable": true
}
================================================
FILE: cspell.json
================================================
{
"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
"version": "0.2",
"allowCompoundWords": true,
"maxNumberOfProblems": 1000,
// "checkLimit": 5000, //! Setting that is in the vscode eextension not in the cli
// "diagnosticLevel": "Warning", //! Setting that is in the vscode eextension not in the cli
"language": "en_GB",
"useGitignore": true,
"minWordLength": 4,
"dictionaries": [
"css",
"en_GB",
"html",
"ignore",
"javascript",
"javascriptreact",
"json",
"jsonc",
"markdown",
"plaintext",
"scss",
"text",
"typescript",
"typescriptreact",
"COBOL",
"ACUCOBOL"
],
"dictionaryDefinitions": [],
"import": [],
"ignorePaths": [
//* Directories
"**/.git/**",
"**/build/**",
"**/node_modules/**",
"**/vscode-extension/**",
"**/.vscode/**",
"**/.scraps/**",
"**/third_party/**",
//* Files
"**/package-lock.json",
"**/yarn.lock",
"**/Gemfile",
"**/cspell.json",
"**/.env",
//* File Extensions
"**/*.svg",
//* Specific files and folders
"src/js/intl-tel-input/data.ts",
"react/demo/validation-bundle.js",
"react/demo/simple-bundle.js",
"react/demo/toggle-disabled.js"
],
"ignoreWords": [],
"flagWords": [],
"words": [
"Åland",
"AYTF",
"dropup",
"evenizer",
"FAYT",
"geoip",
"iife",
"ipapi",
"jackocnr",
"jsfast",
"librsvg",
"mledoze's",
"NANP",
"normalised",
"optipng",
"sass",
"tmpl",
"vars",
"Veaudry"
]
}
================================================
FILE: demo.html
================================================
International Telephone Input
International Telephone Input
================================================
FILE: functions/_middleware.js
================================================
/**
* Cloudflare Workers middleware to inject a script tag with the user's geographical information (window.__IS_EUROPE)
*/
const EUROPE = new Set([
// EU members
"AT","BE","BG","HR","CY","CZ","DK","EE","FI","FR",
"DE","GR","HU","IE","IT","LV","LT","LU","MT","NL",
"PL","PT","RO","SK","SI","ES","SE",
// EEA + other European countries
"GB","NO","IS","LI","CH","AL","AD","BA","BY","GE",
"MD","ME","MK","MC","RS","SM","TR","UA","VA",
]);
class GeoInjector {
constructor(isEurope) {
this.isEurope = isEurope;
}
element(element) {
element.prepend(
``,
{ html: true },
);
}
}
export async function onRequest(context) {
const country = context.request.cf?.country || "";
const isEurope = EUROPE.has(country);
const response = await context.next();
const contentType = response.headers.get("content-type") || "";
if (!contentType.includes("text/html")) {
return response;
}
// eslint-disable-next-line no-undef
return new HTMLRewriter()
.on("head", new GeoInjector(isEurope))
.transform(response);
}
================================================
FILE: grunt/bump.js
================================================
module.exports = function(grunt) {
return {
options: {
files: ['package.json', 'package-lock.json', 'composer.json'],
updateConfigs: ['package'],
commitFiles: ['-a'],
pushTo: 'origin'
}
};
};
================================================
FILE: grunt/clean.js
================================================
module.exports = function(grunt) {
return {
buildCss: ['build/css/*'],
buildImg: ['build/img/*'],
buildJs: ['build/js/*'],
// Used by build:jsfast/watch. Preserves build/js/utils.js because
// src/js/intl-tel-input/utils.js is a symlink to it.
buildJsKeepUtils: ['build/js/*', '!build/js/utils.js'],
reactBuild: ['react/build/*'],
vueBuild: ['vue/build/*'],
angularBuild: ['angular/build/*'],
svelteBuild: ['svelte/build/*'],
// Intermediate artifacts used by the build/minify/replace steps.
tmpIntermediates: ['tmp/built.min.js', 'tmp/one.min.js'],
// build:utils output
utils: ['build/js/utils.js'],
// Convenience target for top-level build.
allBuild: [
'build/css/*',
'build/img/*',
'build/js/*',
'react/build/*',
'vue/build/*',
'angular/build/*',
'svelte/build/*',
'tmp/built.min.js',
'tmp/one.min.js',
],
};
};
================================================
FILE: grunt/closure-compiler.js
================================================
module.exports = function (grunt) {
return {
utils: {
files: {
"build/js/utils.js": "src/js/utils.js",
},
options: {
js: [
"node_modules/google-closure-library/**.js",
"third_party/libphonenumber/javascript/i18n/phonenumbers/**.js",
"!third_party/libphonenumber/javascript/i18n/phonenumbers/demo-compiled.js",
"!third_party/libphonenumber/javascript/i18n/phonenumbers/metadatafortesting.js",
"!third_party/libphonenumber/javascript/i18n/phonenumbers/metadatalite.js",
"!third_party/libphonenumber/javascript/i18n/phonenumbers/regioncodefortesting.js",
"!third_party/libphonenumber/javascript/i18n/phonenumbers/**_test.js",
],
entry_point: "goog:i18n.phonenumbers.demo",
compilation_level: "ADVANCED_OPTIMIZATIONS",
output_wrapper: "(function () {%output%})();\nconst globalContext = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this;\nconst utils = globalContext.intlTelInputUtilsTemp;\ndelete globalContext.intlTelInputUtilsTemp;\nexport default utils;",
},
},
};
};
================================================
FILE: grunt/connect.js
================================================
module.exports = function(grunt) {
return {
test: {
port: 8000
}
};
};
================================================
FILE: grunt/cssmin.js
================================================
module.exports = function(grunt) {
return {
target: {
files: {
'build/css/intlTelInput.min.css': 'build/css/intlTelInput.css',
'build/css/intlTelInput-no-assets.min.css': 'build/css/intlTelInput-no-assets.css'
}
}
};
};
================================================
FILE: grunt/generate-sprite.js
================================================
const fs = require('fs');
const path = require('path');
// ts-node allows us to require TypeScript files
require("ts-node").register();
const supportedCountries = require('../src/js/intl-tel-input/data.ts').default;
module.exports = function(grunt) {
grunt.registerTask('generate-sprite', async function() {
const done = this.async();
// Require "sharp" on demand, else Travis was breaking with "Error: Could not load the "sharp" module using the linux-x64 runtime" when Travis doesn't even use this task
const sharp = require('sharp');
// ensure /build/img/ dir exists before trying to write to it
const buildImgDir = path.join(__dirname, '..', 'build', 'img');
if (!fs.existsSync(buildImgDir)) {
fs.mkdirSync(buildImgDir, { recursive: true });
}
const supportedCountryFilenames = supportedCountries.map(country => `${country.iso2}.svg`).sort();
// customise this number to change the size of the flags (NOTE: flags are 4x3 ratio)
// must be a multiple of 3
const TARGET_HEIGHT = 12;
const TARGET_WIDTH = (TARGET_HEIGHT / 3) * 4;
const FLAG_MARGIN = 0;
const specialCases = {
'ac.svg': 'sh-ac.svg', // Ascension Island
// Add more special cases here if needed
};
const handleSpecialCases = (filename) => specialCases[filename] || filename;
const generateFlagMetadataAndSprite = async () => {
try {
const fileWarning = "//* THIS FILE IS AUTO-GENERATED. DO NOT EDIT.";
const flagsPath = 'node_modules/flag-icons/flags/4x3';
const outputFile = 'src/css/_metadata.scss';
const spriteFile1xWebP = "build/img/flags.webp";
const spriteFile2xWebP = "build/img/flags@2x.webp";
const spriteFile1xPNG = "build/img/flags.png";
const spriteFile2xPNG = "build/img/flags@2x.png";
let outputFileContent = '';
let totalWidth = supportedCountryFilenames.length * (TARGET_WIDTH + FLAG_MARGIN) - FLAG_MARGIN;
const maxHeight = TARGET_HEIGHT;
let flagsMetadata = "$flags: (\n";
let currentOffset = 0;
const scaledImages1x = [];
const scaledImages2x = [];
for (const filename of supportedCountryFilenames) {
const countryCode = filename.split('.')[0];
const processedFilename = handleSpecialCases(filename);
const imagePath = path.join(flagsPath, processedFilename);
const imagePathExists = fs.existsSync(imagePath);
if (!imagePathExists) {
console.log(`WARNING: Missing flag image: ${imagePath} - skipping this flag.`);
break;
}
const svgBuffer = fs.readFileSync(imagePath);
const pngBuffer1x = await sharp(svgBuffer)
.resize({
width: TARGET_WIDTH,
height: TARGET_HEIGHT,
fit: sharp.fit.fill,
position: sharp.strategy.centre
})
.ensureAlpha()
.png({ compressionLevel: 9, adaptiveFiltering: true, force: true })
.toBuffer();
const pngBuffer2x = await sharp(svgBuffer)
.resize({
width: TARGET_WIDTH * 2,
height: TARGET_HEIGHT * 2,
fit: sharp.fit.fill,
position: sharp.strategy.centre
})
.ensureAlpha()
.png({ compressionLevel: 9, adaptiveFiltering: true, force: true })
.toBuffer();
scaledImages1x.push({
buffer: pngBuffer1x,
offset: currentOffset
});
scaledImages2x.push({
buffer: pngBuffer2x,
offset: currentOffset * 2
});
flagsMetadata += ` ${countryCode}: (\n`;
flagsMetadata += ` offset: ${-currentOffset}px,\n`;
flagsMetadata += " ),\n";
currentOffset += TARGET_WIDTH + FLAG_MARGIN;
}
flagsMetadata += ");";
// Create 1x sprites
await createSprite(scaledImages1x, totalWidth, maxHeight, spriteFile1xWebP, 'webp');
await createSprite(scaledImages1x, totalWidth, maxHeight, spriteFile1xPNG, 'png');
console.log(`1x combined images saved as ${spriteFile1xWebP} and ${spriteFile1xPNG}`);
// Create 2x sprites
await createSprite(scaledImages2x, totalWidth * 2, maxHeight * 2, spriteFile2xWebP, 'webp');
await createSprite(scaledImages2x, totalWidth * 2, maxHeight * 2, spriteFile2xPNG, 'png');
console.log(`2x combined images saved as ${spriteFile2xWebP} and ${spriteFile2xPNG}`);
// Generate SCSS content
outputFileContent += fileWarning + "\n\n";
outputFileContent += `$flags-sprite-1x: (\n`;
outputFileContent += ` height: ${maxHeight}px,\n`;
outputFileContent += ` width: ${totalWidth}px,\n`;
outputFileContent += ");\n\n";
outputFileContent += `$flag-width: ${TARGET_WIDTH}px;\n\n`;
outputFileContent += `$flag-height: ${TARGET_HEIGHT}px;\n\n`;
outputFileContent += flagsMetadata + "\n\n";
outputFileContent += fileWarning + "\n";
fs.writeFileSync(outputFile, outputFileContent);
console.log('SCSS file generated successfully.');
done();
} catch (error) {
console.error('Error:', error);
done(error);
}
};
const createSprite = async (images, width, height, outputFile, format) => {
const combinedImage = sharp({
create: {
width: width,
height: height,
channels: 4,
background: { r: 0, g: 0, b: 0, alpha: 0 }
}
});
const compositeOperations = images.map((img) => ({
input: img.buffer,
left: img.offset,
top: 0
}));
let processedImage = combinedImage.composite(compositeOperations);
if (format === 'webp') {
processedImage = processedImage.webp({
quality: 100,
lossless: true,
effort: 6
});
} else if (format === 'png') {
processedImage = processedImage.png({
compressionLevel: 9,
adaptiveFiltering: true,
force: true
});
}
await processedImage.toFile(outputFile);
};
generateFlagMetadataAndSprite();
});
};
================================================
FILE: grunt/replace.js
================================================
module.exports = function(grunt) {
return {
/**************
* Update version numbers
**************/
siteDocs: {
options: {
patterns: [
{
match: /intl-tel-input@([0-9.]+)\/build/g,
replacement: 'intl-tel-input@<%= package.version %>/build'
}
]
},
files: {
'site/src/docs/markdown/options.md': 'site/src/docs/markdown/options.md',
'site/src/docs/markdown/getting_started.md': 'site/src/docs/markdown/getting_started.md',
}
},
issueTemplate: {
options: {
patterns: [
{
match: /the latest version \(v[0-9]+\.[0-9]+\.[0-9]+\)/,
replacement: 'the latest version (v<%= package.version %>)'
}
]
},
files: {
'.github/ISSUE_TEMPLATE/1_bug_report.yml': '.github/ISSUE_TEMPLATE/1_bug_report.yml'
}
},
// grunt bump already updates the version number at the beginning of package-lock, but not the "inner" one (aprx line 9), so do that here
packageLockInner: {
options: {
patterns: [
{
match: /"name": "intl-tel-input",\n "version": "[0-9]+\.[0-9]+\.[0-9]+"/,
replacement: '"name": "intl-tel-input",\n "version": "<%= package.version %>"'
}
]
},
files: {
'package-lock.json': 'package-lock.json'
}
},
/**************
* Generate reactWithUtils.tsx
**************/
reactWithUtils: {
options: {
patterns: [
{
match: /import intlTelInput from \"\.\.\/intl\-tel\-input\"\;/,
replacement: '//* THIS FILE IS AUTO-GENERATED. DO NOT EDIT.\nimport intlTelInput from "./intlTelInputWithUtils";'
}
]
},
files: {
'react/src/intl-tel-input/reactWithUtils.tsx': 'react/src/intl-tel-input/react.tsx',
}
},
/**************
* Generate vue/src/IntlTelInputWithUtils.vue
**************/
vueWithUtils: {
options: {
patterns: [
{
match: /\
[](https://www.nerdydata.com/reports/international-telephone-input/719de9d2-d0e7-4988-b02f-9f9d52687076)
A JavaScript plugin for entering, formatting and validating international telephone numbers. Includes TypeScript definitions, plus React, Vue, Angular and Svelte components.
[Explore docs »](https://intl-tel-input.com/docs/choose-integration)
Use [Twilio's API to build phone verification, SMS 2FA, appointment reminders, marketing notifications and so much more](https://www.twilio.com/blog/international-telephone-input-twilio?utm_source=github&utm_medium=referral&utm_campaign=intl_tel_input). We can't wait to see what you build.
## React, Vue, Angular and Svelte Components
We provide React, Vue, Angular and Svelte (beta) components alongside the regular JavaScript plugin. This readme is for the JavaScript plugin. View the [React Component](https://intl-tel-input.com/docs/react-component), the [Vue Component](https://intl-tel-input.com/docs/vue-component) the [Angular Component](https://intl-tel-input.com/docs/angular-component), or the [Svelte component](https://intl-tel-input.com/docs/svelte-component).
## Docs and Examples
We have a newly updated website, where you can find [a full set of docs](https://intl-tel-input.com/docs/getting-started.html), a [live playground](https://intl-tel-input.com/playground/) where you can try out all of the options, as well as plenty of [examples](https://intl-tel-input.com/examples/validation-practical.html) of different setups.
## Features
* Automatically select the user's current country using an IP lookup
* Automatically set the input placeholder to an example number for the selected country
* Navigate the country dropdown by typing a country's name, or using the up/down keys
* Automatically format the number as the user types
* Optionally, only allow numeric characters and cap the number at the maximum valid length
* The user types their national number, and the plugin gives you the full standardised international number
* Number validation, including specific error types
* High-resolution flag images
* Accessibility provided via ARIA tags
* Typescript type definitions included
* Easily customise styles by overriding CSS variables, e.g. support dark mode
* React, Vue, Angular and Svelte components also included
* Translations provided in over 40 languages, as well as support for RTL layout and alternative numeral sets
* Lots of initialisation options for customisation, as well as instance methods/events for interaction
## Contributing
See the [contributing guide](https://github.com/jackocnr/intl-tel-input/blob/master/.github/CONTRIBUTING.md) for instructions on setting up the project and making changes, and also on how to update the flag images, or how to add a new translation.
## Attributions
* Flag images from [flag-icons](https://github.com/lipis/flag-icons)
* Original country data from mledoze's [World countries in JSON, CSV and XML](https://github.com/mledoze/countries)
* Formatting/validation/example number code from [libphonenumber](https://github.com/googlei18n/libphonenumber)
User testing powered by [BrowserStack Open-Source Program](https://www.browserstack.com/open-source)
Browser testing via 
================================================
FILE: angular/README.md
================================================
# IntlTelInput Angular Component
An Angular component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/angular/src/intl-tel-input/angular.ts).
[Explore docs »](https://intl-tel-input.com/docs/angular-component)
================================================
FILE: angular/build.js
================================================
const { build } = require("esbuild");
const fs = require("fs");
const packageJson = require("../package.json");
const mainShared = {
bundle: true,
external: ["@angular/core", "@angular/forms"],
logLevel: "info",
minify: false,
define: { "process.env.VERSION": `"${packageJson.version}"` },
};
async function buildMain() {
//* Angular Component - Default (ES Modules)
await build({
...mainShared,
entryPoints: ["angular/build/temp/intl-tel-input/angular.js"],
format: "esm",
outfile: "angular/build/IntlTelInput.js",
});
//* Angular Component With Utils - Default (ES Modules)
await build({
...mainShared,
entryPoints: ["angular/build/temp/intl-tel-input/angularWithUtils.js"],
format: "esm",
outfile: "angular/build/IntlTelInputWithUtils.js",
});
// remove temp folder after builds are complete
fs.rmSync("angular/build/temp", { recursive: true, force: true });
}
buildMain().catch(console.error);
const demoShared = {
bundle: true,
define: { "process.env.VERSION": `"${packageJson.version}"` },
format: "iife",
};
build({
...demoShared,
entryPoints: ["angular/demo/simple/main.ts"],
outfile: "angular/demo/simple/simple-bundle.js",
});
build({
...demoShared,
entryPoints: ["angular/demo/validation/main.ts"],
outfile: "angular/demo/validation/validation-bundle.js",
});
build({
...demoShared,
entryPoints: ["angular/demo/set-number/main.ts"],
outfile: "angular/demo/set-number/set-number-bundle.js",
});
build({
...demoShared,
entryPoints: ["angular/demo/toggle-disabled/main.ts"],
outfile: "angular/demo/toggle-disabled/toggle-disabled-bundle.js",
});
build({
...demoShared,
entryPoints: ["angular/demo/form/main.ts"],
outfile: "angular/demo/form/form-bundle.js",
});
================================================
FILE: angular/demo/form/form.component.ts
================================================
import { Component, OnInit, ViewChild } from "@angular/core";
import {
FormControl,
FormGroup,
ReactiveFormsModule,
Validators,
} from "@angular/forms";
import { IntlTelInputComponent } from "../../src/intl-tel-input/angularWithUtils";
@Component({
selector: "app-root",
template: `
`,
standalone: true,
imports: [IntlTelInputComponent, ReactiveFormsModule],
})
export class AppComponent implements OnInit {
@ViewChild("telInput") telInput!: IntlTelInputComponent;
fg: FormGroup = new FormGroup({
phone: new FormControl