cs-country-selector
Version:
<h1>🌍 cs-country-selector</h1>
401 lines (395 loc) • 31.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
import { startWith, debounceTime, distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
const countries = [
{ "code": "AD", "name": "Andorra", flagUrl: "https://flagcdn.com/ad.svg" },
{ "code": "AE", "name": "United Arab Emirates", flagUrl: "https://flagcdn.com/ae.svg" },
{ "code": "AF", "name": "Afghanistan", flagUrl: "https://flagcdn.com/af.svg" },
{ "code": "AG", "name": "Antigua and Barbuda", flagUrl: "https://flagcdn.com/ag.svg" },
{ "code": "AL", "name": "Albania", flagUrl: "https://flagcdn.com/al.svg" },
{ "code": "AM", "name": "Armenia", flagUrl: "https://flagcdn.com/am.svg" },
{ "code": "AO", "name": "Angola", flagUrl: "https://flagcdn.com/ao.svg" },
{ "code": "AR", "name": "Argentina", flagUrl: "https://flagcdn.com/ar.svg" },
{ "code": "AT", "name": "Austria", flagUrl: "https://flagcdn.com/at.svg" },
{ "code": "AU", "name": "Australia", flagUrl: "https://flagcdn.com/au.svg" },
{ "code": "AZ", "name": "Azerbaijan", flagUrl: "https://flagcdn.com/az.svg" },
{ "code": "BA", "name": "Bosnia and Herzegovina", flagUrl: "https://flagcdn.com/ba.svg" },
{ "code": "BB", "name": "Barbados", flagUrl: "https://flagcdn.com/bb.svg" },
{ "code": "BD", "name": "Bangladesh", flagUrl: "https://flagcdn.com/bd.svg" },
{ "code": "BE", "name": "Belgium", flagUrl: "https://flagcdn.com/be.svg" },
{ "code": "BF", "name": "Burkina Faso", flagUrl: "https://flagcdn.com/bf.svg" },
{ "code": "BG", "name": "Bulgaria", flagUrl: "https://flagcdn.com/bg.svg" },
{ "code": "BH", "name": "Bahrain", flagUrl: "https://flagcdn.com/bh.svg" },
{ "code": "BI", "name": "Burundi", flagUrl: "https://flagcdn.com/bi.svg" },
{ "code": "BJ", "name": "Benin", flagUrl: "https://flagcdn.com/bj.svg" },
{ "code": "BN", "name": "Brunei Darussalam", flagUrl: "https://flagcdn.com/bn.svg" },
{ "code": "BO", "name": "Bolivia", flagUrl: "https://flagcdn.com/bo.svg" },
{ "code": "BR", "name": "Brazil", flagUrl: "https://flagcdn.com/br.svg" },
{ "code": "BS", "name": "Bahamas", flagUrl: "https://flagcdn.com/bs.svg" },
{ "code": "BT", "name": "Bhutan", flagUrl: "https://flagcdn.com/bt.svg" },
{ "code": "BW", "name": "Botswana", flagUrl: "https://flagcdn.com/bw.svg" },
{ "code": "BY", "name": "Belarus", flagUrl: "https://flagcdn.com/by.svg" },
{ "code": "BZ", "name": "Belize", flagUrl: "https://flagcdn.com/bz.svg" },
{ "code": "CA", "name": "Canada", flagUrl: "https://flagcdn.com/ca.svg" },
{ "code": "CD", "name": "Congo, The Democratic Republic of the", flagUrl: "https://flagcdn.com/cd.svg" },
{ "code": "CF", "name": "Central African Republic", flagUrl: "https://flagcdn.com/cf.svg" },
{ "code": "CG", "name": "Congo", flagUrl: "https://flagcdn.com/cg.svg" },
{ "code": "CH", "name": "Switzerland", flagUrl: "https://flagcdn.com/ch.svg" },
{ "code": "CI", "name": "Cote D'Ivoire", flagUrl: "https://flagcdn.com/ci.svg" },
{ "code": "CL", "name": "Chile", flagUrl: "https://flagcdn.com/cl.svg" },
{ "code": "CM", "name": "Cameroon", flagUrl: "https://flagcdn.com/cm.svg" },
{ "code": "CN", "name": "China", flagUrl: "https://flagcdn.com/cn.svg" },
{ "code": "CO", "name": "Colombia", flagUrl: "https://flagcdn.com/co.svg" },
{ "code": "CR", "name": "Costa Rica", flagUrl: "https://flagcdn.com/cr.svg" },
{ "code": "CU", "name": "Cuba", flagUrl: "https://flagcdn.com/cu.svg" },
{ "code": "CV", "name": "Cape Verde", flagUrl: "https://flagcdn.com/cv.svg" },
{ "code": "CY", "name": "Cyprus", flagUrl: "https://flagcdn.com/cy.svg" },
{ "code": "CZ", "name": "Czech Republic", flagUrl: "https://flagcdn.com/cz.svg" },
{ "code": "DE", "name": "Germany", flagUrl: "https://flagcdn.com/de.svg" },
{ "code": "DJ", "name": "Djibouti", flagUrl: "https://flagcdn.com/dj.svg" },
{ "code": "DK", "name": "Denmark", flagUrl: "https://flagcdn.com/dk.svg" },
{ "code": "DM", "name": "Dominica", flagUrl: "https://flagcdn.com/dm.svg" },
{ "code": "DO", "name": "Dominican Republic", flagUrl: "https://flagcdn.com/do.svg" },
{ "code": "DZ", "name": "Algeria", flagUrl: "https://flagcdn.com/dz.svg" },
{ "code": "EC", "name": "Ecuador", flagUrl: "https://flagcdn.com/ec.svg" },
{ "code": "EE", "name": "Estonia", flagUrl: "https://flagcdn.com/ee.svg" },
{ "code": "EG", "name": "Egypt", flagUrl: "https://flagcdn.com/eg.svg" },
{ "code": "ER", "name": "Eritrea", flagUrl: "https://flagcdn.com/er.svg" },
{ "code": "ES", "name": "Spain", flagUrl: "https://flagcdn.com/es.svg" },
{ "code": "ET", "name": "Ethiopia", flagUrl: "https://flagcdn.com/et.svg" },
{ "code": "FI", "name": "Finland", flagUrl: "https://flagcdn.com/fi.svg" },
{ "code": "FJ", "name": "Fiji", flagUrl: "https://flagcdn.com/fj.svg" },
{ "code": "FK", "name": "Falkland Islands (Malvinas)", flagUrl: "https://flagcdn.com/fk.svg" },
{ "code": "FM", "name": "Micronesia, Federated States of", flagUrl: "https://flagcdn.com/fm.svg" },
{ "code": "FR", "name": "France", flagUrl: "https://flagcdn.com/fr.svg" },
{ "code": "GA", "name": "Gabon", flagUrl: "https://flagcdn.com/ga.svg" },
{ "code": "GB", "name": "United Kingdom", flagUrl: "https://flagcdn.com/gb.svg" },
{ "code": "GD", "name": "Grenada", flagUrl: "https://flagcdn.com/gd.svg" },
{ "code": "GE", "name": "Georgia", flagUrl: "https://flagcdn.com/ge.svg" },
{ "code": "GH", "name": "Ghana", flagUrl: "https://flagcdn.com/gh.svg" },
{ "code": "GM", "name": "Gambia", flagUrl: "https://flagcdn.com/gm.svg" },
{ "code": "GN", "name": "Guinea", flagUrl: "https://flagcdn.com/gn.svg" },
{ "code": "GQ", "name": "Equatorial Guinea", flagUrl: "https://flagcdn.com/gq.svg" },
{ "code": "GR", "name": "Greece", flagUrl: "https://flagcdn.com/gr.svg" },
{ "code": "GT", "name": "Guatemala", flagUrl: "https://flagcdn.com/gt.svg" },
{ "code": "GU", "name": "Guam", flagUrl: "https://flagcdn.com/gu.svg" },
{ "code": "GW", "name": "Guinea-Bissau", flagUrl: "https://flagcdn.com/gw.svg" },
{ "code": "GY", "name": "Guyana", flagUrl: "https://flagcdn.com/gy.svg" },
{ "code": "HK", "name": "Hong Kong", flagUrl: "https://flagcdn.com/hk.svg" },
{ "code": "HN", "name": "Honduras", flagUrl: "https://flagcdn.com/hn.svg" },
{ "code": "HR", "name": "Croatia", flagUrl: "https://flagcdn.com/hr.svg" },
{ "code": "HT", "name": "Haiti", flagUrl: "https://flagcdn.com/ht.svg" },
{ "code": "HU", "name": "Hungary", flagUrl: "https://flagcdn.com/hu.svg" },
{ "code": "ID", "name": "Indonesia", flagUrl: "https://flagcdn.com/id.svg" },
{ "code": "IE", "name": "Ireland", flagUrl: "https://flagcdn.com/ie.svg" },
{ "code": "IL", "name": "Israel", flagUrl: "https://flagcdn.com/il.svg" },
{ "code": "IN", "name": "India", flagUrl: "https://flagcdn.com/in.svg" },
{ "code": "IQ", "name": "Iraq", flagUrl: "https://flagcdn.com/iq.svg" },
{ "code": "IR", "name": "Iran, Islamic Republic of", flagUrl: "https://flagcdn.com/ir.svg" },
{ "code": "IS", "name": "Iceland", flagUrl: "https://flagcdn.com/is.svg" },
{ "code": "IT", "name": "Italy", flagUrl: "https://flagcdn.com/it.svg" },
{ "code": "JM", "name": "Jamaica", flagUrl: "https://flagcdn.com/jm.svg" },
{ "code": "JO", "name": "Jordan", flagUrl: "https://flagcdn.com/jo.svg" },
{ "code": "JP", "name": "Japan", flagUrl: "https://flagcdn.com/jp.svg" },
{ "code": "KE", "name": "Kenya", flagUrl: "https://flagcdn.com/ke.svg" },
{ "code": "KG", "name": "Kyrgyzstan", flagUrl: "https://flagcdn.com/kg.svg" },
{ "code": "KH", "name": "Cambodia", flagUrl: "https://flagcdn.com/kh.svg" },
{ "code": "KI", "name": "Kiribati", flagUrl: "https://flagcdn.com/ki.svg" },
{ "code": "KM", "name": "Comoros", flagUrl: "https://flagcdn.com/km.svg" },
{ "code": "KN", "name": "Saint Kitts and Nevis", flagUrl: "https://flagcdn.com/kn.svg" },
{ "code": "KP", "name": "Korea, Democratic People's Republic of", flagUrl: "https://flagcdn.com/kp.svg" },
{ "code": "KR", "name": "Korea, Republic of", flagUrl: "https://flagcdn.com/kr.svg" },
{ "code": "KW", "name": "Kuwait", flagUrl: "https://flagcdn.com/kw.svg" },
{ "code": "KZ", "name": "Kazakhstan", flagUrl: "https://flagcdn.com/kz.svg" },
{ "code": "LA", "name": "Lao People's Democratic Republic", flagUrl: "https://flagcdn.com/la.svg" },
{ "code": "LB", "name": "Lebanon", flagUrl: "https://flagcdn.com/lb.svg" },
{ "code": "LC", "name": "Saint Lucia", flagUrl: "https://flagcdn.com/lc.svg" },
{ "code": "LI", "name": "Liechtenstein", flagUrl: "https://flagcdn.com/li.svg" },
{ "code": "LK", "name": "Sri Lanka", flagUrl: "https://flagcdn.com/lk.svg" },
{ "code": "LR", "name": "Liberia", flagUrl: "https://flagcdn.com/lr.svg" },
{ "code": "LS", "name": "Lesotho", flagUrl: "https://flagcdn.com/ls.svg" },
{ "code": "LT", "name": "Lithuania", flagUrl: "https://flagcdn.com/lt.svg" },
{ "code": "LU", "name": "Luxembourg", flagUrl: "https://flagcdn.com/lu.svg" },
{ "code": "LV", "name": "Latvia", flagUrl: "https://flagcdn.com/lv.svg" },
{ "code": "LY", "name": "Libyan Arab Jamahiriya", flagUrl: "https://flagcdn.com/ly.svg" },
{ "code": "MA", "name": "Morocco", flagUrl: "https://flagcdn.com/ma.svg" },
{ "code": "MC", "name": "Monaco", flagUrl: "https://flagcdn.com/mc.svg" },
{ "code": "MD", "name": "Moldova, Republic of", flagUrl: "https://flagcdn.com/md.svg" },
{ "code": "ME", "name": "Montenegro", flagUrl: "https://flagcdn.com/me.svg" },
{ "code": "MG", "name": "Madagascar", flagUrl: "https://flagcdn.com/mg.svg" },
{ "code": "MH", "name": "Marshall Islands", flagUrl: "https://flagcdn.com/mh.svg" },
{ "code": "MK", "name": "Macedonia, The Former Yugoslav Republic of", flagUrl: "https://flagcdn.com/mk.svg" },
{ "code": "ML", "name": "Mali", flagUrl: "https://flagcdn.com/ml.svg" },
{ "code": "MM", "name": "Myanmar", flagUrl: "https://flagcdn.com/mm.svg" },
{ "code": "MN", "name": "Mongolia", flagUrl: "https://flagcdn.com/mn.svg" },
{ "code": "MO", "name": "Macao", flagUrl: "https://flagcdn.com/mo.svg" },
{ "code": "MR", "name": "Mauritania", flagUrl: "https://flagcdn.com/mr.svg" },
{ "code": "MT", "name": "Malta", flagUrl: "https://flagcdn.com/mt.svg" },
{ "code": "MU", "name": "Mauritius", flagUrl: "https://flagcdn.com/mu.svg" },
{ "code": "MV", "name": "Maldives", flagUrl: "https://flagcdn.com/mv.svg" },
{ "code": "MW", "name": "Malawi", flagUrl: "https://flagcdn.com/mw.svg" },
{ "code": "MX", "name": "Mexico", flagUrl: "https://flagcdn.com/mx.svg" },
{ "code": "MY", "name": "Malaysia", flagUrl: "https://flagcdn.com/my.svg" },
{ "code": "MZ", "name": "Mozambique", flagUrl: "https://flagcdn.com/mz.svg" },
{ "code": "NA", "name": "Namibia", flagUrl: "https://flagcdn.com/na.svg" },
{ "code": "NE", "name": "Niger", flagUrl: "https://flagcdn.com/ne.svg" },
{ "code": "NG", "name": "Nigeria", flagUrl: "https://flagcdn.com/ng.svg" },
{ "code": "NI", "name": "Nicaragua", flagUrl: "https://flagcdn.com/ni.svg" },
{ "code": "NL", "name": "Netherlands", flagUrl: "https://flagcdn.com/nl.svg" },
{ "code": "NO", "name": "Norway", flagUrl: "https://flagcdn.com/no.svg" },
{ "code": "NP", "name": "Nepal", flagUrl: "https://flagcdn.com/np.svg" },
{ "code": "NR", "name": "Nauru", flagUrl: "https://flagcdn.com/nr.svg" },
{ "code": "NZ", "name": "New Zealand", flagUrl: "https://flagcdn.com/nz.svg" },
{ "code": "OM", "name": "Oman", flagUrl: "https://flagcdn.com/om.svg" },
{ "code": "PS", "name": "Palestine", flagUrl: "https://flagcdn.com/ps.svg" },
{ "code": "PA", "name": "Panama", flagUrl: "https://flagcdn.com/pa.svg" },
{ "code": "PE", "name": "Peru", flagUrl: "https://flagcdn.com/pe.svg" },
{ "code": "PG", "name": "Papua New Guinea", flagUrl: "https://flagcdn.com/pg.svg" },
{ "code": "PH", "name": "Philippines", flagUrl: "https://flagcdn.com/ph.svg" },
{ "code": "PK", "name": "Pakistan", flagUrl: "https://flagcdn.com/pk.svg" },
{ "code": "PL", "name": "Poland", flagUrl: "https://flagcdn.com/pl.svg" },
{ "code": "PR", "name": "Puerto Rico", flagUrl: "https://flagcdn.com/pr.svg" },
{ "code": "PT", "name": "Portugal", flagUrl: "https://flagcdn.com/pt.svg" },
{ "code": "PW", "name": "Palau", flagUrl: "https://flagcdn.com/pw.svg" },
{ "code": "PY", "name": "Paraguay", flagUrl: "https://flagcdn.com/py.svg" },
{ "code": "QA", "name": "Qatar", flagUrl: "https://flagcdn.com/qa.svg" },
{ "code": "RO", "name": "Romania", flagUrl: "https://flagcdn.com/ro.svg" },
{ "code": "RS", "name": "Serbia", flagUrl: "https://flagcdn.com/rs.svg" },
{ "code": "RU", "name": "Russian Federation", flagUrl: "https://flagcdn.com/ru.svg" },
{ "code": "RW", "name": "Rwanda", flagUrl: "https://flagcdn.com/rw.svg" },
{ "code": "SA", "name": "Saudi Arabia", flagUrl: "https://flagcdn.com/sa.svg" },
{ "code": "SB", "name": "Solomon Islands", flagUrl: "https://flagcdn.com/sb.svg" },
{ "code": "SC", "name": "Seychelles", flagUrl: "https://flagcdn.com/sc.svg" },
{ "code": "SD", "name": "Sudan", flagUrl: "https://flagcdn.com/sd.svg" },
{ "code": "SE", "name": "Sweden", flagUrl: "https://flagcdn.com/se.svg" },
{ "code": "SG", "name": "Singapore", flagUrl: "https://flagcdn.com/sg.svg" },
{ "code": "SI", "name": "Slovenia", flagUrl: "https://flagcdn.com/si.svg" },
{ "code": "SK", "name": "Slovakia", flagUrl: "https://flagcdn.com/sk.svg" },
{ "code": "SL", "name": "Sierra Leone", flagUrl: "https://flagcdn.com/sl.svg" },
{ "code": "SM", "name": "San Marino", flagUrl: "https://flagcdn.com/sm.svg" },
{ "code": "SN", "name": "Senegal", flagUrl: "https://flagcdn.com/sn.svg" },
{ "code": "SO", "name": "Somalia", flagUrl: "https://flagcdn.com/so.svg" },
{ "code": "SR", "name": "Suriname", flagUrl: "https://flagcdn.com/sr.svg" },
{ "code": "ST", "name": "Sao Tome and Principe", flagUrl: "https://flagcdn.com/st.svg" },
{ "code": "SV", "name": "El Salvador", flagUrl: "https://flagcdn.com/sv.svg" },
{ "code": "SY", "name": "Syrian Arab Republic", flagUrl: "https://flagcdn.com/sy.svg" },
{ "code": "SZ", "name": "Swaziland", flagUrl: "https://flagcdn.com/sz.svg" },
{ "code": "TD", "name": "Chad", flagUrl: "https://flagcdn.com/td.svg" },
{ "code": "TG", "name": "Togo", flagUrl: "https://flagcdn.com/tg.svg" },
{ "code": "TH", "name": "Thailand", flagUrl: "https://flagcdn.com/th.svg" },
{ "code": "TJ", "name": "Tajikistan", flagUrl: "https://flagcdn.com/tj.svg" },
{ "code": "TL", "name": "Timor-Leste", flagUrl: "https://flagcdn.com/tl.svg" },
{ "code": "TM", "name": "Turkmenistan", flagUrl: "https://flagcdn.com/tm.svg" },
{ "code": "TN", "name": "Tunisia", flagUrl: "https://flagcdn.com/tn.svg" },
{ "code": "TO", "name": "Tonga", flagUrl: "https://flagcdn.com/to.svg" },
{ "code": "TR", "name": "Turkey", flagUrl: "https://flagcdn.com/tr.svg" },
{ "code": "TT", "name": "Trinidad and Tobago", flagUrl: "https://flagcdn.com/tt.svg" },
{ "code": "TV", "name": "Tuvalu", flagUrl: "https://flagcdn.com/tv.svg" },
{ "code": "TW", "name": "Taiwan, Province of China", flagUrl: "https://flagcdn.com/tw.svg" },
{ "code": "TZ", "name": "Tanzania, United Republic of", flagUrl: "https://flagcdn.com/tz.svg" },
{ "code": "UA", "name": "Ukraine", flagUrl: "https://flagcdn.com/ua.svg" },
{ "code": "UG", "name": "Uganda", flagUrl: "https://flagcdn.com/ug.svg" },
{ "code": "US", "name": "United States", flagUrl: "https://flagcdn.com/us.svg" },
{ "code": "UY", "name": "Uruguay", flagUrl: "https://flagcdn.com/uy.svg" },
{ "code": "UZ", "name": "Uzbekistan", flagUrl: "https://flagcdn.com/uz.svg" },
{ "code": "VA", "name": "Holy See (Vatican City State)", flagUrl: "https://flagcdn.com/va.svg" },
{ "code": "VC", "name": "Saint Vincent and the Grenadines", flagUrl: "https://flagcdn.com/vc.svg" },
{ "code": "VE", "name": "Venezuela", flagUrl: "https://flagcdn.com/ve.svg" },
{ "code": "VN", "name": "Viet Nam", flagUrl: "https://flagcdn.com/vn.svg" },
{ "code": "VU", "name": "Vanuatu", flagUrl: "https://flagcdn.com/vu.svg" },
{ "code": "WS", "name": "Samoa", flagUrl: "https://flagcdn.com/ws.svg" },
{ "code": "YE", "name": "Yemen", flagUrl: "https://flagcdn.com/ye.svg" },
{ "code": "ZA", "name": "South Africa", flagUrl: "https://flagcdn.com/za.svg" },
{ "code": "ZM", "name": "Zambia", flagUrl: "https://flagcdn.com/zm.svg" },
{ "code": "ZW", "name": "Zimbabwe", flagUrl: "https://flagcdn.com/zw.svg" }
];
class CountrySelectorComponent {
initialCountryCode = '';
includeFlags = true;
onlyCountries = [];
excludeCountries = [];
placeholder = 'Search for a country...';
containerClass = '';
inputClass = '';
dropdownClass = '';
flagClass = '';
selectedFlagClass = '';
itemClass = '';
activeItemClass = '';
countrySelected = new EventEmitter();
countries = [];
filteredCountries = [];
selectedCountry = null;
countrySearchControl = new FormControl('');
displayValue = '';
showDropdown = false;
highlightIndex = -1;
activeDescendant = '';
onChange = () => { };
onTouched = () => { };
destroy$ = new Subject();
blurTimeout;
ngOnInit() {
this.countries = this.getFilteredCountries(countries);
this.filteredCountries = this.countries;
if (this.initialCountryCode && !this.selectedCountry) {
const match = this.countries.find(c => c.code === this.initialCountryCode);
if (match)
this.writeValue(match);
}
this.countrySearchControl.valueChanges.pipe(startWith(''), debounceTime(200), distinctUntilChanged(), map(term => this._filterCountries(term || '')), takeUntil(this.destroy$)).subscribe(results => {
this.filteredCountries = results;
this.highlightIndex = -1;
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
if (this.blurTimeout)
clearTimeout(this.blurTimeout);
}
writeValue(country) {
this.selectedCountry = country;
this.displayValue = country?.name || '';
this.countrySearchControl.setValue(this.displayValue, { emitEvent: false });
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
isDisabled ? this.countrySearchControl.disable() : this.countrySearchControl.enable();
}
getFilteredCountries(source) {
let filtered = [...source];
if (this.onlyCountries.length)
filtered = filtered.filter(c => this.onlyCountries.includes(c.code));
if (this.excludeCountries.length)
filtered = filtered.filter(c => !this.excludeCountries.includes(c.code));
return filtered;
}
_filterCountries(term) {
const filter = term.toLowerCase();
return this.getFilteredCountries(this.countries).filter(c => c.name.toLowerCase().startsWith(filter));
}
selectCountry(country) {
this.selectedCountry = country;
this.displayValue = country?.name || '';
this.countrySearchControl.setValue(this.displayValue, { emitEvent: false });
this.countrySelected.emit(country);
this.onChange(country);
this.showDropdown = false;
this.highlightIndex = -1;
this.activeDescendant = '';
}
onFocus() {
this.onTouched();
if (this.countrySearchControl.value === this.displayValue) {
this.countrySearchControl.setValue('', { emitEvent: false });
this.filteredCountries = this.countries;
}
this.showDropdown = true;
}
onBlur() {
this.blurTimeout = setTimeout(() => {
this.showDropdown = false;
const value = this.countrySearchControl.value;
const match = this.countries.find(c => c.name.toLowerCase() === (value || '').toLowerCase());
if (match) {
this.selectCountry(match);
}
else {
this.selectCountry(null);
}
this.onTouched();
this.highlightIndex = -1;
this.activeDescendant = '';
}, 150);
}
onKeyDown(event) {
if (!this.showDropdown || this.filteredCountries.length === 0)
return;
if (event.key === 'ArrowDown') {
event.preventDefault();
this.highlightIndex = (this.highlightIndex + 1) % this.filteredCountries.length;
this.setActiveDescendant();
}
else if (event.key === 'ArrowUp') {
event.preventDefault();
this.highlightIndex = (this.highlightIndex - 1 + this.filteredCountries.length) % this.filteredCountries.length;
this.setActiveDescendant();
}
else if (event.key === 'Enter') {
event.preventDefault();
if (this.highlightIndex >= 0)
this.selectCountry(this.filteredCountries[this.highlightIndex]);
}
else if (event.key === 'Escape') {
this.showDropdown = false;
this.highlightIndex = -1;
this.activeDescendant = '';
}
}
setActiveDescendant() {
this.activeDescendant = this.highlightIndex >= 0 ? `country-option-${this.highlightIndex}` : '';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CountrySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: CountrySelectorComponent, isStandalone: true, selector: "cs-country-selector", inputs: { initialCountryCode: "initialCountryCode", includeFlags: "includeFlags", onlyCountries: "onlyCountries", excludeCountries: "excludeCountries", placeholder: "placeholder", containerClass: "containerClass", inputClass: "inputClass", dropdownClass: "dropdownClass", flagClass: "flagClass", selectedFlagClass: "selectedFlagClass", itemClass: "itemClass", activeItemClass: "activeItemClass" }, outputs: { countrySelected: "countrySelected" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CountrySelectorComponent),
multi: true
}
], ngImport: i0, template: "<div [class]=\"'country-selector-container ' + containerClass\">\r\n <img\r\n *ngIf=\"includeFlags && selectedCountry?.flagUrl\"\r\n [src]=\"selectedCountry?.flagUrl\"\r\n [class]=\"('country-flag ' + flagClass) + ' ' + ('selected-country-flag ' + selectedFlagClass)\"\r\n alt=\"Flag\"\r\n />\r\n\r\n <input\r\n type=\"text\"\r\n [formControl]=\"countrySearchControl\"\r\n [placeholder]=\"placeholder\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [value]=\"displayValue\"\r\n [class]=\"'country-input ' + inputClass\"\r\n [attr.aria-expanded]=\"showDropdown\"\r\n [attr.aria-activedescendant]=\"activeDescendant\"\r\n role=\"combobox\"\r\n />\r\n\r\n <div *ngIf=\"showDropdown && filteredCountries.length\" [class]=\"'country-dropdown ' + dropdownClass\">\r\n <ul role=\"listbox\">\r\n <li\r\n *ngFor=\"let country of filteredCountries; let i = index\"\r\n (mousedown)=\"selectCountry(country)\"\r\n [id]=\"'country-option-' + i\"\r\n role=\"option\"\r\n [class]=\"('country-item ' + itemClass) + (i === highlightIndex ? ' ' + ( 'active ' + activeItemClass) : '')\"\r\n >\r\n <img\r\n *ngIf=\"includeFlags\"\r\n [src]=\"country.flagUrl\"\r\n [class]=\" 'country-flag ' + flagClass\"\r\n alt=\"{{ country.name }} flag\"\r\n />\r\n {{ country.name }}\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:calc(100% - 80px);--cs-scrollbar-track-color: transparent;--cs-scrollbar-thumb-color: #ccc;--cs-scrollbar-thumb-hover-color: #999;--cs-scrollbar-width: 8px;--cs-scrollbar-radius: 6px}:host .country-selector-container{position:relative;font-family:inherit}:host .country-input{width:100%;height:32px;border:1px solid gray;border-radius:4px;padding:4px 15px 4px 40px;background:#fff;outline:none}:host .country-dropdown{position:absolute;width:calc(100% + 55px);max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ccc;box-shadow:0 4px 6px #0000001a;border-radius:4px;z-index:1000;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--cs-scrollbar-thumb-color) var(--cs-scrollbar-track-color)}:host .country-dropdown::-webkit-scrollbar{width:var(--cs-scrollbar-width)}:host .country-dropdown::-webkit-scrollbar-track{background:var(--cs-scrollbar-track-color)}:host .country-dropdown::-webkit-scrollbar-thumb{background-color:var(--cs-scrollbar-thumb-color);border-radius:var(--cs-scrollbar-radius);transition:background .3s ease}:host .country-dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--cs-scrollbar-thumb-hover-color)}:host .country-dropdown ul{margin:0;padding:0;list-style:none}:host .country-dropdown li{padding:8px 10px;cursor:pointer;display:flex;align-items:center}:host .country-dropdown li.active,:host .country-dropdown li:hover{background-color:#f2f2f2}:host .country-flag{width:20px;margin-right:8px}:host .selected-country-flag{position:absolute;top:14px;left:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CountrySelectorComponent, decorators: [{
type: Component,
args: [{ selector: 'cs-country-selector', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CountrySelectorComponent),
multi: true
}
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'country-selector-container ' + containerClass\">\r\n <img\r\n *ngIf=\"includeFlags && selectedCountry?.flagUrl\"\r\n [src]=\"selectedCountry?.flagUrl\"\r\n [class]=\"('country-flag ' + flagClass) + ' ' + ('selected-country-flag ' + selectedFlagClass)\"\r\n alt=\"Flag\"\r\n />\r\n\r\n <input\r\n type=\"text\"\r\n [formControl]=\"countrySearchControl\"\r\n [placeholder]=\"placeholder\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [value]=\"displayValue\"\r\n [class]=\"'country-input ' + inputClass\"\r\n [attr.aria-expanded]=\"showDropdown\"\r\n [attr.aria-activedescendant]=\"activeDescendant\"\r\n role=\"combobox\"\r\n />\r\n\r\n <div *ngIf=\"showDropdown && filteredCountries.length\" [class]=\"'country-dropdown ' + dropdownClass\">\r\n <ul role=\"listbox\">\r\n <li\r\n *ngFor=\"let country of filteredCountries; let i = index\"\r\n (mousedown)=\"selectCountry(country)\"\r\n [id]=\"'country-option-' + i\"\r\n role=\"option\"\r\n [class]=\"('country-item ' + itemClass) + (i === highlightIndex ? ' ' + ( 'active ' + activeItemClass) : '')\"\r\n >\r\n <img\r\n *ngIf=\"includeFlags\"\r\n [src]=\"country.flagUrl\"\r\n [class]=\" 'country-flag ' + flagClass\"\r\n alt=\"{{ country.name }} flag\"\r\n />\r\n {{ country.name }}\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:calc(100% - 80px);--cs-scrollbar-track-color: transparent;--cs-scrollbar-thumb-color: #ccc;--cs-scrollbar-thumb-hover-color: #999;--cs-scrollbar-width: 8px;--cs-scrollbar-radius: 6px}:host .country-selector-container{position:relative;font-family:inherit}:host .country-input{width:100%;height:32px;border:1px solid gray;border-radius:4px;padding:4px 15px 4px 40px;background:#fff;outline:none}:host .country-dropdown{position:absolute;width:calc(100% + 55px);max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ccc;box-shadow:0 4px 6px #0000001a;border-radius:4px;z-index:1000;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--cs-scrollbar-thumb-color) var(--cs-scrollbar-track-color)}:host .country-dropdown::-webkit-scrollbar{width:var(--cs-scrollbar-width)}:host .country-dropdown::-webkit-scrollbar-track{background:var(--cs-scrollbar-track-color)}:host .country-dropdown::-webkit-scrollbar-thumb{background-color:var(--cs-scrollbar-thumb-color);border-radius:var(--cs-scrollbar-radius);transition:background .3s ease}:host .country-dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--cs-scrollbar-thumb-hover-color)}:host .country-dropdown ul{margin:0;padding:0;list-style:none}:host .country-dropdown li{padding:8px 10px;cursor:pointer;display:flex;align-items:center}:host .country-dropdown li.active,:host .country-dropdown li:hover{background-color:#f2f2f2}:host .country-flag{width:20px;margin-right:8px}:host .selected-country-flag{position:absolute;top:14px;left:10px}\n"] }]
}], propDecorators: { initialCountryCode: [{
type: Input
}], includeFlags: [{
type: Input
}], onlyCountries: [{
type: Input
}], excludeCountries: [{
type: Input
}], placeholder: [{
type: Input
}], containerClass: [{
type: Input
}], inputClass: [{
type: Input
}], dropdownClass: [{
type: Input
}], flagClass: [{
type: Input
}], selectedFlagClass: [{
type: Input
}], itemClass: [{
type: Input
}], activeItemClass: [{
type: Input
}], countrySelected: [{
type: Output
}] } });
/*
* Public API Surface of country-selector
*/
/**
* Generated bundle index. Do not edit.
*/
export { CountrySelectorComponent };
//# sourceMappingURL=cs-country-selector.mjs.map