ngx-dial-input 2.0.2 → 2.0.4

package/fesm2020/ngx-dial-input.mjs

@@ -0,0 +1,1670 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Component, Input, Output, HostListener, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+const countries = [
+    {
+        name: 'Panama',
+        native: 'Panamá',
+        iso2: 'pa',
+        dialCode: '+507',
+        format: '+507 ##-###-####',
+        flag: 'https://flagcdn.com/w40/pa.png',
+        phoneLength: 8 // Mobile: 8 digits (e.g., +507 6123 4567)
+    },
+    {
+        name: 'Pakistan',
+        native: 'پاکستان',
+        iso2: 'pk',
+        dialCode: '+92',
+        format: '+92 ### #######',
+        flag: 'https://flagcdn.com/w40/pk.png',
+        phoneLength: 10
+    },
+    {
+        name: 'South Korea',
+        native: '대한민국',
+        iso2: 'kr',
+        dialCode: '+82',
+        format: '+82 ## #### ####',
+        flag: 'https://flagcdn.com/w40/kr.png',
+        phoneLength: 10
+    },
+    {
+        name: 'United States',
+        native: 'United States',
+        iso2: 'us',
+        dialCode: '+1',
+        format: '+1 (###) ###-####',
+        flag: 'https://flagcdn.com/w40/us.png',
+        phoneLength: 10
+    },
+    {
+        name: 'United Kingdom',
+        native: 'United Kingdom',
+        iso2: 'gb',
+        dialCode: '+44',
+        format: '+44 #### ### ###',
+        flag: 'https://flagcdn.com/w40/gb.png',
+        phoneLength: 10
+    },
+    {
+        name: 'India',
+        native: 'भारत',
+        iso2: 'in',
+        dialCode: '+91',
+        format: '+91 #### ######',
+        flag: 'https://flagcdn.com/w40/in.png',
+        phoneLength: 10
+    },
+    {
+        name: 'China',
+        native: '中国',
+        iso2: 'cn',
+        dialCode: '+86',
+        format: '+86 #### #### ####',
+        flag: 'https://flagcdn.com/w40/cn.png',
+        phoneLength: 11
+    },
+    {
+        name: 'Japan',
+        native: '日本',
+        iso2: 'jp',
+        dialCode: '+81',
+        format: '+81 ##-####-####',
+        flag: 'https://flagcdn.com/w40/jp.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Germany',
+        native: 'Deutschland',
+        iso2: 'de',
+        dialCode: '+49',
+        format: '+49 ## #### ####',
+        flag: 'https://flagcdn.com/w40/de.png',
+        phoneLength: 10
+    },
+    {
+        name: 'France',
+        native: 'France',
+        iso2: 'fr',
+        dialCode: '+33',
+        format: '+33 # ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/fr.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Brazil',
+        native: 'Brasil',
+        iso2: 'br',
+        dialCode: '+55',
+        format: '+55 ## ####-####',
+        flag: 'https://flagcdn.com/w40/br.png',
+        phoneLength: 11
+    },
+    {
+        name: 'Italy',
+        native: 'Italia',
+        iso2: 'it',
+        dialCode: '+39',
+        format: '+39 ## #### ####',
+        flag: 'https://flagcdn.com/w40/it.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Spain',
+        native: 'España',
+        iso2: 'es',
+        dialCode: '+34',
+        format: '+34 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/es.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Mexico',
+        native: 'México',
+        iso2: 'mx',
+        dialCode: '+52',
+        format: '+52 ## #### ####',
+        flag: 'https://flagcdn.com/w40/mx.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Russia',
+        native: 'Россия',
+        iso2: 'ru',
+        dialCode: '+7',
+        format: '+7 (###) ###-##-##',
+        flag: 'https://flagcdn.com/w40/ru.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Turkey',
+        native: 'Türkiye',
+        iso2: 'tr',
+        dialCode: '+90',
+        format: '+90 (###) ###-##-##',
+        flag: 'https://flagcdn.com/w40/tr.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Indonesia',
+        native: 'Indonesia',
+        iso2: 'id',
+        dialCode: '+62',
+        format: '+62 ## #### ####',
+        flag: 'https://flagcdn.com/w40/id.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Nigeria',
+        native: 'Nigeria',
+        iso2: 'ng',
+        dialCode: '+234',
+        format: '+234 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ng.png',
+        phoneLength: 10
+    },
+    {
+        name: 'South Africa',
+        native: 'South Africa',
+        iso2: 'za',
+        dialCode: '+27',
+        format: '+27 ## ### ####',
+        flag: 'https://flagcdn.com/w40/za.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Argentina',
+        native: 'Argentina',
+        iso2: 'ar',
+        dialCode: '+54',
+        format: '+54 ## ####-####',
+        flag: 'https://flagcdn.com/w40/ar.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Philippines',
+        native: 'Pilipinas',
+        iso2: 'ph',
+        dialCode: '+63',
+        format: '+63 ## #### ####',
+        flag: 'https://flagcdn.com/w40/ph.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Vietnam',
+        native: 'Việt Nam',
+        iso2: 'vn',
+        dialCode: '+84',
+        format: '+84 ## #### ####',
+        flag: 'https://flagcdn.com/w40/vn.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Thailand',
+        native: 'ประเทศไทย',
+        iso2: 'th',
+        dialCode: '+66',
+        format: '+66 ## #### ####',
+        flag: 'https://flagcdn.com/w40/th.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Egypt',
+        native: 'مصر',
+        iso2: 'eg',
+        dialCode: '+20',
+        format: '+20 ## #### ####',
+        flag: 'https://flagcdn.com/w40/eg.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Colombia',
+        native: 'Colombia',
+        iso2: 'co',
+        dialCode: '+57',
+        format: '+57 ## #### ####',
+        flag: 'https://flagcdn.com/w40/co.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Kenya',
+        native: 'Kenya',
+        iso2: 'ke',
+        dialCode: '+254',
+        format: '+254 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ke.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Malaysia',
+        native: 'Malaysia',
+        iso2: 'my',
+        dialCode: '+60',
+        format: '+60 ## #### ####',
+        flag: 'https://flagcdn.com/w40/my.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Saudi Arabia',
+        native: 'المملكة العربية السعودية',
+        iso2: 'sa',
+        dialCode: '+966',
+        format: '+966 ## #### ####',
+        flag: 'https://flagcdn.com/w40/sa.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Peru',
+        native: 'Perú',
+        iso2: 'pe',
+        dialCode: '+51',
+        format: '+51 ## #### ####',
+        flag: 'https://flagcdn.com/w40/pe.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Chile',
+        native: 'Chile',
+        iso2: 'cl',
+        dialCode: '+56',
+        format: '+56 ## #### ####',
+        flag: 'https://flagcdn.com/w40/cl.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Ukraine',
+        native: 'Україна',
+        iso2: 'ua',
+        dialCode: '+380',
+        format: '+380 ## ### ## ##',
+        flag: 'https://flagcdn.com/w40/ua.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Iraq',
+        native: 'العراق',
+        iso2: 'iq',
+        dialCode: '+964',
+        format: '+964 ## #### ####',
+        flag: 'https://flagcdn.com/w40/iq.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Morocco',
+        native: 'المغرب',
+        iso2: 'ma',
+        dialCode: '+212',
+        format: '+212 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ma.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Algeria',
+        native: 'الجزائر',
+        iso2: 'dz',
+        dialCode: '+213',
+        format: '+213 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/dz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Kazakhstan',
+        native: 'Қазақстан',
+        iso2: 'kz',
+        dialCode: '+7',
+        format: '+7 (###) ###-##-##',
+        flag: 'https://flagcdn.com/w40/kz.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Ethiopia',
+        native: 'ኢትዮጵያ',
+        iso2: 'et',
+        dialCode: '+251',
+        format: '+251 ## #### ####',
+        flag: 'https://flagcdn.com/w40/et.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Sudan',
+        native: 'السودان',
+        iso2: 'sd',
+        dialCode: '+249',
+        format: '+249 ## ### ####',
+        flag: 'https://flagcdn.com/w40/sd.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Angola',
+        native: 'Angola',
+        iso2: 'ao',
+        dialCode: '+244',
+        format: '+244 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ao.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Ghana',
+        native: 'Ghana',
+        iso2: 'gh',
+        dialCode: '+233',
+        format: '+233 ## ### ####',
+        flag: 'https://flagcdn.com/w40/gh.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Uganda',
+        native: 'Uganda',
+        iso2: 'ug',
+        dialCode: '+256',
+        format: '+256 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ug.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Nepal',
+        native: 'नेपाल',
+        iso2: 'np',
+        dialCode: '+977',
+        format: '+977 ## #### ####',
+        flag: 'https://flagcdn.com/w40/np.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Venezuela',
+        native: 'Venezuela',
+        iso2: 've',
+        dialCode: '+58',
+        format: '+58 ##-###-####',
+        flag: 'https://flagcdn.com/w40/ve.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Sri Lanka',
+        native: 'ශ්‍රී ලංකාව',
+        iso2: 'lk',
+        dialCode: '+94',
+        format: '+94 ## #### ####',
+        flag: 'https://flagcdn.com/w40/lk.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Tanzania',
+        native: 'Tanzania',
+        iso2: 'tz',
+        dialCode: '+255',
+        format: '+255 ## ### ####',
+        flag: 'https://flagcdn.com/w40/tz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Zimbabwe',
+        native: 'Zimbabwe',
+        iso2: 'zw',
+        dialCode: '+263',
+        format: '+263 ## ### ####',
+        flag: 'https://flagcdn.com/w40/zw.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Czech Republic',
+        native: 'Česká republika',
+        iso2: 'cz',
+        dialCode: '+420',
+        format: '+420 ## ### ###',
+        flag: 'https://flagcdn.com/w40/cz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Finland',
+        native: 'Suomi',
+        iso2: 'fi',
+        dialCode: '+358',
+        format: '+358 ## #### ####',
+        flag: 'https://flagcdn.com/w40/fi.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Sweden',
+        native: 'Sverige',
+        iso2: 'se',
+        dialCode: '+46',
+        format: '+46 ## ### ## ##',
+        flag: 'https://flagcdn.com/w40/se.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Norway',
+        native: 'Norge',
+        iso2: 'no',
+        dialCode: '+47',
+        format: '+47 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/no.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Denmark',
+        native: 'Danmark',
+        iso2: 'dk',
+        dialCode: '+45',
+        format: '+45 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/dk.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Austria',
+        native: 'Österreich',
+        iso2: 'at',
+        dialCode: '+43',
+        format: '+43 ## #### ####',
+        flag: 'https://flagcdn.com/w40/at.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Belgium',
+        native: 'België',
+        iso2: 'be',
+        dialCode: '+32',
+        format: '+32 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/be.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Switzerland',
+        native: 'Schweiz',
+        iso2: 'ch',
+        dialCode: '+41',
+        format: '+41 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ch.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Portugal',
+        native: 'Portugal',
+        iso2: 'pt',
+        dialCode: '+351',
+        format: '+351 ## ### ####',
+        flag: 'https://flagcdn.com/w40/pt.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Ireland',
+        native: 'Éire',
+        iso2: 'ie',
+        dialCode: '+353',
+        format: '+353 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ie.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Hungary',
+        native: 'Magyarország',
+        iso2: 'hu',
+        dialCode: '+36',
+        format: '+36 ## ### ####',
+        flag: 'https://flagcdn.com/w40/hu.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Romania',
+        native: 'România',
+        iso2: 'ro',
+        dialCode: '+40',
+        format: '+40 ## #### ####',
+        flag: 'https://flagcdn.com/w40/ro.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Slovakia',
+        native: 'Slovensko',
+        iso2: 'sk',
+        dialCode: '+421',
+        format: '+421 ## ### ###',
+        flag: 'https://flagcdn.com/w40/sk.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Bulgaria',
+        native: 'България',
+        iso2: 'bg',
+        dialCode: '+359',
+        format: '+359 ## ### ####',
+        flag: 'https://flagcdn.com/w40/bg.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Croatia',
+        native: 'Hrvatska',
+        iso2: 'hr',
+        dialCode: '+385',
+        format: '+385 ## ### ####',
+        flag: 'https://flagcdn.com/w40/hr.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Serbia',
+        native: 'Србија',
+        iso2: 'rs',
+        dialCode: '+381',
+        format: '+381 ## ### ####',
+        flag: 'https://flagcdn.com/w40/rs.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Slovenia',
+        native: 'Slovenija',
+        iso2: 'si',
+        dialCode: '+386',
+        format: '+386 ## ### ####',
+        flag: 'https://flagcdn.com/w40/si.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Lithuania',
+        native: 'Lietuva',
+        iso2: 'lt',
+        dialCode: '+370',
+        format: '+370 ## ### ####',
+        flag: 'https://flagcdn.com/w40/lt.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Latvia',
+        native: 'Latvija',
+        iso2: 'lv',
+        dialCode: '+371',
+        format: '+371 ## ### ####',
+        flag: 'https://flagcdn.com/w40/lv.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Estonia',
+        native: 'Eesti',
+        iso2: 'ee',
+        dialCode: '+372',
+        format: '+372 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ee.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Moldova',
+        native: 'Moldova',
+        iso2: 'md',
+        dialCode: '+373',
+        format: '+373 ## ### ###',
+        flag: 'https://flagcdn.com/w40/md.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Belarus',
+        native: 'Беларусь',
+        iso2: 'by',
+        dialCode: '+375',
+        format: '+375 ## ### ####',
+        flag: 'https://flagcdn.com/w40/by.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Bosnia and Herzegovina',
+        native: 'Bosna i Hercegovina',
+        iso2: 'ba',
+        dialCode: '+387',
+        format: '+387 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ba.png',
+        phoneLength: 8
+    },
+    {
+        name: 'North Macedonia',
+        native: 'Северна Македонија',
+        iso2: 'mk',
+        dialCode: '+389',
+        format: '+389 ## ### ####',
+        flag: 'https://flagcdn.com/w40/mk.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Georgia',
+        native: 'საქართველო',
+        iso2: 'ge',
+        dialCode: '+995',
+        format: '+995 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ge.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Armenia',
+        native: 'Հայաստան',
+        iso2: 'am',
+        dialCode: '+374',
+        format: '+374 ## ### ####',
+        flag: 'https://flagcdn.com/w40/am.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Azerbaijan',
+        native: 'Azərbaycan',
+        iso2: 'az',
+        dialCode: '+994',
+        format: '+994 ## ### ## ##',
+        flag: 'https://flagcdn.com/w40/az.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Kyrgyzstan',
+        native: 'Кыргызстан',
+        iso2: 'kg',
+        dialCode: '+996',
+        format: '+996 ## ### ####',
+        flag: 'https://flagcdn.com/w40/kg.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Uzbekistan',
+        native: 'O‘zbekiston',
+        iso2: 'uz',
+        dialCode: '+998',
+        format: '+998 ## ### ## ##',
+        flag: 'https://flagcdn.com/w40/uz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Turkmenistan',
+        native: 'Türkmenistan',
+        iso2: 'tm',
+        dialCode: '+993',
+        format: '+993 ## ### ## ##',
+        flag: 'https://flagcdn.com/w40/tm.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Tajikistan',
+        native: 'Тоҷикистон',
+        iso2: 'tj',
+        dialCode: '+992',
+        format: '+992 ## ### ####',
+        flag: 'https://flagcdn.com/w40/tj.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Mongolia',
+        native: 'Монгол улс',
+        iso2: 'mn',
+        dialCode: '+976',
+        format: '+976 ## #### ####',
+        flag: 'https://flagcdn.com/w40/mn.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Myanmar',
+        native: 'မြန်မာ',
+        iso2: 'mm',
+        dialCode: '+95',
+        format: '+95 ## #### ####',
+        flag: 'https://flagcdn.com/w40/mm.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Cambodia',
+        native: 'កម្ពុជា',
+        iso2: 'kh',
+        dialCode: '+855',
+        format: '+855 ## ### ###',
+        flag: 'https://flagcdn.com/w40/kh.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Bangladesh',
+        native: 'বাংলাদেশ',
+        iso2: 'bd',
+        dialCode: '+880',
+        format: '+880 ## #### ####',
+        flag: 'https://flagcdn.com/w40/bd.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Laos',
+        native: 'ສປປ ລາວ',
+        iso2: 'la',
+        dialCode: '+856',
+        format: '+856 ## ### ####',
+        flag: 'https://flagcdn.com/w40/la.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Brunei',
+        native: 'Brunei',
+        iso2: 'bn',
+        dialCode: '+673',
+        format: '+673 ## ### ####',
+        flag: 'https://flagcdn.com/w40/bn.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Singapore',
+        native: '新加坡',
+        iso2: 'sg',
+        dialCode: '+65',
+        format: '+65 #### ####',
+        flag: 'https://flagcdn.com/w40/sg.png',
+        phoneLength: 8
+    },
+    {
+        name: 'New Zealand',
+        native: 'Aotearoa',
+        iso2: 'nz',
+        dialCode: '+64',
+        format: '+64 ## ### ####',
+        flag: 'https://flagcdn.com/w40/nz.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Australia',
+        native: 'Australia',
+        iso2: 'au',
+        dialCode: '+61',
+        format: '+61 ## ### ####',
+        flag: 'https://flagcdn.com/w40/au.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Fiji',
+        native: 'Fiji',
+        iso2: 'fj',
+        dialCode: '+679',
+        format: '+679 ## ### ####',
+        flag: 'https://flagcdn.com/w40/fj.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Papua New Guinea',
+        native: 'Papua New Guinea',
+        iso2: 'pg',
+        dialCode: '+675',
+        format: '+675 ## ### ####',
+        flag: 'https://flagcdn.com/w40/pg.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Solomon Islands',
+        native: 'Solomon Islands',
+        iso2: 'sb',
+        dialCode: '+677',
+        format: '+677 ## ### ####',
+        flag: 'https://flagcdn.com/w40/sb.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Samoa',
+        native: 'Sāmoa',
+        iso2: 'ws',
+        dialCode: '+685',
+        format: '+685 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ws.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Tonga',
+        native: 'Tonga',
+        iso2: 'to',
+        dialCode: '+676',
+        format: '+676 ## ### ####',
+        flag: 'https://flagcdn.com/w40/to.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Vanuatu',
+        native: 'Vanuatu',
+        iso2: 'vu',
+        dialCode: '+678',
+        format: '+678 ## ### ####',
+        flag: 'https://flagcdn.com/w40/vu.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Kiribati',
+        native: 'Kiribati',
+        iso2: 'ki',
+        dialCode: '+686',
+        format: '+686 ## ### ####',
+        flag: 'https://flagcdn.com/w40/ki.png',
+        phoneLength: 5
+    },
+    {
+        name: 'Marshall Islands',
+        native: 'M̧ajeļ',
+        iso2: 'mh',
+        dialCode: '+692',
+        format: '+692 ## ### ####',
+        flag: 'https://flagcdn.com/w40/mh.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Micronesia',
+        native: 'Micronesia',
+        iso2: 'fm',
+        dialCode: '+691',
+        format: '+691 ## ### ####',
+        flag: 'https://flagcdn.com/w40/fm.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Tuvalu',
+        native: 'Tuvalu',
+        iso2: 'tv',
+        dialCode: '+688',
+        format: '+688 ## ### ####',
+        flag: 'https://flagcdn.com/w40/tv.png',
+        phoneLength: 5
+    },
+    {
+        name: 'Nauru',
+        native: 'Nauru',
+        iso2: 'nr',
+        dialCode: '+674',
+        format: '+674 ## ### ####',
+        flag: 'https://flagcdn.com/w40/nr.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Palau',
+        native: 'Beluu er a Belau',
+        iso2: 'pw',
+        dialCode: '+680',
+        format: '+680 ## ### ####',
+        flag: 'https://flagcdn.com/w40/pw.png',
+        phoneLength: 7
+    },
+    {
+        name: 'American Samoa',
+        native: 'American Samoa',
+        iso2: 'as',
+        dialCode: '+1 684',
+        format: '+1 684 ### ####',
+        flag: 'https://flagcdn.com/w40/as.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Guam',
+        native: 'Guam',
+        iso2: 'gu',
+        dialCode: '+1 671',
+        format: '+1 671 ### ####',
+        flag: 'https://flagcdn.com/w40/gu.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Northern Mariana Islands',
+        native: 'Northern Mariana Islands',
+        iso2: 'mp',
+        dialCode: '+1 670',
+        format: '+1 670 ### ####',
+        flag: 'https://flagcdn.com/w40/mp.png',
+        phoneLength: 7
+    },
+    {
+        name: 'Puerto Rico',
+        native: 'Puerto Rico',
+        iso2: 'pr',
+        dialCode: '+1 787',
+        format: '+1 787 ### ####',
+        flag: 'https://flagcdn.com/w40/pr.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Virgin Islands (US)',
+        native: 'Virgin Islands (US)',
+        iso2: 'vi',
+        dialCode: '+1 340',
+        format: '+1 340 ### ####',
+        flag: 'https://flagcdn.com/w40/vi.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Saint Kitts and Nevis',
+        native: 'Saint Kitts and Nevis',
+        iso2: 'kn',
+        dialCode: '+1 869',
+        format: '+1 869 ### ####',
+        flag: 'https://flagcdn.com/w40/kn.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Saint Lucia',
+        native: 'Saint Lucia',
+        iso2: 'lc',
+        dialCode: '+1 758',
+        format: '+1 758 ### ####',
+        flag: 'https://flagcdn.com/w40/lc.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Saint Vincent and the 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: 'Dominica',
+        native: 'Dominica',
+        iso2: 'dm',
+        dialCode: '+1 767',
+        format: '+1 767 ### ####',
+        flag: 'https://flagcdn.com/w40/dm.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Grenada',
+        native: 'Grenada',
+        iso2: 'gd',
+        dialCode: '+1 473',
+        format: '+1 473 ### ####',
+        flag: 'https://flagcdn.com/w40/gd.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Barbados',
+        native: 'Barbados',
+        iso2: 'bb',
+        dialCode: '+1 246',
+        format: '+1 246 ### ####',
+        flag: 'https://flagcdn.com/w40/bb.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Antigua and Barbuda',
+        native: 'Antigua and Barbuda',
+        iso2: 'ag',
+        dialCode: '+1 268',
+        format: '+1 268 ### ####',
+        flag: 'https://flagcdn.com/w40/ag.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Dominican Republic',
+        native: 'República Dominicana',
+        iso2: 'do',
+        dialCode: '+1 809',
+        format: '+1 809 ### ####',
+        flag: 'https://flagcdn.com/w40/do.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Haiti',
+        native: 'Haïti',
+        iso2: 'ht',
+        dialCode: '+509',
+        format: '+509 ##-##-####',
+        flag: 'https://flagcdn.com/w40/ht.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Cuba',
+        native: 'Cuba',
+        iso2: 'cu',
+        dialCode: '+53',
+        format: '+53 ##-###-####',
+        flag: 'https://flagcdn.com/w40/cu.png',
+        phoneLength: 8
+    },
+    {
+        name: 'Jamaica',
+        native: 'Jamaica',
+        iso2: 'jm',
+        dialCode: '+1 876',
+        format: '+1 876 ### ####',
+        flag: 'https://flagcdn.com/w40/jm.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Bahamas',
+        native: 'Bahamas',
+        iso2: 'bs',
+        dialCode: '+1 242',
+        format: '+1 242 ### ####',
+        flag: 'https://flagcdn.com/w40/bs.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Trinidad and Tobago',
+        native: 'Trinidad and Tobago',
+        iso2: 'tt',
+        dialCode: '+1 868',
+        format: '+1 868 ### ####',
+        flag: 'https://flagcdn.com/w40/tt.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Montserrat',
+        native: 'Montserrat',
+        iso2: 'ms',
+        dialCode: '+1 664',
+        format: '+1 664 ### ####',
+        flag: 'https://flagcdn.com/w40/ms.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Anguilla',
+        native: 'Anguilla',
+        iso2: 'ai',
+        dialCode: '+1 264',
+        format: '+1 264 ### ####',
+        flag: 'https://flagcdn.com/w40/ai.png',
+        phoneLength: 10
+    },
+    {
+        name: 'British Virgin Islands',
+        native: 'British Virgin Islands',
+        iso2: 'vg',
+        dialCode: '+1 284',
+        format: '+1 284 ### ####',
+        flag: 'https://flagcdn.com/w40/vg.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Turks and Caicos Islands',
+        native: 'Turks and Caicos Islands',
+        iso2: 'tc',
+        dialCode: '+1 649',
+        format: '+1 649 ### ####',
+        flag: 'https://flagcdn.com/w40/tc.png',
+        phoneLength: 10
+    },
+    {
+        name: 'Greenland',
+        native: 'Kalaallit Nunaat',
+        iso2: 'gl',
+        dialCode: '+299',
+        format: '+299 ## ## ##',
+        flag: 'https://flagcdn.com/w40/gl.png',
+        phoneLength: 6
+    },
+    {
+        name: 'Bermuda',
+        native: 'Bermuda',
+        iso2: 'bm',
+        dialCode: '+1 441',
+        format: '+1 441 ### ####',
+        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',
+        iso2: 'gp',
+        dialCode: '+590',
+        format: '+590 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/gp.png',
+        phoneLength: 9
+    },
+    {
+        name: 'Martinique',
+        native: 'Martinique',
+        iso2: 'mq',
+        dialCode: '+596',
+        format: '+596 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/mq.png',
+        phoneLength: 9 // Mobile: 9 digits (e.g., +596 696 12 34 56)
+    },
+    {
+        name: 'Réunion',
+        native: 'La Réunion',
+        iso2: 're',
+        dialCode: '+262',
+        format: '+262 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/re.png',
+        phoneLength: 9 // Mobile: 9 digits (e.g., +262 692 12 34 56)
+    },
+    {
+        name: 'Mayotte',
+        native: 'Mayotte',
+        iso2: 'yt',
+        dialCode: '+262',
+        format: '+262 ## ## ## ##',
+        flag: 'https://flagcdn.com/w40/yt.png',
+        phoneLength: 9 // Same as Réunion (e.g., +262 639 12 34 56)
+    },
+    {
+        name: 'French Guiana',
+        native: 'Guyane française',
+        iso2: 'gf',
+        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)
+    },
+    {
+        name: 'New Caledonia',
+        native: 'Nouvelle-Calédonie',
+        iso2: 'nc',
+        dialCode: '+687',
+        format: '+687 ## ## ##',
+        flag: 'https://flagcdn.com/w40/nc.png',
+        phoneLength: 6 // Mobile: 6 digits (e.g., +687 75 12 34)
+    },
+    {
+        name: 'French Polynesia',
+        native: 'Polynésie française',
+        iso2: 'pf',
+        dialCode: '+689',
+        format: '+689 ## ## ##',
+        flag: 'https://flagcdn.com/w40/pf.png',
+        phoneLength: 6 // Mobile: 6 digits (e.g., +689 87 12 34)
+    },
+    {
+        name: 'Cook Islands',
+        native: 'Kūki Ākau',
+        iso2: 'ck',
+        dialCode: '+682',
+        format: '+682 ## ###',
+        flag: 'https://flagcdn.com/w40/ck.png',
+        phoneLength: 5 // Mobile: 5 digits (e.g., +682 71 234)
+    },
+    {
+        name: 'Niue',
+        native: 'Niuē',
+        iso2: 'nu',
+        dialCode: '+683',
+        format: '+683 ## ###',
+        flag: 'https://flagcdn.com/w40/nu.png',
+        phoneLength: 4 // Mobile: 4 digits (e.g., +683 1234)
+    },
+    {
+        name: 'Tokelau',
+        native: 'Tokelau',
+        iso2: 'tk',
+        dialCode: '+690',
+        format: '+690 ## ###',
+        flag: 'https://flagcdn.com/w40/tk.png',
+        phoneLength: 4 // Mobile: 4 digits (e.g., +690 1234)
+    },
+    {
+        name: 'Canada',
+        native: 'Canada',
+        iso2: 'ca',
+        dialCode: '+1',
+        format: '+1 ### ### ####',
+        flag: 'https://flagcdn.com/w40/ca.png',
+        phoneLength: 10 // NANP standard (e.g., +1 416 123 4567)
+    },
+    {
+        name: 'Costa Rica',
+        native: 'Costa Rica',
+        iso2: 'cr',
+        dialCode: '+506',
+        format: '+506 ###-####',
+        flag: 'https://flagcdn.com/w40/cr.png',
+        phoneLength: 8 // Mobile: 8 digits (e.g., +506 6123 4567)
+    },
+    {
+        name: 'El Salvador',
+        native: 'El Salvador',
+        iso2: 'sv',
+        dialCode: '+503',
+        format: '+503 ##-###-####',
+        flag: 'https://flagcdn.com/w40/sv.png',
+        phoneLength: 8 // Mobile: 8 digits (e.g., +503 6123 4567)
+    },
+    {
+        name: 'Guatemala',
+        native: 'Guatemala',
+        iso2: 'gt',
+        dialCode: '+502',
+        format: '+502 ##-###-####',
+        flag: 'https://flagcdn.com/w40/gt.png',
+        phoneLength: 8 // Mobile: 8 digits (e.g., +502 6123 4567)
+    },
+    {
+        name: 'Honduras',
+        native: 'Honduras',
+        iso2: 'hn',
+        dialCode: '+504',
+        format: '+504 ##-###-####',
+        flag: 'https://flagcdn.com/w40/hn.png',
+        phoneLength: 8 // Mobile: 8 digits (e.g., +504 6123 4567)
+    },
+    {
+        name: 'Nicaragua',
+        native: 'Nicaragua',
+        iso2: 'ni',
+        dialCode: '+505',
+        format: '+505 ##-###-####',
+        flag: 'https://flagcdn.com/w40/ni.png',
+        phoneLength: 8 // Mobile: 8 digits (e.g., +505 6123 4567)
+    },
+    {
+        name: 'Belize',
+        native: 'Belize',
+        iso2: 'bz',
+        dialCode: '+501',
+        format: '+501 ###-####',
+        flag: 'https://flagcdn.com/w40/bz.png',
+        phoneLength: 7 // Mobile: 7 digits (e.g., +501 6123 456)
+    },
+    {
+        name: 'Curaçao',
+        native: 'Curaçao',
+        iso2: 'cw',
+        dialCode: '+599',
+        format: '+599 9 ### ####',
+        flag: 'https://flagcdn.com/w40/cw.png',
+        phoneLength: 7 // Mobile: 7 digits (e.g., +599 9 123 4567)
+    },
+    {
+        name: 'Sint Maarten (Dutch part)',
+        native: 'Sint Maarten',
+        iso2: 'sx',
+        dialCode: '+1 721',
+        format: '+1 721 ### ####',
+        flag: 'https://flagcdn.com/w40/sx.png',
+        phoneLength: 10 // Mobile: 10 digits (e.g., +1 721 123 4567)
+    },
+    {
+        name: 'Aruba',
+        native: 'Aruba',
+        iso2: 'aw',
+        dialCode: '+297',
+        format: '+297 ### ####',
+        flag: 'https://flagcdn.com/w40/aw.png',
+        phoneLength: 7 // Mobile: 7 digits (e.g., +297 6123 456)
+    },
+    {
+        name: 'Bonaire, Sint Eustatius and Saba',
+        native: 'Bonaire, Sint Eustatius en Saba',
+        iso2: 'bq',
+        dialCode: '+599 7',
+        format: '+599 7 ### ####',
+        flag: 'https://flagcdn.com/w40/bq.png',
+        phoneLength: 7 // Mobile: 7 digits (e.g., +599 7 123 4567)
+    },
+    {
+        name: 'Sint Eustatius',
+        native: 'Sint Eustatius',
+        iso2: 'bq',
+        dialCode: '+599 3',
+        format: '+599 3 ### ####',
+        flag: 'https://flagcdn.com/w40/bq.png',
+        phoneLength: 7 // Mobile: 7 digits (e.g., +599 3 123 4567)
+    },
+    {
+        name: 'Saba',
+        native: 'Saba',
+        iso2: 'bq',
+        dialCode: '+599 4',
+        format: '+599 4 ### ####',
+        flag: 'https://flagcdn.com/w40/bq.png',
+        phoneLength: 7 // Mobile: 7 digits (e.g., +599 4 123 4567)
+    },
+    {
+        name: 'Greece',
+        native: 'Ελλάδα',
+        iso2: 'gr',
+        dialCode: '+30',
+        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({
+                                opacity: 0,
+                                transform: 'scaleY(0)',
+                                height: '0px',
+                                padding: '0px'
+                            })),
+                            transition('closed => open', [
+                                animate('200ms ease-out')
+                            ]),
+                            transition('open => closed', [
+                                animate('150ms ease-in')
+                            ])
+                        ])
+                    ], 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>
+
+  `, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PhoneInputComponent),
+                            multi: 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { defaultCountry: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchEnabled: [{
+                type: Input
+            }], numberFormat: [{
+                type: Input
+            }], setFirstCountry: [{
+                type: Input
+            }], phoneChange: [{
+                type: Output
+            }], handleClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class PhoneInputModule {
+}
+PhoneInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PhoneInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, declarations: [PhoneInputComponent], imports: [CommonModule,
+        FormsModule], exports: [PhoneInputComponent] });
+PhoneInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, imports: [CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PhoneInputComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule
+                    ],
+                    exports: [PhoneInputComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of phone-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PhoneInputComponent, PhoneInputModule };
+//# sourceMappingURL=ngx-dial-input.mjs.map
+//# sourceMappingURL=ngx-dial-input.mjs.map