ngx-dial-input 2.0.4 → 2.0.6

package/fesm2020/ngx-dial-input.mjs

@@ -14,7 +14,7 @@ const countries = [
         dialCode: '+507',
         format: '+507 ##-###-####',
         flag: 'https://flagcdn.com/w40/pa.png',
-        phoneLength: 8 // Mobile: 8 digits (e.g., +507 6123 4567)
+        phoneLength: 8
     },
     {
         name: 'Pakistan',
@@ -1096,24 +1096,6 @@ const countries = [
         flag: 'https://flagcdn.com/w40/bm.png',
         phoneLength: 10
     },
-    {
-        name: 'Saint Barthélemy',
-        native: 'Saint-Barthélemy',
-        iso2: 'bl',
-        dialCode: '+590',
-        format: '+590 ## ## ## ##',
-        flag: 'https://flagcdn.com/w40/bl.png',
-        phoneLength: 9
-    },
-    {
-        name: 'Saint Martin (French part)',
-        native: 'Saint-Martin (partie française)',
-        iso2: 'mf',
-        dialCode: '+590',
-        format: '+590 ## ## ## ##',
-        flag: 'https://flagcdn.com/w40/mf.png',
-        phoneLength: 9
-    },
     {
         name: 'Guadeloupe',
         native: 'Guadeloupe',
@@ -1130,7 +1112,7 @@ const countries = [
         dialCode: '+596',
         format: '+596 ## ## ## ##',
         flag: 'https://flagcdn.com/w40/mq.png',
-        phoneLength: 9 // Mobile: 9 digits (e.g., +596 696 12 34 56)
+        phoneLength: 9
     },
     {
         name: 'Réunion',
@@ -1139,7 +1121,7 @@ const countries = [
         dialCode: '+262',
         format: '+262 ## ## ## ##',
         flag: 'https://flagcdn.com/w40/re.png',
-        phoneLength: 9 // Mobile: 9 digits (e.g., +262 692 12 34 56)
+        phoneLength: 9
     },
     {
         name: 'Mayotte',
@@ -1148,7 +1130,7 @@ const countries = [
         dialCode: '+262',
         format: '+262 ## ## ## ##',
         flag: 'https://flagcdn.com/w40/yt.png',
-        phoneLength: 9 // Same as Réunion (e.g., +262 639 12 34 56)
+        phoneLength: 9
     },
     {
         name: 'French Guiana',
@@ -1157,16 +1139,7 @@ const countries = [
         dialCode: '+594',
         format: '+594 ## ## ## ##',
         flag: 'https://flagcdn.com/w40/gf.png',
-        phoneLength: 9 // Mobile: 9 digits (e.g., +594 694 12 34 56)
-    },
-    {
-        name: 'Wallis and Futuna',
-        native: 'Uvea o Futuna',
-        iso2: 'wf',
-        dialCode: '+681',
-        format: '+681 ## ## ##',
-        flag: 'https://flagcdn.com/w40/wf.png',
-        phoneLength: 6 // Mobile: 6 digits (e.g., +681 72 34 56)
+        phoneLength: 9
     },
     {
         name: 'New Caledonia',
@@ -1175,7 +1148,7 @@ const countries = [
         dialCode: '+687',
         format: '+687 ## ## ##',
         flag: 'https://flagcdn.com/w40/nc.png',
-        phoneLength: 6 // Mobile: 6 digits (e.g., +687 75 12 34)
+        phoneLength: 6
     },
     {
         name: 'French Polynesia',
@@ -1184,7 +1157,7 @@ const countries = [
         dialCode: '+689',
         format: '+689 ## ## ##',
         flag: 'https://flagcdn.com/w40/pf.png',
-        phoneLength: 6 // Mobile: 6 digits (e.g., +689 87 12 34)
+        phoneLength: 6
     },
     {
         name: 'Cook Islands',
@@ -1193,7 +1166,7 @@ const countries = [
         dialCode: '+682',
         format: '+682 ## ###',
         flag: 'https://flagcdn.com/w40/ck.png',
-        phoneLength: 5 // Mobile: 5 digits (e.g., +682 71 234)
+        phoneLength: 5
     },
     {
         name: 'Niue',
@@ -1202,7 +1175,7 @@ const countries = [
         dialCode: '+683',
         format: '+683 ## ###',
         flag: 'https://flagcdn.com/w40/nu.png',
-        phoneLength: 4 // Mobile: 4 digits (e.g., +683 1234)
+        phoneLength: 4
     },
     {
         name: 'Tokelau',
@@ -1211,7 +1184,7 @@ const countries = [
         dialCode: '+690',
         format: '+690 ## ###',
         flag: 'https://flagcdn.com/w40/tk.png',
-        phoneLength: 4 // Mobile: 4 digits (e.g., +690 1234)
+        phoneLength: 4
     },
     {
         name: 'Canada',
@@ -1220,7 +1193,7 @@ const countries = [
         dialCode: '+1',
         format: '+1 ### ### ####',
         flag: 'https://flagcdn.com/w40/ca.png',
-        phoneLength: 10 // NANP standard (e.g., +1 416 123 4567)
+        phoneLength: 10
     },
     {
         name: 'Costa Rica',
@@ -1229,7 +1202,7 @@ const countries = [
         dialCode: '+506',
         format: '+506 ###-####',
         flag: 'https://flagcdn.com/w40/cr.png',
-        phoneLength: 8 // Mobile: 8 digits (e.g., +506 6123 4567)
+        phoneLength: 8
     },
     {
         name: 'El Salvador',
@@ -1238,7 +1211,7 @@ const countries = [
         dialCode: '+503',
         format: '+503 ##-###-####',
         flag: 'https://flagcdn.com/w40/sv.png',
-        phoneLength: 8 // Mobile: 8 digits (e.g., +503 6123 4567)
+        phoneLength: 8
     },
     {
         name: 'Guatemala',
@@ -1247,7 +1220,7 @@ const countries = [
         dialCode: '+502',
         format: '+502 ##-###-####',
         flag: 'https://flagcdn.com/w40/gt.png',
-        phoneLength: 8 // Mobile: 8 digits (e.g., +502 6123 4567)
+        phoneLength: 8
     },
     {
         name: 'Honduras',
@@ -1256,7 +1229,7 @@ const countries = [
         dialCode: '+504',
         format: '+504 ##-###-####',
         flag: 'https://flagcdn.com/w40/hn.png',
-        phoneLength: 8 // Mobile: 8 digits (e.g., +504 6123 4567)
+        phoneLength: 8
     },
     {
         name: 'Nicaragua',
@@ -1265,7 +1238,7 @@ const countries = [
         dialCode: '+505',
         format: '+505 ##-###-####',
         flag: 'https://flagcdn.com/w40/ni.png',
-        phoneLength: 8 // Mobile: 8 digits (e.g., +505 6123 4567)
+        phoneLength: 8
     },
     {
         name: 'Belize',
@@ -1274,7 +1247,7 @@ const countries = [
         dialCode: '+501',
         format: '+501 ###-####',
         flag: 'https://flagcdn.com/w40/bz.png',
-        phoneLength: 7 // Mobile: 7 digits (e.g., +501 6123 456)
+        phoneLength: 7
     },
     {
         name: 'Curaçao',
@@ -1283,7 +1256,7 @@ const countries = [
         dialCode: '+599',
         format: '+599 9 ### ####',
         flag: 'https://flagcdn.com/w40/cw.png',
-        phoneLength: 7 // Mobile: 7 digits (e.g., +599 9 123 4567)
+        phoneLength: 7
     },
     {
         name: 'Sint Maarten (Dutch part)',
@@ -1292,7 +1265,7 @@ const countries = [
         dialCode: '+1 721',
         format: '+1 721 ### ####',
         flag: 'https://flagcdn.com/w40/sx.png',
-        phoneLength: 10 // Mobile: 10 digits (e.g., +1 721 123 4567)
+        phoneLength: 10
     },
     {
         name: 'Aruba',
@@ -1301,7 +1274,7 @@ const countries = [
         dialCode: '+297',
         format: '+297 ### ####',
         flag: 'https://flagcdn.com/w40/aw.png',
-        phoneLength: 7 // Mobile: 7 digits (e.g., +297 6123 456)
+        phoneLength: 7
     },
     {
         name: 'Bonaire, Sint Eustatius and Saba',
@@ -1310,7 +1283,7 @@ const countries = [
         dialCode: '+599 7',
         format: '+599 7 ### ####',
         flag: 'https://flagcdn.com/w40/bq.png',
-        phoneLength: 7 // Mobile: 7 digits (e.g., +599 7 123 4567)
+        phoneLength: 7
     },
     {
         name: 'Sint Eustatius',
@@ -1319,7 +1292,7 @@ const countries = [
         dialCode: '+599 3',
         format: '+599 3 ### ####',
         flag: 'https://flagcdn.com/w40/bq.png',
-        phoneLength: 7 // Mobile: 7 digits (e.g., +599 3 123 4567)
+        phoneLength: 7
     },
     {
         name: 'Saba',
@@ -1328,7 +1301,7 @@ const countries = [
         dialCode: '+599 4',
         format: '+599 4 ### ####',
         flag: 'https://flagcdn.com/w40/bq.png',
-        phoneLength: 7 // Mobile: 7 digits (e.g., +599 4 123 4567)
+        phoneLength: 7
     },
     {
         name: 'Greece',
@@ -1338,221 +1311,1400 @@ const countries = [
         flag: 'https://flagcdn.com/w40/gr.png',
         format: '+30 ### ### ####',
         phoneLength: 10
-    }
-];
-
-class PhoneInputComponent {
-    constructor(eRef) {
-        this.eRef = eRef;
-        this.countriesList = [...countries].sort((a, b) => a.name.localeCompare(b.name));
-        this.searchTerm = '';
-        this.defaultCountry = '';
-        this.placeholder = '';
-        this.searchEnabled = true;
-        this.numberFormat = 'international';
-        this.setFirstCountry = '';
-        this.phoneChange = new EventEmitter();
-        this.phoneNumber = '';
-        this.isInvalid = false;
-        this.dropdownOpen = false;
-        this.animating = false;
-        this.selectedCountry = countries[0];
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    ngOnInit() {
-        if (this.defaultCountry) {
-            const match = countries.find(c => c.iso2 === this.defaultCountry.toLowerCase());
-            if (match)
-                this.selectedCountry = match;
-        }
-    }
-    handleClickOutside(event) {
-        if (!this.eRef.nativeElement.contains(event.target)) {
-            this.dropdownOpen = false;
-        }
-    }
-    onAnimationDone(event) {
-        if (!this.dropdownOpen) {
-            this.animating = false;
-        }
-    }
-    toggleDropdown() {
-        this.dropdownOpen = !this.dropdownOpen;
-        this.animating = true;
-    }
-    onClickOutside(event) {
-        if (!this.eRef.nativeElement.contains(event.target)) {
-            this.dropdownOpen = false;
-        }
-    }
-    onSearchChange() {
-        const term = this.searchTerm.toLowerCase();
-        this.countriesList = countries
-            .filter(c => c.name.toLowerCase().includes(term) ||
-            (c.native?.toLowerCase().includes(term)))
-            .sort((a, b) => a.name.localeCompare(b.name));
-    }
-    selectCountry(country) {
-        this.selectedCountry = country;
-        this.searchTerm = '';
-        this.countriesList = countries;
-        this.dropdownOpen = false;
-        this.emitPhoneChange();
-    }
-    onPhoneInput() {
-        this.emitPhoneChange();
-    }
-    emitPhoneChange() {
-        const raw = this.phoneNumber || '';
-        const digitsOnly = raw.replace(/\D/g, '');
-        const hyphenCount = (raw.match(/-/g) || []).length;
-        const spaceCount = (raw.match(/ /g) || []).length;
-        const totalChars = this.phoneNumber.length;
-        const maxAllowedLength = this.selectedCountry?.phoneLength + hyphenCount + spaceCount;
-        if (digitsOnly.length !== this.selectedCountry?.phoneLength) {
-            this.isInvalid = true;
-        }
-        else if (totalChars > maxAllowedLength) {
-            this.isInvalid = true;
-        }
-        else {
-            this.isInvalid = false;
-        }
-        const fullPhone = this.selectedCountry.dialCode + raw;
-        const structuredValue = {
-            e164Number: fullPhone,
-            nationalNumber: raw,
-            dialCode: this.selectedCountry.dialCode,
-            countryCode: this.selectedCountry.iso2,
-            isValid: !this.isInvalid,
-        };
-        this.onChange(structuredValue);
-        this.phoneChange.emit(structuredValue);
-    }
-    writeValue(value) {
-        if (value && value.dialCode && value.countryCode) {
-            const match = countries.find(c => c.dialCode === value.dialCode && c.iso2 === value.countryCode);
-            if (match) {
-                this.selectedCountry = match;
-            }
-            else {
-                this.selectedCountry = countries[0];
-            }
-            this.phoneNumber = value.nationalNumber || '';
-        }
-        else {
-            this.selectedCountry = countries[0];
-            this.phoneNumber = '';
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    allowPhoneCharacters(event) {
-        const allowedChars = [' ', '-'];
-        const charCode = event.charCode;
-        // Allow digits 0–9
-        if (charCode >= 48 && charCode <= 57)
-            return;
-        // Allow hyphen and space
-        if (allowedChars.includes(event.key))
-            return;
-        event.preventDefault();
-    }
-}
-PhoneInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PhoneInputComponent, selector: "phone-input", inputs: { defaultCountry: "defaultCountry", placeholder: "placeholder", searchEnabled: "searchEnabled", numberFormat: "numberFormat", setFirstCountry: "setFirstCountry" }, outputs: { phoneChange: "phoneChange" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, providers: [{
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => PhoneInputComponent),
-            multi: true
-        }], ngImport: i0, template: `<div class="phone-input-wrapper">
-  <div class="input-container">
-    <!-- Country Selector (20%) -->
-    <div class="country-select" (click)="toggleDropdown()" (blur)="toggleDropdown()">
-      <img [src]="selectedCountry.flag" width="20" />
-      <span>{{selectedCountry.dialCode}}</span>
-      <span class="arrow-down">▾</span>
-    </div>
-
-    <!-- Phone Input (80%) -->
-    <input
-      type="tel"
-      pattern="[0-9\\s\\-]*"
-      inputmode="numeric"
-      class="phone-input"
-      [placeholder]="placeholder"
-      [(ngModel)]="phoneNumber"
-      [ngClass]="{ 'error-border': isInvalid }"
-      (input)="onPhoneInput()"
-      (keypress)="allowPhoneCharacters($event)"
-    />
-  </div>
-
-  <!-- Dropdown Content (full width below) -->
-  <div
-  class="dropdown-content"
-  [@dropdownAnimation]="dropdownOpen ? 'open' : 'closed'"
-  *ngIf="dropdownOpen || animating"
-  (@dropdownAnimation.done)="onAnimationDone($event)" >
-    <input
-      *ngIf="searchEnabled"
-      type="text"
-      class="search-box"
-      placeholder="Search Country"
-      [(ngModel)]="searchTerm"
-      (input)="onSearchChange()"
-    />
-    <div class="country-list">
-      <div
-        class="country-option"
-        *ngFor="let country of countriesList"
-        (click)="selectCountry(country)"
-      >
-        <img [src]="country.flag" width="20" />
-        <span class="country-name">{{ country.name }} ({{ country.native }})</span>
-        <span class="dial-code">{{ country.dialCode }}</span>
-      </div>
-    </div>
-  </div>
-</div>
-
-  `, isInline: true, styles: [".phone-input-wrapper{position:relative;font-family:Arial,sans-serif}.input-container{display:flex;width:100%;padding-bottom:3px}.country-select{width:24%;display:flex;align-items:center;justify-content:space-between;border:1px solid #ccc;border-right:none;border-radius:4px 0 0 4px;padding:8px;cursor:pointer;background-color:#f8f8f8}.country-select img{margin-right:5px}.arrow-down{font-size:13px;color:#666}.arrow-down:after{display:none}.phone-input{width:80%;padding:8px 12px;border:1px solid #ccc;border-radius:0 4px 4px 0;outline:none}.dropdown-content{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #ccc;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:-1px}.search-box{width:100%;padding:8px 12px;border:none;border-bottom:1px solid #eee;outline:none}.country-list{max-height:200px;overflow-y:auto}.country-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-option:hover{background-color:#f5f5f5}.country-option img{margin-right:5px}.country-name{flex-grow:1}.dial-code{color:#666;font-size:.9em}input.error-border{border-color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
-        trigger('dropdownAnimation', [
-            state('open', style({
-                opacity: 1,
-                transform: 'scaleY(1)',
-                height: '*',
-                padding: '*'
-            })),
-            state('closed', style({
-                opacity: 0,
-                transform: 'scaleY(0)',
-                height: '0px',
-                padding: '0px'
-            })),
-            transition('closed => open', [
-                animate('200ms ease-out')
-            ]),
-            transition('open => closed', [
-                animate('150ms ease-in')
-            ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'phone-input', animations: [
-                        trigger('dropdownAnimation', [
-                            state('open', style({
-                                opacity: 1,
-                                transform: 'scaleY(1)',
-                                height: '*',
-                                padding: '*'
-                            })),
-                            state('closed', style({
+    },
+    {
+        name: 'Cyprus',
+        native: 'Κύπρος',
+        iso2: 'cy',
+        dialCode: '+357',
+        format: '+357 ## ### ####',
+        flag: 'https://flagcdn.com/w40/cy.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Malta',
+        native: 'Malta',
+        iso2: 'mt',
+        dialCode: '+356',
+        format: '+356 #### ####',
+        flag: 'https://flagcdn.com/w40/mt.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Iceland',
+        native: 'Ísland',
+        iso2: 'is',
+        dialCode: '+354',
+        format: '+354 ### ####',
+        flag: 'https://flagcdn.com/w40/is.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Luxembourg',
+        native: 'Lëtzebuerg',
+        iso2: 'lu',
+        dialCode: '+352',
+        format: '+352 #### #####',
+        flag: 'https://flagcdn.com/w40/lu.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Monaco',
+        native: 'Monaco',
+        iso2: 'mc',
+        dialCode: '+377',
+        format: '+377 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/mc.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Liechtenstein',
+        native: 'Liechtenstein',
+        iso2: 'li',
+        dialCode: '+423',
+        format: '+423 ### ####',
+        flag: 'https://flagcdn.com/w40/li.png',
+        phoneLength: 7
+    },
+    {
+        name: 'San Marino',
+        native: 'San Marino',
+        iso2: 'sm',
+        dialCode: '+378',
+        format: '+378 ### #####',
+        flag: 'https://flagcdn.com/w40/sm.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Vatican City',
+        native: 'Città del Vaticano',
+        iso2: 'va',
+        dialCode: '+379',
+        format: '+379 ### #####',
+        flag: 'https://flagcdn.com/w40/va.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Andorra',
+        native: 'Andorra',
+        iso2: 'ad',
+        dialCode: '+376',
+        format: '+376 ### ###',
+        flag: 'https://flagcdn.com/w40/ad.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Maldives',
+        native: 'Maldives',
+        iso2: 'mv',
+        dialCode: '+960',
+        format: '+960 ## ###',
+        flag: 'https://flagcdn.com/w40/mv.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Sri Lanka',
+        native: 'ශ්‍රී ලංකාව',
+        iso2: 'lk',
+        dialCode: '+94',
+        format: '+94 ## ### ####',
+        flag: 'https://flagcdn.com/w40/lk.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Nepal',
+        native: 'नेपाल',
+        iso2: 'np',
+        dialCode: '+977',
+        format: '+977 ## ### ####',
+        flag: 'https://flagcdn.com/w40/np.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Bhutan',
+        native: 'འབྲུག',
+        iso2: 'bt',
+        dialCode: '+975',
+        format: '+975 ## ### ###',
+        flag: 'https://flagcdn.com/w40/bt.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Malawi',
+        native: 'Malawi',
+        iso2: 'mw',
+        dialCode: '+265',
+        format: '+265 ## ### ###',
+        flag: 'https://flagcdn.com/w40/mw.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Zambia',
+        native: 'Zambia',
+        iso2: 'zm',
+        dialCode: '+260',
+        format: '+260 ## ### ####',
+        flag: 'https://flagcdn.com/w40/zm.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Botswana',
+        native: 'Botswana',
+        iso2: 'bw',
+        dialCode: '+267',
+        format: '+267 ## ### ###',
+        flag: 'https://flagcdn.com/w40/bw.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Namibia',
+        native: 'Namibia',
+        iso2: 'na',
+        dialCode: '+264',
+        format: '+264 ## ### ###',
+        flag: 'https://flagcdn.com/w40/na.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Lesotho',
+        native: 'Lesotho',
+        iso2: 'ls',
+        dialCode: '+266',
+        format: '+266 ## ### ###',
+        flag: 'https://flagcdn.com/w40/ls.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Mozambique',
+        native: 'Moçambique',
+        iso2: 'mz',
+        dialCode: '+258',
+        format: '+258 ## ### ####',
+        flag: 'https://flagcdn.com/w40/mz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Madagascar',
+        native: 'Madagasikara',
+        iso2: 'mg',
+        dialCode: '+261',
+        format: '+261 ## ## ### ##',
+        flag: 'https://flagcdn.com/w40/mg.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Comoros',
+        native: 'Komori',
+        iso2: 'km',
+        dialCode: '+269',
+        format: '+269 ## ## ##',
+        flag: 'https://flagcdn.com/w40/km.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Tique',
+        native: 'Tique',
+        iso2: 'yt',
+        dialCode: '+262',
+        format: '+262 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/yt.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Seychelles',
+        native: 'Seychelles',
+        iso2: 'sc',
+        dialCode: '+248',
+        format: '+248 ## ###',
+        flag: 'https://flagcdn.com/w40/sc.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Mauritius',
+        native: 'Maurice',
+        iso2: 'mu',
+        dialCode: '+230',
+        format: '+230 ## ### ###',
+        flag: 'https://flagcdn.com/w40/mu.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Rwanda',
+        native: 'Rwanda',
+        iso2: 'rw',
+        dialCode: '+250',
+        format: '+250 ## ### ###',
+        flag: 'https://flagcdn.com/w40/rw.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Burundi',
+        native: 'Burundi',
+        iso2: 'bi',
+        dialCode: '+257',
+        format: '+257 ## ### ###',
+        flag: 'https://flagcdn.com/w40/bi.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Cape Verde',
+        native: 'Cabo Verde',
+        iso2: 'cv',
+        dialCode: '+238',
+        format: '+238 ### ####',
+        flag: 'https://flagcdn.com/w40/cv.png',
+        phoneLength: 7
+    },
+    {
+        name: 'São Tomé and Príncipe',
+        native: 'São Tomé e Príncipe',
+        iso2: 'st',
+        dialCode: '+239',
+        format: '+239 ## #####',
+        flag: 'https://flagcdn.com/w40/st.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Liberia',
+        native: 'Liberia',
+        iso2: 'lr',
+        dialCode: '+231',
+        format: '+231 ## ### ###',
+        flag: 'https://flagcdn.com/w40/lr.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Sierra Leone',
+        native: 'Sierra Leone',
+        iso2: 'sl',
+        dialCode: '+232',
+        format: '+232 ## ######',
+        flag: 'https://flagcdn.com/w40/sl.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Guinea',
+        native: 'Guinée',
+        iso2: 'gn',
+        dialCode: '+224',
+        format: '+224 ### ######',
+        flag: 'https://flagcdn.com/w40/gn.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Guinea-Bissau',
+        native: 'Guiné-Bissau',
+        iso2: 'gw',
+        dialCode: '+245',
+        format: '+245 ### ####',
+        flag: 'https://flagcdn.com/w40/gw.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Equatorial Guinea',
+        native: 'Guinea Ecuatorial',
+        iso2: 'gq',
+        dialCode: '+240',
+        format: '+240 ## ### ####',
+        flag: 'https://flagcdn.com/w40/gq.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Gabon',
+        native: 'Gabon',
+        iso2: 'ga',
+        dialCode: '+241',
+        format: '+241 # ## ## ##',
+        flag: 'https://flagcdn.com/w40/ga.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Central African Republic',
+        native: 'République centrafricaine',
+        iso2: 'cf',
+        dialCode: '+236',
+        format: '+236 ## ## ####',
+        flag: 'https://flagcdn.com/w40/cf.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Republic of the Congo',
+        native: 'Congo-Brazzaville',
+        iso2: 'cg',
+        dialCode: '+242',
+        format: '+242 ## ### ###',
+        flag: 'https://flagcdn.com/w40/cg.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Democratic Republic of the Congo',
+        native: 'Congo-Kinshasa',
+        iso2: 'cd',
+        dialCode: '+243',
+        format: '+243 ## ### ####',
+        flag: 'https://flagcdn.com/w40/cd.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Cameroon',
+        native: 'Cameroun',
+        iso2: 'cm',
+        dialCode: '+237',
+        format: '+237 #### ####',
+        flag: 'https://flagcdn.com/w40/cm.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Chad',
+        native: 'Tchad',
+        iso2: 'td',
+        dialCode: '+235',
+        format: '+235 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/td.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Niger',
+        native: 'Niger',
+        iso2: 'ne',
+        dialCode: '+227',
+        format: '+227 ## ## ####',
+        flag: 'https://flagcdn.com/w40/ne.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Mali',
+        native: 'Mali',
+        iso2: 'ml',
+        dialCode: '+223',
+        format: '+223 ## ## ####',
+        flag: 'https://flagcdn.com/w40/ml.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Burkina Faso',
+        native: 'Burkina Faso',
+        iso2: 'bf',
+        dialCode: '+226',
+        format: '+226 ## ## ####',
+        flag: 'https://flagcdn.com/w40/bf.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Togo',
+        native: 'Togo',
+        iso2: 'tg',
+        dialCode: '+228',
+        format: '+228 ## ### ###',
+        flag: 'https://flagcdn.com/w40/tg.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Benin',
+        native: 'Bénin',
+        iso2: 'bj',
+        dialCode: '+229',
+        format: '+229 ## ## ####',
+        flag: 'https://flagcdn.com/w40/bj.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Ivory Coast',
+        native: "Côte d'Ivoire",
+        iso2: 'ci',
+        dialCode: '+225',
+        format: '+225 ## ### ###',
+        flag: 'https://flagcdn.com/w40/ci.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Gambia',
+        native: 'Gambia',
+        iso2: 'gm',
+        dialCode: '+220',
+        format: '+220 ### ####',
+        flag: 'https://flagcdn.com/w40/gm.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Mauritania',
+        native: 'Mauritanie',
+        iso2: 'mr',
+        dialCode: '+222',
+        format: '+222 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/mr.png',
+        phoneLength: 8
+    },
+    {
+        name: 'East Timor',
+        native: 'Timor-Leste',
+        iso2: 'tl',
+        dialCode: '+670',
+        format: '+670 ### ####',
+        flag: 'https://flagcdn.com/w40/tl.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Palestine',
+        native: 'فلسطين',
+        iso2: 'ps',
+        dialCode: '+970',
+        format: '+970 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ps.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Lebanon',
+        native: 'لبنان',
+        iso2: 'lb',
+        dialCode: '+961',
+        format: '+961 ## ### ###',
+        flag: 'https://flagcdn.com/w40/lb.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Syria',
+        native: 'سوريا',
+        iso2: 'sy',
+        dialCode: '+963',
+        format: '+963 ## ######',
+        flag: 'https://flagcdn.com/w40/sy.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Jordan',
+        native: 'الأردن',
+        iso2: 'jo',
+        dialCode: '+962',
+        format: '+962 # #### ####',
+        flag: 'https://flagcdn.com/w40/jo.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Yemen',
+        native: 'اليمن',
+        iso2: 'ye',
+        dialCode: '+967',
+        format: '+967 ### ### ###',
+        flag: 'https://flagcdn.com/w40/ye.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Oman',
+        native: 'عُمان',
+        iso2: 'om',
+        dialCode: '+968',
+        format: '+968 ## ### ###',
+        flag: 'https://flagcdn.com/w40/om.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Qatar',
+        native: 'قطر',
+        iso2: 'qa',
+        dialCode: '+974',
+        format: '+974 #### ####',
+        flag: 'https://flagcdn.com/w40/qa.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Kuwait',
+        native: 'الكويت',
+        iso2: 'kw',
+        dialCode: '+965',
+        format: '+965 #### ####',
+        flag: 'https://flagcdn.com/w40/kw.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Bahrain',
+        native: 'البحرين',
+        iso2: 'bh',
+        dialCode: '+973',
+        format: '+973 #### ####',
+        flag: 'https://flagcdn.com/w40/bh.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Israel',
+        native: 'ישראל',
+        iso2: 'il',
+        dialCode: '+972',
+        format: '+972 ## ### ####',
+        flag: 'https://flagcdn.com/w40/il.png',
+        phoneLength: 9
+    },
+    {
+        name: 'united Arab Emirates',
+        native: 'الإمارات العربية المتحدة',
+        iso2: 'ae',
+        dialCode: '+971',
+        format: '+971 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ae.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Afghanistan',
+        native: 'افغانستان',
+        iso2: 'af',
+        dialCode: '+93',
+        format: '+93 ## ### ####',
+        flag: 'https://flagcdn.com/w40/af.png',
+        phoneLength: 9
+    },
+    {
+        name: 'bolivia',
+        native: 'Bolivia',
+        iso2: 'bo',
+        dialCode: '+591',
+        format: '+591 # ### ####',
+        flag: 'https://flagcdn.com/w40/bo.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Paraguay',
+        native: 'Paraguay',
+        iso2: 'py',
+        dialCode: '+595',
+        format: '+595 ## ### ####',
+        flag: 'https://flagcdn.com/w40/py.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Ecuador',
+        native: 'Ecuador',
+        iso2: 'ec',
+        dialCode: '+593',
+        format: '+593 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ec.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Guyana',
+        native: 'Guyana',
+        iso2: 'gy',
+        dialCode: '+592',
+        format: '+592 ### ####',
+        flag: 'https://flagcdn.com/w40/gy.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Suriname',
+        native: 'Suriname',
+        iso2: 'sr',
+        dialCode: '+597',
+        format: '+597 ### ####',
+        flag: 'https://flagcdn.com/w40/sr.png',
+        phoneLength: 7
+    },
+    {
+        name: 'French Southern and Antarctic Lands',
+        native: 'Terres australes et antarctiques françaises',
+        iso2: 'tf',
+        dialCode: '+262',
+        format: '+262 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/tf.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Saint Pierre and Miquelon',
+        native: 'Saint-Pierre-et-Miquelon',
+        iso2: 'pm',
+        dialCode: '+508',
+        format: '+508 ## ## ##',
+        flag: 'https://flagcdn.com/w40/pm.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Antarctica',
+        native: 'Antarctica',
+        iso2: 'aq',
+        dialCode: '+672',
+        format: '+672 ### ####',
+        flag: 'https://flagcdn.com/w40/aq.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Bouvet Island',
+        native: 'Bouvetøya',
+        iso2: 'bv',
+        dialCode: '+47',
+        format: '+47 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/bv.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Svalbard and Jan Mayen',
+        native: 'Svalbard og Jan Mayen',
+        iso2: 'sj',
+        dialCode: '+47',
+        format: '+47 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/sj.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Faroe Islands',
+        native: 'Føroyar',
+        iso2: 'fo',
+        dialCode: '+298',
+        format: '+298 ## ## ##',
+        flag: 'https://flagcdn.com/w40/fo.png',
+        phoneLength: 6
+    },
+    {
+        name: 'British Indian Ocean Territory',
+        native: 'British Indian Ocean Territory',
+        iso2: 'io',
+        dialCode: '+246',
+        format: '+246 ### ####',
+        flag: 'https://flagcdn.com/w40/io.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Brunei Darussalam',
+        native: 'Brunei Darussalam',
+        iso2: 'bn',
+        dialCode: '+673',
+        format: '+673 #### ####',
+        flag: 'https://flagcdn.com/w40/bn.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Cayman Islands',
+        native: 'Cayman Islands',
+        iso2: 'ky',
+        dialCode: '+1 345',
+        format: '+1 345 ### ####',
+        flag: 'https://flagcdn.com/w40/ky.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Christmas Island',
+        native: 'Christmas Island',
+        iso2: 'cx',
+        dialCode: '+61',
+        format: '+61 # #### ####',
+        flag: 'https://flagcdn.com/w40/cx.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Cocos (Keeling) Islands',
+        native: 'Cocos (Keeling) Islands',
+        iso2: 'cc',
+        dialCode: '+61',
+        format: '+61 # #### ####',
+        flag: 'https://flagcdn.com/w40/cc.png',
+        phoneLength: 9
+    },
+    {
+        name: 'COMOROS ISLANDS',
+        native: 'Comoros',
+        iso2: 'km',
+        dialCode: '+269',
+        format: '+269 ## ## ##',
+        flag: 'https://flagcdn.com/w40/km.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Congo Kinshasa',
+        native: 'Congo-Kinshasa',
+        iso2: 'cd',
+        dialCode: '+243',
+        format: '+243 ## ### ####',
+        flag: 'https://flagcdn.com/w40/cd.png',
+        phoneLength: 9
+    },
+    {
+        name: 'COTE D IVOIRE',
+        native: "Côte d'Ivoire",
+        iso2: 'ci',
+        dialCode: '+225',
+        format: '+225 ## ### ###',
+        flag: 'https://flagcdn.com/w40/ci.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Djibouti',
+        native: 'Djibouti',
+        iso2: 'dj',
+        dialCode: '+253',
+        format: '+253 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/dj.png',
+        phoneLength: 8
+    },
+    {
+        name: 'England',
+        native: 'England',
+        iso2: 'gb',
+        dialCode: '+44',
+        format: '+44 #### ### ###',
+        flag: 'https://flagcdn.com/w40/gb.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Wales',
+        native: 'Wales',
+        iso2: 'gb',
+        dialCode: '+44',
+        format: '+44 #### ### ###',
+        flag: 'https://flagcdn.com/w40/gb.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Scotland',
+        native: 'Scotland',
+        iso2: 'gb',
+        dialCode: '+44',
+        format: '+44 #### ### ###',
+        flag: 'https://flagcdn.com/w40/gb.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Northern Ireland',
+        native: 'Northern Ireland',
+        iso2: 'gb',
+        dialCode: '+44',
+        format: '+44 #### ### ###',
+        flag: 'https://flagcdn.com/w40/gb.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Vatican City',
+        native: 'Città del Vaticano',
+        iso2: 'va',
+        dialCode: '+379',
+        format: '+379 ### #####',
+        flag: 'https://flagcdn.com/w40/va.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Saint Helena, Ascension and Tristan da Cunha',
+        native: 'Saint Helena, Ascension and Tristan da Cunha',
+        iso2: 'sh',
+        dialCode: '+290',
+        format: '+290 ## ####',
+        flag: 'https://flagcdn.com/w40/sh.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Eritrea',
+        native: 'ኤርትራ',
+        iso2: 'er',
+        dialCode: '+291',
+        format: '+291 ## ### ###',
+        flag: 'https://flagcdn.com/w40/er.png',
+        phoneLength: 8
+    },
+    {
+        name: 'South Sudan',
+        native: 'South Sudan',
+        iso2: 'ss',
+        dialCode: '+211',
+        format: '+211 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ss.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Sao Tome and Principe',
+        native: 'São Tomé e Príncipe',
+        iso2: 'st',
+        dialCode: '+239',
+        format: '+239 ## #####',
+        flag: 'https://flagcdn.com/w40/st.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Federated States of Micronesia',
+        native: 'Micronesia',
+        iso2: 'fm',
+        dialCode: '+691',
+        format: '+691 ### ####',
+        flag: 'https://flagcdn.com/w40/fm.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Falkland Islands Malvinas',
+        native: 'Falkland Islands (Malvinas)',
+        iso2: 'fk',
+        dialCode: '+500',
+        format: '+500 ####',
+        flag: 'https://flagcdn.com/w40/fk.png',
+        phoneLength: 4
+    },
+    {
+        name: 'French Southern Territories',
+        native: 'Terres australes françaises',
+        iso2: 'tf',
+        dialCode: '+262',
+        format: '+262 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/tf.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Heard Island and McDonald Islands',
+        native: 'Heard Island and McDonald Islands',
+        iso2: 'hm',
+        dialCode: '+672',
+        format: '+672 ### ####',
+        flag: 'https://flagcdn.com/w40/hm.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Jersey',
+        native: 'Jersey',
+        iso2: 'je',
+        dialCode: '+44',
+        format: '+44 #### ### ###',
+        flag: 'https://flagcdn.com/w40/je.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Guernsey',
+        native: 'Guernsey',
+        iso2: 'gg',
+        dialCode: '+44',
+        format: '+44 #### ### ###',
+        flag: 'https://flagcdn.com/w40/gg.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Gibraltar',
+        native: 'Gibraltar',
+        iso2: 'gi',
+        dialCode: '+350',
+        format: '+350 #### ####',
+        flag: 'https://flagcdn.com/w40/gi.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Holy See Vatican City State',
+        native: 'Città del Vaticano',
+        iso2: 'va',
+        dialCode: '+379',
+        format: '+379 ### #####',
+        flag: 'https://flagcdn.com/w40/va.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Hong Kong SAR China',
+        native: '香港',
+        iso2: 'hk',
+        dialCode: '+852',
+        format: '+852 #### ####',
+        flag: 'https://flagcdn.com/w40/hk.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Macao SAR China',
+        native: '澳門',
+        iso2: 'mo',
+        dialCode: '+853',
+        format: '+853 #### ####',
+        flag: 'https://flagcdn.com/w40/mo.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Taiwan',
+        native: '台灣',
+        iso2: 'tw',
+        dialCode: '+886',
+        format: '+886 ## ### ####',
+        flag: 'https://flagcdn.com/w40/tw.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Czechia',
+        native: 'Česko',
+        iso2: 'cz',
+        dialCode: '+420',
+        format: '+420 ### ### ###',
+        flag: 'https://flagcdn.com/w40/cz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Iran',
+        native: 'ایران',
+        iso2: 'ir',
+        dialCode: '+98',
+        format: '+98 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ir.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Isle of Man',
+        native: 'Isle of Man',
+        iso2: 'im',
+        dialCode: '+44',
+        format: '+44 #### ######',
+        flag: 'https://flagcdn.com/w40/im.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Korea North',
+        native: '조선민주주의인민공화국',
+        iso2: 'kp',
+        dialCode: '+850',
+        format: '+850 ### ####',
+        flag: 'https://flagcdn.com/w40/kp.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Libya',
+        native: 'ليبيا',
+        iso2: 'ly',
+        dialCode: '+218',
+        format: '+218 ##-###-###',
+        flag: 'https://flagcdn.com/w40/ly.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Montenegro',
+        native: 'Црна Гора',
+        iso2: 'me',
+        dialCode: '+382',
+        format: '+382 ## ### ###',
+        flag: 'https://flagcdn.com/w40/me.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Netherlands',
+        native: 'Nederland',
+        iso2: 'nl',
+        dialCode: '+31',
+        format: '+31 ## ### ####',
+        flag: 'https://flagcdn.com/w40/nl.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Netherlands Antilles',
+        native: 'Nederlandse Antillen',
+        iso2: 'an',
+        dialCode: '+599',
+        format: '+599 ### ####',
+        flag: 'https://flagcdn.com/w40/an.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Norfolk Island',
+        native: 'Norfolk Island',
+        iso2: 'nf',
+        dialCode: '+672',
+        format: '+672 3 ## ###',
+        flag: 'https://flagcdn.com/w40/nf.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Pitcairn',
+        native: 'Pitcairn Islands',
+        iso2: 'pn',
+        dialCode: '+64',
+        format: '+64 ### ### ###',
+        flag: 'https://flagcdn.com/w40/pn.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Poland',
+        native: 'Polska',
+        iso2: 'pl',
+        dialCode: '+48',
+        format: '+48 ## ### ####',
+        flag: 'https://flagcdn.com/w40/pl.png',
+        phoneLength: 9
+    },
+    {
+        name: 'REPUBLIC OF CHINA',
+        native: '中華民國',
+        iso2: 'tw',
+        dialCode: '+886',
+        format: '+886 # #### ####',
+        flag: 'https://flagcdn.com/w40/tw.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Republic of Macedonia',
+        native: 'Македонија',
+        iso2: 'mk',
+        dialCode: '+389',
+        format: '+389 ## ### ###',
+        flag: 'https://flagcdn.com/w40/mk.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Saint Barthelemy',
+        native: 'Saint-Barthélemy',
+        iso2: 'bl',
+        dialCode: '+590',
+        format: '+590 ### ## ## ##',
+        flag: 'https://flagcdn.com/w40/bl.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Saint Martin French part',
+        native: 'Saint-Martin',
+        iso2: 'mf',
+        dialCode: '+590',
+        format: '+590 ### ## ## ##',
+        flag: 'https://flagcdn.com/w40/mf.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Saint Vincent and Grenadines',
+        native: 'Saint Vincent and the Grenadines',
+        iso2: 'vc',
+        dialCode: '+1-784',
+        format: '+1 784 ### ####',
+        flag: 'https://flagcdn.com/w40/vc.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Senegal',
+        native: 'Sénégal',
+        iso2: 'sn',
+        dialCode: '+221',
+        format: '+221 ## ### ####',
+        flag: 'https://flagcdn.com/w40/sn.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Somalia',
+        native: 'Soomaaliya',
+        iso2: 'so',
+        dialCode: '+252',
+        format: '+252 ## ### ###',
+        flag: 'https://flagcdn.com/w40/so.png',
+        phoneLength: 8
+    },
+    {
+        name: 'South Georgia and the South Sandwich Islands',
+        native: 'South Georgia and the South Sandwich Islands',
+        iso2: 'gs',
+        dialCode: '+500',
+        format: '+500 ####',
+        flag: 'https://flagcdn.com/w40/gs.png',
+        phoneLength: 4
+    },
+    {
+        name: 'ST. KITTS & NEVIS',
+        native: 'Saint Kitts and Nevis',
+        iso2: 'kn',
+        dialCode: '+1-869',
+        format: '+1 869 ### ####',
+        flag: 'https://flagcdn.com/w40/kn.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Swaziland',
+        native: 'Eswatini',
+        iso2: 'sz',
+        dialCode: '+268',
+        format: '+268 ## ## ####',
+        flag: 'https://flagcdn.com/w40/sz.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Timor Leste',
+        native: 'Timor-Leste',
+        iso2: 'tl',
+        dialCode: '+670',
+        format: '+670 ### ####',
+        flag: 'https://flagcdn.com/w40/tl.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Tunisia',
+        native: 'تونس',
+        iso2: 'tn',
+        dialCode: '+216',
+        format: '+216 ## ### ###',
+        flag: 'https://flagcdn.com/w40/tn.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Uruguay',
+        native: 'Uruguay',
+        iso2: 'uy',
+        dialCode: '+598',
+        format: '+598 # ### ####',
+        flag: 'https://flagcdn.com/w40/uy.png',
+        phoneLength: 8
+    },
+    {
+        name: 'US Minor Outlying Islands',
+        native: 'United States Minor Outlying Islands',
+        iso2: 'um',
+        dialCode: '+1',
+        format: '+1 (###) ###-####',
+        flag: 'https://flagcdn.com/w40/um.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Wallis and Futuna Islands',
+        native: 'Wallis et Futuna',
+        iso2: 'wf',
+        dialCode: '+681',
+        format: '+681 ## ####',
+        flag: 'https://flagcdn.com/w40/wf.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Western Sahara',
+        native: 'الصحراء الغربية',
+        iso2: 'eh',
+        dialCode: '+212',
+        format: '+212 ## ######',
+        flag: 'https://flagcdn.com/w40/eh.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Yugoslavia',
+        native: 'Југославија',
+        iso2: 'yu',
+        dialCode: '+381',
+        format: '+381 ## ### ####',
+        flag: 'https://flagcdn.com/w40/yu.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Zaire',
+        native: 'Zaïre',
+        iso2: 'zr',
+        dialCode: '+243',
+        format: '+243 ## ### ####',
+        flag: 'https://flagcdn.com/w40/cd.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Zanzibar',
+        native: 'Zanzibar',
+        iso2: 'tz',
+        dialCode: '+255',
+        format: '+255 ## ### ####',
+        flag: 'https://flagcdn.com/w40/tz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Åland Islands',
+        native: 'Åland',
+        iso2: 'ax',
+        dialCode: '+358',
+        format: '+358 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ax.png',
+        phoneLength: 9
+    }
+];
+
+class PhoneInputComponent {
+    constructor(eRef) {
+        this.eRef = eRef;
+        this.countriesList = [...countries].sort((a, b) => a.name.localeCompare(b.name));
+        this.searchTerm = '';
+        this.defaultCountry = '';
+        this.placeholder = '';
+        this.searchEnabled = true;
+        this.numberFormat = 'international';
+        this.setFirstCountry = '';
+        this.phoneChange = new EventEmitter();
+        this.phoneNumber = '';
+        this.isInvalid = false;
+        this.dropdownOpen = false;
+        this.animating = false;
+        this.selectedCountry = countries[0];
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        if (this.defaultCountry) {
+            const match = countries.find(c => c.iso2 === this.defaultCountry.toLowerCase());
+            if (match)
+                this.selectedCountry = match;
+        }
+    }
+    handleClickOutside(event) {
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.dropdownOpen = false;
+        }
+    }
+    onAnimationDone(event) {
+        if (!this.dropdownOpen) {
+            this.animating = false;
+        }
+    }
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+        this.animating = true;
+    }
+    onClickOutside(event) {
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.dropdownOpen = false;
+        }
+    }
+    onSearchChange() {
+        const term = this.searchTerm.toLowerCase();
+        this.countriesList = countries
+            .filter(c => c.name.toLowerCase().includes(term) ||
+            (c.native?.toLowerCase().includes(term)))
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }
+    selectCountry(country) {
+        this.selectedCountry = country;
+        this.searchTerm = '';
+        this.countriesList = countries;
+        this.dropdownOpen = false;
+        this.emitPhoneChange();
+    }
+    onPhoneInput() {
+        this.emitPhoneChange();
+    }
+    emitPhoneChange() {
+        const raw = this.phoneNumber || '';
+        const digitsOnly = raw.replace(/\D/g, '');
+        const hyphenCount = (raw.match(/-/g) || []).length;
+        const spaceCount = (raw.match(/ /g) || []).length;
+        const totalChars = this.phoneNumber.length;
+        const maxAllowedLength = this.selectedCountry?.phoneLength + hyphenCount + spaceCount;
+        if (digitsOnly.length !== this.selectedCountry?.phoneLength) {
+            this.isInvalid = true;
+        }
+        else if (totalChars > maxAllowedLength) {
+            this.isInvalid = true;
+        }
+        else {
+            this.isInvalid = false;
+        }
+        const fullPhone = this.selectedCountry.dialCode + raw;
+        const structuredValue = {
+            e164Number: fullPhone,
+            nationalNumber: raw,
+            dialCode: this.selectedCountry.dialCode,
+            countryCode: this.selectedCountry.iso2,
+            isValid: !this.isInvalid,
+        };
+        this.onChange(structuredValue);
+        this.phoneChange.emit(structuredValue);
+    }
+    writeValue(value) {
+        if (value && value.dialCode && value.countryCode) {
+            const match = countries.find(c => c.dialCode === value.dialCode && c.iso2 === value.countryCode);
+            if (match) {
+                this.selectedCountry = match;
+            }
+            else {
+                this.selectedCountry = countries[0];
+            }
+            this.phoneNumber = value.nationalNumber || '';
+        }
+        else {
+            this.selectedCountry = countries[0];
+            this.phoneNumber = '';
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    allowPhoneCharacters(event) {
+        const allowedChars = [' ', '-'];
+        const charCode = event.charCode;
+        // Allow digits 0–9
+        if (charCode >= 48 && charCode <= 57)
+            return;
+        // Allow hyphen and space
+        if (allowedChars.includes(event.key))
+            return;
+        event.preventDefault();
+    }
+}
+PhoneInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PhoneInputComponent, selector: "phone-input", inputs: { defaultCountry: "defaultCountry", placeholder: "placeholder", searchEnabled: "searchEnabled", numberFormat: "numberFormat", setFirstCountry: "setFirstCountry" }, outputs: { phoneChange: "phoneChange" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => PhoneInputComponent),
+            multi: true
+        }], ngImport: i0, template: `<div class="phone-input-wrapper">
+  <div class="input-container">
+    <!-- Country Selector (20%) -->
+    <div class="country-select" (click)="toggleDropdown()" (blur)="toggleDropdown()">
+      <img [src]="selectedCountry.flag" width="20" />
+      <span>{{selectedCountry.dialCode}}</span>
+      <span class="arrow-down">▾</span>
+    </div>
+
+    <!-- Phone Input (80%) -->
+    <input
+      type="tel"
+      pattern="[0-9\\s\\-]*"
+      inputmode="numeric"
+      class="phone-input"
+      [placeholder]="placeholder"
+      [(ngModel)]="phoneNumber"
+      [ngClass]="{ 'error-border': isInvalid }"
+      (input)="onPhoneInput()"
+      (keypress)="allowPhoneCharacters($event)"
+    />
+  </div>
+
+  <!-- Dropdown Content (full width below) -->
+  <div
+  class="dropdown-content"
+  [@dropdownAnimation]="dropdownOpen ? 'open' : 'closed'"
+  *ngIf="dropdownOpen || animating"
+  (@dropdownAnimation.done)="onAnimationDone($event)" >
+    <input
+      *ngIf="searchEnabled"
+      type="text"
+      class="search-box"
+      placeholder="Search Country"
+      [(ngModel)]="searchTerm"
+      (input)="onSearchChange()"
+    />
+    <div class="country-list">
+      <div
+        class="country-option"
+        *ngFor="let country of countriesList"
+        (click)="selectCountry(country)"
+      >
+        <img [src]="country.flag" width="20" />
+        <span class="country-name">{{ country.name }} ({{ country.native }})</span>
+        <span class="dial-code">{{ country.dialCode }}</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+  `, isInline: true, styles: [".phone-input-wrapper{position:relative;font-family:Arial,sans-serif}.input-container{display:flex;width:100%;padding-bottom:3px}.country-select{width:24%;display:flex;align-items:center;justify-content:space-between;border:1px solid #ccc;border-right:none;border-radius:4px 0 0 4px;padding:8px;cursor:pointer;background-color:#f8f8f8}.country-select img{margin-right:5px}.arrow-down{font-size:13px;color:#666}.arrow-down:after{display:none}.phone-input{width:80%;padding:8px 12px;border:1px solid #ccc;border-radius:0 4px 4px 0;outline:none}.dropdown-content{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #ccc;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:-1px}.search-box{width:100%;padding:8px 12px;border:none;border-bottom:1px solid #eee;outline:none}.country-list{max-height:200px;overflow-y:auto}.country-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-option:hover{background-color:#f5f5f5}.country-option img{margin-right:5px}.country-name{flex-grow:1}.dial-code{color:#666;font-size:.9em}input.error-border{border-color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
+        trigger('dropdownAnimation', [
+            state('open', style({
+                opacity: 1,
+                transform: 'scaleY(1)',
+                height: '*',
+                padding: '*'
+            })),
+            state('closed', style({
+                opacity: 0,
+                transform: 'scaleY(0)',
+                height: '0px',
+                padding: '0px'
+            })),
+            transition('closed => open', [
+                animate('200ms ease-out')
+            ]),
+            transition('open => closed', [
+                animate('150ms ease-in')
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'phone-input', animations: [
+                        trigger('dropdownAnimation', [
+                            state('open', style({
+                                opacity: 1,
+                                transform: 'scaleY(1)',
+                                height: '*',
+                                padding: '*'
+                            })),
+                            state('closed', style({
                                 opacity: 0,
                                 transform: 'scaleY(0)',
                                 height: '0px',
@@ -1667,4 +2819,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 export { PhoneInputComponent, PhoneInputModule };
 //# sourceMappingURL=ngx-dial-input.mjs.map
-//# sourceMappingURL=ngx-dial-input.mjs.map