@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
1,570 lines (1,569 loc) • 395 kB
JavaScript
//SKS31JAN25
import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter, forwardRef, ChangeDetectionStrategy, ViewChildren, HostListener, ViewChild } from '@angular/core';
import { FormArray, FormControl, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
import { QuillEditorComponent } from 'ngx-quill';
import Quill from 'quill';
import { Mention } from 'quill-mention';
import ImageResizor from 'quill-image-resizor';
import * as i0 from "@angular/core";
import * as i1 from "../../services/change.service";
import * as i2 from "../../services/data.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@danielmoncada/angular-datetime-picker";
// SKS11JUN25 An array fontFamilyArr is created containing a list of font family names as strings.
const fontFamilyArr = ["Roboto", "Roboto Condensed", "Arial", "Verdana", "Tahoma", "Trebuchet MS",
"Georgia", "Times New Roman", "Courier New", "Palatino Linotype",
"Segoe UI", "Calibri", "Calibri Light", "Sans-Serif", "Helvetica",
"Impact", "Garamond", "Comic Sans MS", "Lucida Console", "Franklin Gothic Medium"];
// SKS11JUN25 Register Quill modules
Quill.register('modules/mention', Mention);
ImageResizor.Quill = Quill;
Quill.register('modules/imageResizor', ImageResizor);
// SKS11JUN25 The Quill font style attributor is imported and it is registered with Quil
let fonts = Quill.import("attributors/style/font");
fonts.whitelist = fontFamilyArr;
Quill.register(fonts, true);
const icons = Quill.import('ui/icons');
icons['save'] = `<svg width="12" height="13" viewBox="0 0 12 13" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z"
fill="#259566" />
<path
d="M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z"
fill="white" />
</svg>`;
icons['discard'] = `<svg *ngIf="isDiscardHovered" (click)="discardChanges()" width="12" height="13" viewBox="0 0 12 13"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z"
fill="#FF3636" />
</svg>`;
function getFormArray(size) {
const arr = [];
for (let i = 0; i < size; i++) {
arr.push(new FormControl(''));
}
return new FormArray(arr);
}
export class NxtInput {
elementRef;
changeService;
dataService;
// SKS30JAN25
label = ''; // Input label
labelFont = ''; // Input label font
labelWeight = ''; // Input label Weight
inputWeight = ''; // Input Weight
labelSize = ''; // Input label Size
inputValueSize = ''; //Input value Size
labelColor = ''; // Input label Color
showLabel = ''; // Input label Color
svgHeight = ''; // Input svg height
svgWidth = ''; // Input svg weight
type = 'text'; // Input type (text, email, password)
inputIconRightSrc = ''; // Path to SVG icon
inputIconLeftSrc = '';
required = false; // Required validation
minLength; // Min length validation
pattern; // Pattern validation (e.g., email regex)
errorMessages = {}; // Custom error messages
maxLength = 0; // Maximum length validation
placeholder = '';
inputBgColor = ''; // Use this input to set a custom background color for the input.
inputBorder = ''; // Use this input to set a custom border style for the input.
placeholderColor = ''; // Use this input to set a custom text color for the input.
placeholderFont = ''; // Use this input to set a custom placeholder font
placeholderWeight = ''; // Use this input to set a custom
placeholderSize = ''; // Use this input to set a custom size
inputTextColor = ''; // Use this input to set a custom text color for the input value.
inputHeight = ''; // Use this input to set a custom height for the input.
inputWidth = ''; // Use this input to set a custom width for the Input.
inputId = 'default'; // Use this input to set a custom ID for the input. Default is 'default'.
inputBorderSize = '0px'; // Use this input to set the border size of the input. Default is '0px' for no border.
inputConfig = ''; // Use this input to pass configuration settings for the input (e.g., styles, actions).
confPassVal = ''; // Password value to check if the current field matches the confirmed password
confPass = false; // Set to true to enable password confirmation validation
mode = 'edit'; // New mode input
value; // input value
question = {};
showSuggestion = false; // showSuggestion the input
ariaOwns;
ariaHasPopup;
isLoading = false; // Set to true to show a loading animation
options = []; // For radio buttons
minDate; // For date/datetime picker
maxDate; // For date/datetime picker
rows = 3; // For textarea
rawInputVal;
set size(size) {
this.inputs = getFormArray(size);
this.#size = size;
}
valueChange = new EventEmitter(); // Emits input value changes
inputValue = new EventEmitter();
onBlur = new EventEmitter();
onFocus = new EventEmitter();
toggleEmit = new EventEmitter();
clearInputEmit = new EventEmitter();
nativeInputRef = new EventEmitter();
inputEls;
// Date/Time picker references
dateTimePicker;
datePicker;
timePicker;
dtPicker;
dPicker;
tPicker;
inputRef;
#size = 4;
#scheduledFocus = null;
inputs = getFormArray(this.#size);
control = new FormControl('');
isPasswordVisible = false;
countryCode = '';
// SKS28FEB25 countries list
countries = [
{
"name": "Afghanistan",
"flag": "🇦🇫",
"code": "AF",
"dial_code": "+93",
"regex": "^\\+93[0-9]{9}$",
"placeholder": "+93 70 123 4567"
},
{
"name": "Åland Islands",
"flag": "🇦🇽",
"code": "AX",
"dial_code": "+358",
"regex": "^\\+358[0-9]{6,12}$",
"placeholder": "+358 18 123 45"
},
{
"name": "Albania",
"flag": "🇦🇱",
"code": "AL",
"dial_code": "+355",
"regex": "^\\+355[0-9]{9}$",
"placeholder": "+355 69 123 4567"
},
{
"name": "Algeria",
"flag": "🇩🇿",
"code": "DZ",
"dial_code": "+213",
"regex": "^\\+213[0-9]{9}$",
"placeholder": "+213 551 234 567"
},
{
"name": "American Samoa",
"flag": "🇦🇸",
"code": "AS",
"dial_code": "+1684",
"regex": "^\\+1684[0-9]{7}$",
"placeholder": "+1684 123 4567"
},
{
"name": "Andorra",
"flag": "🇦🇩",
"code": "AD",
"dial_code": "+376",
"regex": "^\\+376[0-9]{6}$",
"placeholder": "+376 123 456"
},
{
"name": "Angola",
"flag": "🇦🇴",
"code": "AO",
"dial_code": "+244",
"regex": "^\\+244[0-9]{9}$",
"placeholder": "+244 923 123 456"
},
{
"name": "Anguilla",
"flag": "🇦🇮",
"code": "AI",
"dial_code": "+1264",
"regex": "^\\+1264[0-9]{7}$",
"placeholder": "+1264 235 1234"
},
{
"name": "Antarctica",
"flag": "🇦🇶",
"code": "AQ",
"dial_code": "+672",
"regex": "^\\+672[0-9]{6,12}$",
"placeholder": "+672 123 456"
},
{
"name": "Antigua and Barbuda",
"flag": "🇦🇬",
"code": "AG",
"dial_code": "+1268",
"regex": "^\\+1268[0-9]{7}$",
"placeholder": "+1268 234 5678"
},
{
"name": "Argentina",
"flag": "🇦🇷",
"code": "AR",
"dial_code": "+54",
"regex": "^\\+54[0-9]{10,11}$",
"placeholder": "+54 9 11 1234 5678"
},
{
"name": "Armenia",
"flag": "🇦🇲",
"code": "AM",
"dial_code": "+374",
"regex": "^\\+374[0-9]{8}$",
"placeholder": "+374 94 123 456"
},
{
"name": "Aruba",
"flag": "🇦🇼",
"code": "AW",
"dial_code": "+297",
"regex": "^\\+297[0-9]{7}$",
"placeholder": "+297 560 1234"
},
{
"name": "Australia",
"flag": "🇦🇺",
"code": "AU",
"dial_code": "+61",
"regex": "^\\+61[0-9]{9}$",
"placeholder": "+61 4 1234 5678"
},
{
"name": "Austria",
"flag": "🇦🇹",
"code": "AT",
"dial_code": "+43",
"regex": "^\\+43[0-9]{10,12}$",
"placeholder": "+43 664 123 4567"
},
{
"name": "Azerbaijan",
"flag": "🇦🇿",
"code": "AZ",
"dial_code": "+994",
"regex": "^\\+994[0-9]{9}$",
"placeholder": "+994 50 123 45 67"
},
{
"name": "Bahamas",
"flag": "🇧🇸",
"code": "BS",
"dial_code": "+1242",
"regex": "^\\+1242[0-9]{7}$",
"placeholder": "+1242 323 1234"
},
{
"name": "Bahrain",
"flag": "🇧🇭",
"code": "BH",
"dial_code": "+973",
"regex": "^\\+973[0-9]{8}$",
"placeholder": "+973 3123 4567"
},
{
"name": "Bangladesh",
"flag": "🇧🇩",
"code": "BD",
"dial_code": "+880",
"regex": "^\\+880[0-9]{10}$",
"placeholder": "+880 1712 345678"
},
{
"name": "Barbados",
"flag": "🇧🇧",
"code": "BB",
"dial_code": "+1246",
"regex": "^\\+1246[0-9]{7}$",
"placeholder": "+1246 250 1234"
},
{
"name": "Belarus",
"flag": "🇧🇾",
"code": "BY",
"dial_code": "+375",
"regex": "^\\+375[0-9]{9}$",
"placeholder": "+375 29 123 45 67"
},
{
"name": "Belgium",
"flag": "🇧🇪",
"code": "BE",
"dial_code": "+32",
"regex": "^\\+32[0-9]{9}$",
"placeholder": "+32 470 12 34 56"
},
{
"name": "Belize",
"flag": "🇧🇿",
"code": "BZ",
"dial_code": "+501",
"regex": "^\\+501[0-9]{7}$",
"placeholder": "+501 610 1234"
},
{
"name": "Benin",
"flag": "🇧🇯",
"code": "BJ",
"dial_code": "+229",
"regex": "^\\+229[0-9]{8}$",
"placeholder": "+229 90 12 3456"
},
{
"name": "Bermuda",
"flag": "🇧🇲",
"code": "BM",
"dial_code": "+1441",
"regex": "^\\+1441[0-9]{7}$",
"placeholder": "+1441 370 1234"
},
{
"name": "Bhutan",
"flag": "🇧🇹",
"code": "BT",
"dial_code": "+975",
"regex": "^\\+975[0-9]{7,8}$",
"placeholder": "+975 17 123 456"
},
{
"name": "Bolivia, Plurinational State of bolivia",
"flag": "🇧🇴",
"code": "BO",
"dial_code": "+591",
"regex": "^\\+591[1-9]\\d{7}$",
"placeholder": "+591 12345678",
"example": "+591 70123456"
},
{
"name": "Bosnia and Herzegovina",
"flag": "🇧🇦",
"code": "BA",
"dial_code": "+387",
"regex": "^\\+387[0-9]{8,9}$",
"placeholder": "+387 61 123 456"
},
{
"name": "Botswana",
"flag": "🇧🇼",
"code": "BW",
"dial_code": "+267",
"regex": "^\\+267[0-9]{8}$",
"placeholder": "+267 71 123 456"
},
{
"name": "Bouvet Island",
"code": "BV",
"dial_code": "+47",
"regex": "^\\+47\\d{8}$",
"placeholder": "+47 XXXXXXXX",
"format": "+47 XX XX XX XX",
"flag": "🇧🇻"
},
{
"name": "Brazil",
"flag": "🇧🇷",
"code": "BR",
"dial_code": "+55",
"regex": "^\\+55[0-9]{10,11}$",
"placeholder": "+55 11 91234 5678"
},
{
"name": "British Indian Ocean Territory",
"flag": "🇮🇴",
"code": "IO",
"dial_code": "+246",
"regex": "^\\+246[0-9]{7}$",
"placeholder": "+246 380 1234"
},
{
"name": "Brunei Darussalam",
"flag": "🇧🇳",
"code": "BN",
"dial_code": "+673",
"regex": "^\\+673[0-9]{7}$",
"placeholder": "+673 712 3456"
},
{
"name": "Bulgaria",
"flag": "🇧🇬",
"code": "BG",
"dial_code": "+359",
"regex": "^\\+359[0-9]{9}$",
"placeholder": "+359 87 123 4567"
},
{
"name": "Burkina Faso",
"flag": "🇧🇫",
"code": "BF",
"dial_code": "+226",
"regex": "^\\+226[0-9]{8}$",
"placeholder": "+226 70 12 3456"
},
{
"name": "Burundi",
"flag": "🇧🇮",
"code": "BI",
"dial_code": "+257",
"regex": "^\\+257[0-9]{8}$",
"placeholder": "+257 79 12 3456"
},
{
"name": "Cambodia",
"flag": "🇰🇭",
"code": "KH",
"dial_code": "+855",
"regex": "^\\+855[0-9]{8,9}$",
"placeholder": "+855 91 234 567"
},
{
"name": "Cameroon",
"flag": "🇨🇲",
"code": "CM",
"dial_code": "+237",
"regex": "^\\+237[0-9]{8}$",
"placeholder": "+237 6 71 23 45 67"
},
{
"name": "Canada",
"flag": "🇨🇦",
"code": "CA",
"dial_code": "+1",
"regex": "^\\+1[0-9]{10}$",
"placeholder": "+1 204 123 4567"
},
{
"name": "Cape Verde",
"flag": "🇨🇻",
"code": "CV",
"dial_code": "+238",
"regex": "^\\+238[0-9]{7}$",
"placeholder": "+238 991 2345"
},
{
"name": "Cayman Islands",
"flag": "🇰🇾",
"code": "KY",
"dial_code": "+345",
"regex": "^\\+345[0-9]{7}$",
"placeholder": "+345 321 1234"
},
{
"name": "Central African Republic",
"flag": "🇨🇫",
"code": "CF",
"dial_code": "+236",
"regex": "^\\+236[0-9]{8}$",
"placeholder": "+236 72 12 3456"
},
{
"name": "Chad",
"flag": "🇹🇩",
"code": "TD",
"dial_code": "+235",
"regex": "^\\+235[0-9]{8}$",
"placeholder": "+235 63 12 3456"
},
{
"name": "Chile",
"flag": "🇨🇱",
"code": "CL",
"dial_code": "+56",
"regex": "^\\+56[0-9]{9}$",
"placeholder": "+56 9 1234 5678"
},
{
"name": "China",
"flag": "🇨🇳",
"code": "CN",
"dial_code": "+86",
"regex": "^\\+86[0-9]{11}$",
"placeholder": "+86 131 2345 6789"
},
{
"name": "Christmas Island",
"flag": "🇨🇽",
"code": "CX",
"dial_code": "+61",
"regex": "^\\+61[0-9]{9}$",
"placeholder": "+61 4 1234 5678"
},
{
"name": "Cocos (Keeling) Islands",
"flag": "🇨🇨",
"code": "CC",
"dial_code": "+61",
"regex": "^\\+61[0-9]{9}$",
"placeholder": "+61 4 1234 5678"
},
{
"name": "Colombia",
"flag": "🇨🇴",
"code": "CO",
"dial_code": "+57",
"regex": "^\\+57[0-9]{10}$",
"placeholder": "+57 312 345 6789"
},
{
"name": "Comoros",
"flag": "🇰🇲",
"code": "KM",
"dial_code": "+269",
"regex": "^\\+269[0-9]{7}$",
"placeholder": "+269 321 2345"
},
{
"name": "Congo",
"flag": "🇨🇬",
"code": "CG",
"dial_code": "+242",
"regex": "^\\+242[0-9]{9}$",
"placeholder": "+242 06 123 4567"
},
{
"name": "Congo, The Democratic Republic of the Congo",
"flag": "🇨🇩",
"code": "CD",
"dial_code": "+243",
"regex": "^\\+243[89]\\d{8}$",
"placeholder": "+243 9XXXXXXXX",
"example": "+243 991234567"
},
{
"name": "Cook Islands",
"flag": "🇨🇰",
"code": "CK",
"dial_code": "+682",
"regex": "^\\+682[0-9]{5}$",
"placeholder": "+682 71 234"
},
{
"name": "Costa Rica",
"flag": "🇨🇷",
"code": "CR",
"dial_code": "+506",
"regex": "^\\+506[0-9]{8}$",
"placeholder": "+506 8123 4567"
},
{
"name": "Cote d'Ivoire",
"flag": "🇨🇮",
"code": "CI",
"dial_code": "+225",
"regex": "^\\+225[0-9]{8}$",
"placeholder": "+225 01 23 45 67"
},
{
"name": "Croatia",
"flag": "🇭🇷",
"code": "HR",
"dial_code": "+385",
"regex": "^\\+385[0-9]{8,9}$",
"placeholder": "+385 98 123 456"
},
{
"name": "Cuba",
"flag": "🇨🇺",
"code": "CU",
"dial_code": "+53",
"regex": "^\\+53[0-9]{8}$",
"placeholder": "+53 5 1234 5678"
},
{
"name": "Cyprus",
"flag": "🇨🇾",
"code": "CY",
"dial_code": "+357",
"regex": "^\\+357[0-9]{8}$",
"placeholder": "+357 96 123 456"
},
{
"name": "Czech Republic",
"flag": "🇨🇿",
"code": "CZ",
"dial_code": "+420",
"regex": "^\\+420[0-9]{9}$",
"placeholder": "+420 601 123 456"
},
{
"name": "Denmark",
"flag": "🇩🇰",
"code": "DK",
"dial_code": "+45",
"regex": "^\\+45[0-9]{8}$",
"placeholder": "+45 20 12 34 56"
},
{
"name": "Djibouti",
"flag": "🇩🇯",
"code": "DJ",
"dial_code": "+253",
"regex": "^\\+253[0-9]{8}$",
"placeholder": "+253 77 12 34 56"
},
{
"name": "Dominica",
"flag": "🇩🇲",
"code": "DM",
"dial_code": "+1767",
"regex": "^\\+1767[0-9]{7}$",
"placeholder": "+1767 235 1234"
},
{
"name": "Dominican Republic",
"flag": "🇩🇴",
"code": "DO",
"dial_code": "+1849",
"regex": "^\\+1849[0-9]{7}$",
"placeholder": "+1849 234 5678"
},
{
"name": "Ecuador",
"flag": "🇪🇨",
"code": "EC",
"dial_code": "+593",
"regex": "^\\+593[0-9]{9}$",
"placeholder": "+593 99 123 4567"
},
{
"name": "Egypt",
"flag": "🇪🇬",
"code": "EG",
"dial_code": "+20",
"regex": "^\\+20[0-9]{10}$",
"placeholder": "+20 100 123 4567"
},
{
"name": "El Salvador",
"flag": "🇸🇻",
"code": "SV",
"dial_code": "+503",
"regex": "^\\+503[0-9]{8}$",
"placeholder": "+503 7123 4567"
},
{
"name": "Equatorial Guinea",
"flag": "🇬🇶",
"code": "GQ",
"dial_code": "+240",
"regex": "^\\+240[0-9]{9}$",
"placeholder": "+240 222 123 456"
},
{
"name": "Eritrea",
"flag": "🇪🇷",
"code": "ER",
"dial_code": "+291",
"regex": "^\\+291[0-9]{7}$",
"placeholder": "+291 7 123 456"
},
{
"name": "Estonia",
"flag": "🇪🇪",
"code": "EE",
"dial_code": "+372",
"regex": "^\\+372[0-9]{7,8}$",
"placeholder": "+372 5123 456"
},
{
"name": "Ethiopia",
"flag": "🇪🇹",
"code": "ET",
"dial_code": "+251",
"regex": "^\\+251[0-9]{9}$",
"placeholder": "+251 91 123 4567"
},
{
"name": "Falkland Islands (Malvinas)",
"flag": "🇫🇰",
"code": "FK",
"dial_code": "+500",
"regex": "^\\+500\\d{5}$",
"placeholder": "+500 XXXXX",
"example": "+500 12345"
},
{
"name": "Faroe Islands",
"flag": "🇫🇴",
"code": "FO",
"dial_code": "+298",
"regex": "^\\+298[0-9]{6}$",
"placeholder": "+298 123 456"
},
{
"name": "Fiji",
"flag": "🇫🇯",
"code": "FJ",
"dial_code": "+679",
"regex": "^\\+679[0-9]{7,8}$",
"placeholder": "+679 701 2345"
},
{
"name": "Finland",
"flag": "🇫🇮",
"code": "FI",
"dial_code": "+358",
"regex": "^\\+358[0-9]{6,12}$",
"placeholder": "+358 40 123 4567"
},
{
"name": "France",
"flag": "🇫🇷",
"code": "FR",
"dial_code": "+33",
"regex": "^\\+33[0-9]{9}$",
"placeholder": "+33 6 12 34 56 78"
},
{
"name": "French Guiana",
"flag": "🇬🇫",
"code": "GF",
"dial_code": "+594",
"regex": "^\\+594[0-9]{9}$",
"placeholder": "+594 694 12 34 56"
},
{
"name": "French Polynesia",
"flag": "🇵🇫",
"code": "PF",
"dial_code": "+689",
"regex": "^\\+689[0-9]{8}$",
"placeholder": "+689 87 12 34 56"
},
{
"name": "French Southern Territories",
"flag": "🇹🇫",
"code": "TF",
"dial_code": "+262",
"regex": "^\\+262[0-9]{9}$",
"placeholder": "+262 639 12 34 56"
},
{
"name": "Gabon",
"flag": "🇬🇦",
"code": "GA",
"dial_code": "+241",
"regex": "^\\+241[0-9]{8}$",
"placeholder": "+241 06 12 34 56"
},
{
"name": "Gambia",
"flag": "🇬🇲",
"code": "GM",
"dial_code": "+220",
"regex": "^\\+220[0-9]{7}$",
"placeholder": "+220 301 2345"
},
{
"name": "Georgia",
"flag": "🇬🇪",
"code": "GE",
"dial_code": "+995",
"regex": "^\\+995[0-9]{9}$",
"placeholder": "+995 555 12 34 56"
},
{
"name": "Germany",
"flag": "🇩🇪",
"code": "DE",
"dial_code": "+49",
"regex": "^\\+49[0-9]{10,11}$",
"placeholder": "+49 151 1234 5678"
},
{
"name": "Ghana",
"flag": "🇬🇭",
"code": "GH",
"dial_code": "+233",
"regex": "^\\+233[0-9]{9}$",
"placeholder": "+233 24 123 4567"
},
{
"name": "Gibraltar",
"flag": "🇬🇮",
"code": "GI",
"dial_code": "+350",
"regex": "^\\+350[0-9]{8}$",
"placeholder": "+350 57123456"
},
{
"name": "Greece",
"flag": "🇬🇷",
"code": "GR",
"dial_code": "+30",
"regex": "^\\+30[0-9]{10}$",
"placeholder": "+30 691 234 5678"
},
{
"name": "Greenland",
"flag": "🇬🇱",
"code": "GL",
"dial_code": "+299",
"regex": "^\\+299[0-9]{6}$",
"placeholder": "+299 22 12 34"
},
{
"name": "Grenada",
"flag": "🇬🇩",
"code": "GD",
"dial_code": "+1473",
"regex": "^\\+1473[0-9]{7}$",
"placeholder": "+1473 403 1234"
},
{
"name": "Guadeloupe",
"code": "GP",
"dial_code": "+590",
"regex": "^\\+590[67]\\d{8}$",
"placeholder": "+590 6XXXXXXXX",
"format": "+590 XXX XX XX XX",
"flag": "🇬🇵"
},
{
"name": "Guam",
"code": "GU",
"dial_code": "+1671",
"regex": "^\\+1671\\d{7}$",
"placeholder": "+1671 XXXXXXX",
"format": "+1671 XXX XXXX",
"flag": "🇬🇺"
},
{
"name": "Guatemala",
"code": "GT",
"dial_code": "+502",
"regex": "^\\+502[2-9]\\d{7}$",
"placeholder": "+502 8XXXXXXX",
"format": "+502 XXXX XXXX",
"flag": "🇬🇹"
},
{
"name": "Guernsey",
"code": "GG",
"dial_code": "+44",
"regex": "^\\+44[1487]\\d{9}$",
"placeholder": "+44 1481 XXXXXX",
"format": "+44 1481 XXXXXX",
"flag": "🇬🇬"
},
{
"name": "Guinea",
"code": "GN",
"dial_code": "+224",
"regex": "^\\+224\\d{9}$",
"placeholder": "+224 XXXXXXXXX",
"format": "+224 XXX XXX XXX",
"flag": "🇬🇳"
},
{
"name": "Guinea-Bissau",
"code": "GW",
"dial_code": "+245",
"regex": "^\\+245\\d{7}$",
"placeholder": "+245 XXXXXXX",
"format": "+245 XXX XXXX",
"flag": "🇬🇼"
},
{
"name": "Guyana",
"code": "GY",
"dial_code": "+592",
"regex": "^\\+592[2-9]\\d{6}$",
"placeholder": "+592 6XXXXXX",
"format": "+592 XXX XXXX",
"flag": "🇬🇾"
},
{
"name": "Haiti",
"code": "HT",
"dial_code": "+509",
"regex": "^\\+509[2-9]\\d{7}$",
"placeholder": "+509 2XXXXXXX",
"format": "+509 XXXX XXXX",
"flag": "🇭🇹"
},
{
"name": "Heard Island and Mcdonald Islands",
"flag": "🇭🇲",
"code": "HM",
"dial_code": "+672",
"regex": "^\\+672\\d{6}$",
"placeholder": "+672 XXXXXX",
"example": "+672 123456"
},
{
"name": "Holy See (Vatican City State)",
"flag": "🇻🇦",
"code": "VA",
"dial_code": "+379",
"regex": "^\\+379\\d{10}$",
"placeholder": "+379 XXXXXXXXXX",
"example": "+379 0612345678"
},
{
"name": "Honduras",
"code": "HN",
"dial_code": "+504",
"regex": "^\\+504[2-9]\\d{7}$",
"placeholder": "+504 9XXXXXXX",
"format": "+504 XXXX XXXX",
"flag": "🇭🇳"
},
{
"name": "Hong Kong",
"code": "HK",
"dial_code": "+852",
"regex": "^\\+852[2-9]\\d{7}$",
"placeholder": "+852 5XXXXXXX",
"format": "+852 XXXX XXXX",
"flag": "🇭🇰"
},
{
"name": "Hungary",
"code": "HU",
"dial_code": "+36",
"regex": "^\\+36[1-9]\\d{7,8}$",
"placeholder": "+36 30XXXXXXX",
"format": "+36 XX XXX XXXX",
"flag": "🇭🇺"
},
{
"name": "Iceland",
"code": "IS",
"dial_code": "+354",
"regex": "^\\+354\\d{7}$",
"placeholder": "+354 XXXXXXX",
"format": "+354 XXX XXXX",
"flag": "🇮🇸"
},
{
"name": "India",
"code": "IN",
"dial_code": "+91",
"regex": "^\\+91[6789]\\d{9}$",
"placeholder": "+91 9XXXXXXXXX",
"format": "+91 XXXXX XXXXX",
"flag": "🇮🇳"
},
{
"name": "Indonesia",
"code": "ID",
"dial_code": "+62",
"regex": "^\\+62[8]\\d{9,10}$",
"placeholder": "+62 8XXXXXXXXX",
"format": "+62 8XX XXXX XXXX",
"flag": "🇮🇩"
},
{
"name": "Iran, Islamic Republic of Persian Gulf",
"flag": "🇮🇷",
"code": "IR",
"dial_code": "+98",
"regex": "^\\+98[1-9]\\d{9}$",
"placeholder": "+98 9XXXXXXXXX",
"example": "+98 9123456789"
},
{
"name": "Iraq",
"code": "IQ",
"dial_code": "+964",
"regex": "^\\+964[7]\\d{9}$",
"placeholder": "+964 7XXXXXXXXX",
"format": "+964 7XX XXX XXXX",
"flag": "🇮🇶"
},
{
"name": "Ireland",
"code": "IE",
"dial_code": "+353",
"regex": "^\\+353[1-9]\\d{8}$",
"placeholder": "+353 8XXXXXXXX",
"format": "+353 XX XXX XXXX",
"flag": "🇮🇪"
},
{
"name": "Isle of Man",
"code": "IM",
"dial_code": "+44",
"regex": "^\\+44[1624]\\d{6}$",
"placeholder": "+44 1624 XXXXXX",
"format": "+44 1624 XXXXXX",
"flag": "🇮🇲"
},
{
"name": "Israel",
"code": "IL",
"dial_code": "+972",
"regex": "^\\+972[5-9]\\d{8}$",
"placeholder": "+972 5XXXXXXXX",
"format": "+972 5X XXX XXXX",
"flag": "🇮🇱"
},
{
"name": "Italy",
"code": "IT",
"dial_code": "+39",
"regex": "^\\+39[0-9]\\d{9}$",
"placeholder": "+39 3XXXXXXXXX",
"format": "+39 3XX XXX XXXX",
"flag": "🇮🇹"
},
{
"name": "Jamaica",
"code": "JM",
"dial_code": "+1876",
"regex": "^\\+1876\\d{7}$",
"placeholder": "+1876 XXXXXXX",
"format": "+1876 XXX XXXX",
"flag": "🇯🇲"
},
{
"name": "Japan",
"code": "JP",
"dial_code": "+81",
"regex": "^\\+81[0-9]\\d{9}$",
"placeholder": "+81 9XXXXXXXXX",
"format": "+81 XX XXXX XXXX",
"flag": "🇯🇵"
},
{
"name": "Jersey",
"code": "JE",
"dial_code": "+44",
"regex": "^\\+44[1534]\\d{6}$",
"placeholder": "+44 1534 XXXXXX",
"format": "+44 1534 XXXXXX",
"flag": "🇯🇪"
},
{
"name": "Jordan",
"code": "JO",
"dial_code": "+962",
"regex": "^\\+962[7]\\d{8}$",
"placeholder": "+962 7XXXXXXXX",
"format": "+962 7 XXXX XXXX",
"flag": "🇯🇴"
},
{
"name": "Kazakhstan",
"code": "KZ",
"dial_code": "+7",
"regex": "^\\+7[7]\\d{9}$",
"placeholder": "+7 7XXXXXXXXX",
"format": "+7 7XX XXX XXXX",
"flag": "🇰🇿"
},
{
"name": "Kenya",
"code": "KE",
"dial_code": "+254",
"regex": "^\\+254[7]\\d{8}$",
"placeholder": "+254 7XXXXXXXX",
"format": "+254 7XX XXX XXX",
"flag": "🇰🇪"
},
{
"name": "Kiribati",
"code": "KI",
"dial_code": "+686",
"regex": "^\\+686\\d{5}$",
"placeholder": "+686 XXXXX",
"format": "+686 XXXXX",
"flag": "🇰🇮"
},
{
"name": "Korea, Democratic People's Republic of Korea",
"flag": "🇰🇵",
"code": "KP",
"dial_code": "+850",
"regex": "^\\+850\\d{7,10}$",
"placeholder": "+850 XXXXXXXXXX",
"example": "+850 2123456789"
},
{
"name": "Korea, Republic of South Korea",
"flag": "🇰🇷",
"code": "KR",
"dial_code": "+82",
"regex": "^\\+82\\d{9,10}$",
"placeholder": "+82 10XXXXXXXX",
"example": "+82 1012345678"
},
{
"name": "Kosovo",
"code": "XK",
"dial_code": "+383",
"regex": "^\\+383[4-9]\\d{7}$",
"placeholder": "+383 4XXXXXXX",
"format": "+383 4X XXX XXX",
"flag": "🇽🇰"
},
{
"name": "Kuwait",
"code": "KW",
"dial_code": "+965",
"regex": "^\\+965[5-9]\\d{7}$",
"placeholder": "+965 5XXXXXXX",
"format": "+965 5XXX XXXX",
"flag": "🇰🇼"
},
{
"name": "Kyrgyzstan",
"code": "KG",
"dial_code": "+996",
"regex": "^\\+996[5-9]\\d{8}$",
"placeholder": "+996 5XXXXXXXX",
"format": "+996 XXX XXX XXX",
"flag": "🇰🇬"
},
{
"name": "Laos",
"code": "LA",
"dial_code": "+856",
"regex": "^\\+856[2]\\d{8}$",
"placeholder": "+856 2XXXXXXXX",
"format": "+856 20 XXX XXX",
"flag": "🇱🇦"
},
{
"name": "Latvia",
"code": "LV",
"dial_code": "+371",
"regex": "^\\+371[2]\\d{7}$",
"placeholder": "+371 2XXXXXXX",
"format": "+371 2XXX XXXX",
"flag": "🇱🇻"
},
{
"name": "Lebanon",
"code": "LB",
"dial_code": "+961",
"regex": "^\\+961[3-9]\\d{6,7}$",
"placeholder": "+961 3XXXXXX",
"format": "+961 3 XXX XXX",
"flag": "🇱🇧"
},
{
"name": "Lesotho",
"code": "LS",
"dial_code": "+266",
"regex": "^\\+266[2-9]\\d{7}$",
"placeholder": "+266 5XXXXXXX",
"format": "+266 5XXX XXXX",
"flag": "🇱🇸"
},
{
"name": "Liberia",
"code": "LR",
"dial_code": "+231",
"regex": "^\\+231[4-9]\\d{7}$",
"placeholder": "+231 4XXXXXXX",
"format": "+231 XX XXX XXX",
"flag": "🇱🇷"
},
{
"name": "Libyan Arab Jamahiriya",
"flag": "🇱🇾",
"code": "LY",
"dial_code": "+218",
"regex": "^\\+218[89]\\d{8}$",
"placeholder": "+218 9XXXXXXXX",
"example": "+218 912345678"
},
{
"name": "Liechtenstein",
"code": "LI",
"dial_code": "+423",
"regex": "^\\+423[2-9]\\d{6}$",
"placeholder": "+423 6XXXXXX",
"format": "+423 XXX XXXX",
"flag": "🇱🇮"
},
{
"name": "Lithuania",
"code": "LT",
"dial_code": "+370",
"regex": "^\\+370[6]\\d{7}$",
"placeholder": "+370 6XXXXXXX",
"format": "+370 6XX XXXXX",
"flag": "🇱🇹"
},
{
"name": "Luxembourg",
"code": "LU",
"dial_code": "+352",
"regex": "^\\+352[2689]\\d{7}$",
"placeholder": "+352 6XXXXXXX",
"format": "+352 XXX XXX XXX",
"flag": "🇱🇺"
},
{
"name": "Macao",
"code": "MO",
"dial_code": "+853",
"regex": "^\\+853[6]\\d{7}$",
"placeholder": "+853 6XXXXXXX",
"format": "+853 XXXX XXXX",
"flag": "🇲🇴"
},
{
"name": "Macedonia",
"code": "MK",
"dial_code": "+389",
"regex": "^\\+389[27]\\d{7}$",
"placeholder": "+389 7XXXXXXX",
"format": "+389 XX XXX XXX",
"flag": "🇲🇰"
},
{
"name": "Madagascar",
"code": "MG",
"dial_code": "+261",
"regex": "^\\+261[3]\\d{8}$",
"placeholder": "+261 3XXXXXXXX",
"format": "+261 3X XXX XXXX",
"flag": "🇲🇬"
},
{
"name": "Malawi",
"code": "MW",
"dial_code": "+265",
"regex": "^\\+265[1-9]\\d{7}$",
"placeholder": "+265 9XXXXXXX",
"format": "+265 9XX XXX XXX",
"flag": "🇲🇼"
},
{
"name": "Malaysia",
"code": "MY",
"dial_code": "+60",
"regex": "^\\+60[1-9]\\d{7,9}$",
"placeholder": "+60 1XXXXXXXXX",
"format": "+60 1X XXXX XXXX",
"flag": "🇲🇾"
},
{
"name": "Maldives",
"code": "MV",
"dial_code": "+960",
"regex": "^\\+960[7-9]\\d{6}$",
"placeholder": "+960 7XXXXXX",
"format": "+960 XXX XXXX",
"flag": "🇲🇻"
},
{
"name": "Mali",
"code": "ML",
"dial_code": "+223",
"regex": "^\\+223[6-9]\\d{7}$",
"placeholder": "+223 7XXXXXXX",
"format": "+223 XX XX XX XX",
"flag": "🇲🇱"
},
{
"name": "Malta",
"code": "MT",
"dial_code": "+356",
"regex": "^\\+356[2379]\\d{7}$",
"placeholder": "+356 7XXXXXXX",
"format": "+356 XXXX XXXX",
"flag": "🇲🇹"
},
{
"name": "Marshall Islands",
"code": "MH",
"dial_code": "+692",
"regex": "^\\+692[2-9]\\d{6}$",
"placeholder": "+692 2XXXXXX",
"format": "+692 XXX XXXX",
"flag": "🇲🇭"
},
{
"name": "Martinique",
"code": "MQ",
"dial_code": "+596",
"regex": "^\\+596[6-7]\\d{8}$",
"placeholder": "+596 6XXXXXXXX",
"format": "+596 XXX XX XX XX",
"flag": "🇲🇶"
},
{
"name": "Mauritania",
"code": "MR",
"dial_code": "+222",
"regex": "^\\+222[2-9]\\d{7}$",
"placeholder": "+222 4XXXXXXX",
"format": "+222 XXXX XXXX",
"flag": "🇲🇷"
},
{
"name": "Mauritius",
"code": "MU",
"dial_code": "+230",
"regex": "^\\+230[2-9]\\d{6}$",
"placeholder": "+230 5XXXXXX",
"format": "+230 XXXX XXXX",
"flag": "🇲🇺"
},
{
"name": "Mayotte",
"code": "YT",
"dial_code": "+262",
"regex": "^\\+262[2-9]\\d{7}$",
"placeholder": "+262 6XXXXXXX",
"format": "+262 XXX XX XX XX",
"flag": "🇾🇹"
},
{
"name": "Mexico",
"code": "MX",
"dial_code": "+52",
"regex": "^\\+52[1]\\d{10}$",
"placeholder": "+52 1XXXXXXXXXX",
"format": "+52 1 XXX XXX XXXX",
"flag": "🇲🇽"
},
{
"name": "Micronesia, Federated States of Micronesia",
"flag": "🇫🇲",
"code": "FM",
"dial_code": "+691",
"regex": "^\\+691[1-9]\\d{6}$",
"placeholder": "+691 XXXXXXX",
"example": "+691 3201234"
},
{
"name": "Moldova",
"code": "MD",
"dial_code": "+373",
"regex": "^\\+373[67]\\d{7}$",
"placeholder": "+373 6XXXXXXX",
"format": "+373 XX XXX XXX",
"flag": "🇲🇩"
},
{
"name": "Monaco",
"code": "MC",
"dial_code": "+377",
"regex": "^\\+377[4-9]\\d{7,8}$",
"placeholder": "+377 6XXXXXXXX",
"format": "+377 6 XX XX XX XX",
"flag": "🇲🇨"
},
{
"name": "Mongolia",
"code": "MN",
"dial_code": "+976",
"regex": "^\\+976[5-9]\\d{7}$",
"placeholder": "+976 8XXXXXXX",
"format": "+976 XX XX XXXX",
"flag": "🇲🇳"
},
{
"name": "Montenegro",
"code": "ME",
"dial_code": "+382",
"regex": "^\\+382[2-9]\\d{7,8}$",
"placeholder": "+382 6XXXXXXXX",
"format": "+382 6X XXX XXX",
"flag": "🇲🇪"
},
{
"name": "Montserrat",
"code": "MS",
"dial_code": "+1664",
"regex": "^\\+1664\\d{7}$",
"placeholder": "+1664 XXXXXXX",
"format": "+1664 XXX XXXX",
"flag": "🇲🇸"
},
{
"name": "Morocco",
"code": "MA",
"dial_code": "+212",
"regex": "^\\+212[5-9]\\d{8}$",
"placeholder": "+212 6XXXXXXXX",
"format": "+212 6XX XXX XXX",
"flag": "🇲🇦"
},
{
"name": "Mozambique",
"code": "MZ",
"dial_code": "+258",
"regex": "^\\+258[28]\\d{7}$",
"placeholder": "+258 8XXXXXXX",
"format": "+258 8X XXX XXXX",
"flag": "🇲🇿"
},
{
"name": "Myanmar",
"code": "MM",
"dial_code": "+95",
"regex": "^\\+95[4-9]\\d{8}$",
"placeholder": "+95 9XXXXXXXX",
"format": "+95 9 XXX XXX XXX",
"flag": "🇲🇲"
},
{
"name": "Namibia",
"code": "NA",
"dial_code": "+264",
"regex": "^\\+264[6-8]\\d{7,8}$",
"placeholder": "+264 81XXXXXXX",
"format": "+264 81 XXX XXXX",
"flag": "🇳🇦"
},
{
"name": "Nauru",
"code": "NR",
"dial_code": "+674",
"regex": "^\\+674[0-9]\\d{4}$",
"placeholder": "+674 XXXXX",
"format": "+674 XXX XXXX",
"flag": "🇳🇷"
},
{
"name": "Nepal",
"code": "NP",
"dial_code": "+977",
"regex": "^\\+977[9]\\d{9}$",
"placeholder": "+977 9XXXXXXXXX",
"format": "+977 98X XXX XXXX",
"flag": "🇳🇵"
},
{
"name": "Netherlands",
"code": "NL",
"dial_code": "+31",
"regex": "^\\+31[1-9]\\d{8}$",
"placeholder": "+31 6XXXXXXXX",
"format": "+31 6 XXXX XXXX",
"flag": "🇳🇱"
},
{
"name": "Netherlands Antilles",
"code": "AN",
"dial_code": "+599",
"regex": "^\\+599[9]\\d{6}$",
"placeholder": "+599 9XXXXXX",
"format": "+599 9XXX XXXX",
"flag": ""
},
{
"name": "New Caledonia",
"code": "NC",
"dial_code": "+687",
"regex": "^\\+687\\d{6}$",
"placeholder": "+687 XXXXXX",
"format": "+687 XX XX XX",
"flag": "🇳🇨"
},
{
"name": "New Zealand",
"code": "NZ",
"dial_code": "+64",
"regex": "^\\+64[2-9]\\d{7,9}$",
"placeholder": "+64 21XXXXXXX",
"format": "+64 21 XXX XXXX",
"flag": "🇳🇿"
},
{
"name": "Nicaragua",
"code": "NI",
"dial_code": "+505",
"regex": "^\\+505[5-8]\\d{7}$",
"placeholder": "+505 8XXXXXXX",
"format": "+505 XXXX XXXX",
"flag": "🇳🇮"
},
{
"name": "Niger",
"code": "NE",
"dial_code": "+227",
"regex": "^\\+227[0-9]\\d{7}$",
"placeholder": "+227 9XXXXXXX",
"format": "+227 XX XX XX XX",
"flag": "🇳🇪"
},
{
"name": "Nigeria",
"code": "NG",
"dial_code": "+234",
"regex": "^\\+234[789]\\d{9}$",
"placeholder": "+234 8XXXXXXXXX",
"format": "+234 8XX XXX XXXX",
"flag": "🇳🇬"
},
{
"name": "Niue",
"code": "NU",
"dial_code": "+683",
"regex": "^\\+683\\d{4}$",
"placeholder": "+683 XXXX",
"format": "+683 XXXX",
"flag": "🇳🇺"
},
{
"name": "Norfolk Island",
"code": "NF",
"dial_code": "+672",
"regex": "^\\+672[3]\\d{5}$",
"placeholder": "+672 3XXXXX",
"format": "+672 3 XX XXX",
"flag": "🇳🇫"
},
{
"name": "Northern Mariana Islands",
"code": "MP",
"dial_code": "+1670",
"regex": "^\\+1670\\d{7}$",
"placeholder": "+1670 XXXXXXX",
"format": "+1670 XXX XXXX",
"flag": "🇲🇵"
},
{
"name": "Norway",
"code": "NO",
"dial_code": "+47",
"regex": "^\\+47[2-9]\\d{7}$",
"placeholder": "+47 4XXXXXXX",
"format": "+47 XXX XX XXX",
"flag": "🇳🇴"
},
{
"name": "Oman",
"code": "OM",
"dial_code": "+968",
"regex": "^\\+968[79]\\d{7}$",
"placeholder": "+968 9XXXXXXX",
"format": "+968 9XXX XXXX",
"flag": "🇴🇲"
},
{
"name": "Pakistan",
"code": "PK",
"dial_code": "+92",
"regex": "^\\+92[3]\\d{9}$",
"placeholder": "+92 3XXXXXXXXX",
"format": "+92 3XX XXX XXXX",
"flag": "🇵🇰"
},
{
"name": "Palau",
"code": "PW",
"dial_code": "+680",
"regex": "^\\+680\\d{7}$",
"placeholder": "+680 XXXXXXX",
"format": "+680 XXX XXXX",
"flag": "🇵🇼"
},
{