import * as i0 from '@angular/core';
import { inject, ElementRef, Renderer2, model, signal, input, booleanAttribute, computed, viewChild, DestroyRef, output, effect, forwardRef, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { NgControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { FORM_FIELD, FormFieldControl } from '@ngstarter-ui/components/form-field';
import { Option, Select, SelectTrigger, SelectHeader } from '@ngstarter-ui/components/select';
import { Subject } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FocusMonitor } from '@angular/cdk/a11y';
import { Icon } from '@ngstarter-ui/components/icon';
import { Button } from '@ngstarter-ui/components/button';

const countries = [
    { "code": "AF", "name": "Afghanistan", "flag": "🇦🇫" },
    { "code": "AX", "name": "Åland Islands", "flag": "🇦🇽" },
    { "code": "AL", "name": "Albania", "flag": "🇦🇱" },
    { "code": "DZ", "name": "Algeria", "flag": "🇩🇿" },
    { "code": "AS", "name": "American Samoa", "flag": "🇦🇸" },
    { "code": "AD", "name": "Andorra", "flag": "🇦🇩" },
    { "code": "AO", "name": "Angola", "flag": "🇦🇴" },
    { "code": "AI", "name": "Anguilla", "flag": "🇦🇮" },
    { "code": "AQ", "name": "Antarctica", "flag": "🇦🇶" },
    { "code": "AG", "name": "Antigua and Barbuda", "flag": "🇦🇬" },
    { "code": "AR", "name": "Argentina", "flag": "🇦🇷" },
    { "code": "AM", "name": "Armenia", "flag": "🇦🇲" },
    { "code": "AW", "name": "Aruba", "flag": "🇦🇼" },
    { "code": "AU", "name": "Australia", "flag": "🇦🇺" },
    { "code": "AT", "name": "Austria", "flag": "🇦🇹" },
    { "code": "AZ", "name": "Azerbaijan", "flag": "🇦🇿" },
    { "code": "BS", "name": "Bahamas", "flag": "🇧🇸" },
    { "code": "BH", "name": "Bahrain", "flag": "🇧🇭" },
    { "code": "BD", "name": "Bangladesh", "flag": "🇧🇩" },
    { "code": "BB", "name": "Barbados", "flag": "🇧🇧" },
    { "code": "BY", "name": "Belarus", "flag": "🇧🇾" },
    { "code": "BE", "name": "Belgium", "flag": "🇧🇪" },
    { "code": "BZ", "name": "Belize", "flag": "🇧🇿" },
    { "code": "BJ", "name": "Benin", "flag": "🇧🇯" },
    { "code": "BM", "name": "Bermuda", "flag": "🇧🇲" },
    { "code": "BT", "name": "Bhutan", "flag": "🇧🇹" },
    { "code": "BO", "name": "Bolivia (Plurinational State of)", "flag": "🇧🇴" },
    { "code": "BQ", "name": "Bonaire, Sint Eustatius and Saba", "flag": "🇧🇶" },
    { "code": "BA", "name": "Bosnia and Herzegovina", "flag": "🇧🇦" },
    { "code": "BW", "name": "Botswana", "flag": "🇧🇼" },
    { "code": "BV", "name": "Bouvet Island", "flag": "🇧🇻" },
    { "code": "BR", "name": "Brazil", "flag": "🇧🇷" },
    { "code": "IO", "name": "British Indian Ocean Territory", "flag": "🇮🇴" },
    { "code": "BN", "name": "Brunei Darussalam", "flag": "🇧🇳" },
    { "code": "BG", "name": "Bulgaria", "flag": "🇧🇬" },
    { "code": "BF", "name": "Burkina Faso", "flag": "🇧🇫" },
    { "code": "BI", "name": "Burundi", "flag": "🇧🇮" },
    { "code": "CV", "name": "Cabo Verde", "flag": "🇨🇻" },
    { "code": "KH", "name": "Cambodia", "flag": "🇰🇭" },
    { "code": "CM", "name": "Cameroon", "flag": "🇨🇲" },
    { "code": "CA", "name": "Canada", "flag": "🇨🇦" },
    { "code": "KY", "name": "Cayman Islands", "flag": "🇰🇾" },
    { "code": "CF", "name": "Central African Republic", "flag": "🇨🇫" },
    { "code": "TD", "name": "Chad", "flag": "🇹🇩" },
    { "code": "CL", "name": "Chile", "flag": "🇨🇱" },
    { "code": "CN", "name": "China", "flag": "🇨🇳" },
    { "code": "CX", "name": "Christmas Island", "flag": "🇨🇽" },
    { "code": "CC", "name": "Cocos (Keeling) Islands", "flag": "🇨🇨" },
    { "code": "CO", "name": "Colombia", "flag": "🇨🇴" },
    { "code": "KM", "name": "Comoros", "flag": "🇰🇲" },
    { "code": "CG", "name": "Congo", "flag": "🇨🇬" },
    { "code": "CD", "name": "Congo (Democratic Republic of the)", "flag": "🇨🇩" },
    { "code": "CK", "name": "Cook Islands", "flag": "🇨🇰" },
    { "code": "CR", "name": "Costa Rica", "flag": "🇨🇷" },
    { "code": "CI", "name": "Côte d'Ivoire", "flag": "🇨🇮" },
    { "code": "HR", "name": "Croatia", "flag": "🇭🇷" },
    { "code": "CU", "name": "Cuba", "flag": "🇨🇺" },
    { "code": "CW", "name": "Curaçao", "flag": "🇨🇼" },
    { "code": "CY", "name": "Cyprus", "flag": "🇨🇾" },
    { "code": "CZ", "name": "Czechia", "flag": "🇨🇿" },
    { "code": "DK", "name": "Denmark", "flag": "🇩🇰" },
    { "code": "DJ", "name": "Djibouti", "flag": "🇩🇯" },
    { "code": "DM", "name": "Dominica", "flag": "🇩🇲" },
    { "code": "DO", "name": "Dominican Republic", "flag": "🇩🇴" },
    { "code": "EC", "name": "Ecuador", "flag": "🇪🇨" },
    { "code": "EG", "name": "Egypt", "flag": "🇪🇬" },
    { "code": "SV", "name": "El Salvador", "flag": "🇸🇻" },
    { "code": "GQ", "name": "Equatorial Guinea", "flag": "🇬🇶" },
    { "code": "ER", "name": "Eritrea", "flag": "🇪🇷" },
    { "code": "EE", "name": "Estonia", "flag": "🇪🇪" },
    { "code": "SZ", "name": "Eswatini", "flag": "🇸🇿" },
    { "code": "ET", "name": "Ethiopia", "flag": "🇪🇹" },
    { "code": "FK", "name": "Falkland Islands (Malvinas)", "flag": "🇫🇰" },
    { "code": "FO", "name": "Faroe Islands", "flag": "🇫🇴" },
    { "code": "FJ", "name": "Fiji", "flag": "🇫🇯" },
    { "code": "FI", "name": "Finland", "flag": "🇫🇮" },
    { "code": "FR", "name": "France", "flag": "🇫🇷" },
    { "code": "GF", "name": "French Guiana", "flag": "🇬🇫" },
    { "code": "PF", "name": "French Polynesia", "flag": "🇵🇫" },
    { "code": "TF", "name": "French Southern Territories", "flag": "🇹🇫" },
    { "code": "GA", "name": "Gabon", "flag": "🇬🇦" },
    { "code": "GM", "name": "Gambia", "flag": "🇬🇲" },
    { "code": "GE", "name": "Georgia", "flag": "🇬🇪" },
    { "code": "DE", "name": "Germany", "flag": "🇩🇪" },
    { "code": "GH", "name": "Ghana", "flag": "🇬🇭" },
    { "code": "GI", "name": "Gibraltar", "flag": "🇬🇮" },
    { "code": "GR", "name": "Greece", "flag": "🇬🇷" },
    { "code": "GL", "name": "Greenland", "flag": "🇬🇱" },
    { "code": "GD", "name": "Grenada", "flag": "🇬🇩" },
    { "code": "GP", "name": "Guadeloupe", "flag": "🇬🇵" },
    { "code": "GU", "name": "Guam", "flag": "🇬🇺" },
    { "code": "GT", "name": "Guatemala", "flag": "🇬🇹" },
    { "code": "GG", "name": "Guernsey", "flag": "🇬🇬" },
    { "code": "GN", "name": "Guinea", "flag": "🇬🇳" },
    { "code": "GW", "name": "Guinea-Bissau", "flag": "🇬🇼" },
    { "code": "GY", "name": "Guyana", "flag": "🇬🇾" },
    { "code": "HT", "name": "Haiti", "flag": "🇭🇹" },
    { "code": "HM", "name": "Heard Island and McDonald Islands", "flag": "🇭🇲" },
    { "code": "VA", "name": "Holy See", "flag": "🇻🇦" },
    { "code": "HN", "name": "Honduras", "flag": "🇭🇳" },
    { "code": "HK", "name": "Hong Kong", "flag": "🇭🇰" },
    { "code": "HU", "name": "Hungary", "flag": "🇭🇺" },
    { "code": "IS", "name": "Iceland", "flag": "🇮🇸" },
    { "code": "IN", "name": "India", "flag": "🇮🇳" },
    { "code": "ID", "name": "Indonesia", "flag": "🇮🇩" },
    { "code": "IR", "name": "Iran (Islamic Republic of)", "flag": "🇮🇷" },
    { "code": "IQ", "name": "Iraq", "flag": "🇮🇶" },
    { "code": "IE", "name": "Ireland", "flag": "🇮🇪" },
    { "code": "IM", "name": "Isle of Man", "flag": "🇮🇲" },
    { "code": "IL", "name": "Israel", "flag": "🇮🇱" },
    { "code": "IT", "name": "Italy", "flag": "🇮🇹" },
    { "code": "JM", "name": "Jamaica", "flag": "🇯🇲" },
    { "code": "JP", "name": "Japan", "flag": "🇯🇵" },
    { "code": "JE", "name": "Jersey", "flag": "🇯🇪" },
    { "code": "JO", "name": "Jordan", "flag": "🇯🇴" },
    { "code": "KZ", "name": "Kazakhstan", "flag": "🇰🇿" },
    { "code": "KE", "name": "Kenya", "flag": "🇰🇪" },
    { "code": "KI", "name": "Kiribati", "flag": "🇰🇮" },
    { "code": "KP", "name": "Korea (Democratic People's Republic of)", "flag": "🇰🇵" },
    { "code": "KR", "name": "Korea (Republic of)", "flag": "🇰🇷" },
    { "code": "KW", "name": "Kuwait", "flag": "🇰🇼" },
    { "code": "KG", "name": "Kyrgyzstan", "flag": "🇰🇬" },
    { "code": "LA", "name": "Lao People's Democratic Republic", "flag": "🇱🇦" },
    { "code": "LV", "name": "Latvia", "flag": "🇱🇻" },
    { "code": "LB", "name": "Lebanon", "flag": "🇱🇧" },
    { "code": "LS", "name": "Lesotho", "flag": "🇱🇸" },
    { "code": "LR", "name": "Liberia", "flag": "🇱🇷" },
    { "code": "LY", "name": "Libya", "flag": "🇱🇾" },
    { "code": "LI", "name": "Liechtenstein", "flag": "🇱🇮" },
    { "code": "LT", "name": "Lithuania", "flag": "🇱🇹" },
    { "code": "LU", "name": "Luxembourg", "flag": "🇱🇺" },
    { "code": "MO", "name": "Macao", "flag": "🇲🇴" },
    { "code": "MG", "name": "Madagascar", "flag": "🇲🇬" },
    { "code": "MW", "name": "Malawi", "flag": "🇲🇼" },
    { "code": "MY", "name": "Malaysia", "flag": "🇲🇾" },
    { "code": "MV", "name": "Maldives", "flag": "🇲🇻" },
    { "code": "ML", "name": "Mali", "flag": "🇲🇱" },
    { "code": "MT", "name": "Malta", "flag": "🇲🇹" },
    { "code": "MH", "name": "Marshall Islands", "flag": "🇲🇭" },
    { "code": "MQ", "name": "Martinique", "flag": "🇲🇶" },
    { "code": "MR", "name": "Mauritania", "flag": "🇲🇷" },
    { "code": "MU", "name": "Mauritius", "flag": "🇲🇺" },
    { "code": "YT", "name": "Mayotte", "flag": "🇾🇹" },
    { "code": "MX", "name": "Mexico", "flag": "🇲🇽" },
    { "code": "FM", "name": "Micronesia (Federated States of)", "flag": "🇫🇲" },
    { "code": "MD", "name": "Moldova (Republic of)", "flag": "🇲🇩" },
    { "code": "MC", "name": "Monaco", "flag": "🇲🇨" },
    { "code": "MN", "name": "Mongolia", "flag": "🇲🇳" },
    { "code": "ME", "name": "Montenegro", "flag": "🇲🇪" },
    { "code": "MS", "name": "Montserrat", "flag": "🇲🇸" },
    { "code": "MA", "name": "Morocco", "flag": "🇲🇦" },
    { "code": "MZ", "name": "Mozambique", "flag": "🇲🇿" },
    { "code": "MM", "name": "Myanmar", "flag": "🇲🇲" },
    { "code": "NA", "name": "Namibia", "flag": "🇳🇦" },
    { "code": "NR", "name": "Nauru", "flag": "🇳🇷" },
    { "code": "NP", "name": "Nepal", "flag": "🇳🇵" },
    { "code": "NL", "name": "Netherlands", "flag": "🇳🇱" },
    { "code": "NC", "name": "New Caledonia", "flag": "🇳🇨" },
    { "code": "NZ", "name": "New Zealand", "flag": "🇳🇿" },
    { "code": "NI", "name": "Nicaragua", "flag": "🇳🇮" },
    { "code": "NE", "name": "Niger", "flag": "🇳🇪" },
    { "code": "NG", "name": "Nigeria", "flag": "🇳🇬" },
    { "code": "NU", "name": "Niue", "flag": "🇳🇺" },
    { "code": "NF", "name": "Norfolk Island", "flag": "🇳🇫" },
    { "code": "MK", "name": "North Macedonia", "flag": "🇲🇰" },
    { "code": "MP", "name": "Northern Mariana Islands", "flag": "🇲🇵" },
    { "code": "NO", "name": "Norway", "flag": "🇳🇴" },
    { "code": "OM", "name": "Oman", "flag": "🇴🇲" },
    { "code": "PK", "name": "Pakistan", "flag": "🇵🇰" },
    { "code": "PW", "name": "Palau", "flag": "🇵🇼" },
    { "code": "PS", "name": "Palestine, State of", "flag": "🇵🇸" },
    { "code": "PA", "name": "Panama", "flag": "🇵🇦" },
    { "code": "PG", "name": "Papua New Guinea", "flag": "🇵🇬" },
    { "code": "PY", "name": "Paraguay", "flag": "🇵🇾" },
    { "code": "PE", "name": "Peru", "flag": "🇵🇪" },
    { "code": "PH", "name": "Philippines", "flag": "🇵🇭" },
    { "code": "PN", "name": "Pitcairn", "flag": "🇵🇳" },
    { "code": "PL", "name": "Poland", "flag": "🇵🇱" },
    { "code": "PT", "name": "Portugal", "flag": "🇵🇹" },
    { "code": "PR", "name": "Puerto Rico", "flag": "🇵🇷" },
    { "code": "QA", "name": "Qatar", "flag": "🇶🇦" },
    { "code": "RE", "name": "Réunion", "flag": "🇷🇪" },
    { "code": "RO", "name": "Romania", "flag": "🇷🇴" },
    { "code": "RU", "name": "Russian Federation", "flag": "🇷🇺" },
    { "code": "RW", "name": "Rwanda", "flag": "🇷🇼" },
    { "code": "BL", "name": "Saint Barthélemy", "flag": "🇧🇱" },
    { "code": "SH", "name": "Saint Helena, Ascension and Tristan da Cunha", "flag": "🇸🇭" },
    { "code": "KN", "name": "Saint Kitts and Nevis", "flag": "🇰🇳" },
    { "code": "LC", "name": "Saint Lucia", "flag": "🇱🇨" },
    { "code": "MF", "name": "Saint Martin (French part)", "flag": "🇲🇫" },
    { "code": "PM", "name": "Saint Pierre and Miquelon", "flag": "🇵🇲" },
    { "code": "VC", "name": "Saint Vincent and the Grenadines", "flag": "🇻🇨" },
    { "code": "WS", "name": "Samoa", "flag": "🇼🇸" },
    { "code": "SM", "name": "San Marino", "flag": "🇸🇲" },
    { "code": "ST", "name": "Sao Tome and Principe", "flag": "🇸🇹" },
    { "code": "SA", "name": "Saudi Arabia", "flag": "🇸🇦" },
    { "code": "SN", "name": "Senegal", "flag": "🇸🇳" },
    { "code": "RS", "name": "Serbia", "flag": "🇷🇸" },
    { "code": "SC", "name": "Seychelles", "flag": "🇸🇨" },
    { "code": "SL", "name": "Sierra Leone", "flag": "🇸🇱" },
    { "code": "SG", "name": "Singapore", "flag": "🇸🇬" },
    { "code": "SX", "name": "Sint Maarten (Dutch part)", "flag": "🇸🇽" },
    { "code": "SK", "name": "Slovakia", "flag": "🇸🇰" },
    { "code": "SI", "name": "Slovenia", "flag": "🇸🇮" },
    { "code": "SB", "name": "Solomon Islands", "flag": "🇸🇧" },
    { "code": "SO", "name": "Somalia", "flag": "🇸🇴" },
    { "code": "ZA", "name": "South Africa", "flag": "🇿🇦" },
    { "code": "GS", "name": "South Georgia and the South Sandwich Islands", "flag": "🇬🇸" },
    { "code": "SS", "name": "South Sudan", "flag": "🇸🇸" },
    { "code": "ES", "name": "Spain", "flag": "🇪🇸" },
    { "code": "LK", "name": "Sri Lanka", "flag": "🇱🇰" },
    { "code": "SD", "name": "Sudan", "flag": "🇸🇩" },
    { "code": "SR", "name": "Suriname", "flag": "🇸🇷" },
    { "code": "SJ", "name": "Svalbard and Jan Mayen", "flag": "🇸🇯" },
    { "code": "SE", "name": "Sweden", "flag": "🇸🇪" },
    { "code": "CH", "name": "Switzerland", "flag": "🇨🇭" },
    { "code": "SY", "name": "Syrian Arab Republic", "flag": "🇸🇾" },
    { "code": "TW", "name": "Taiwan, Province of China", "flag": "🇹🇼" },
    { "code": "TJ", "name": "Tajikistan", "flag": "🇹🇯" },
    { "code": "TZ", "name": "Tanzania, United Republic of", "flag": "🇹🇿" },
    { "code": "TH", "name": "Thailand", "flag": "🇹🇭" },
    { "code": "TL", "name": "Timor-Leste", "flag": "🇹🇱" },
    { "code": "TG", "name": "Togo", "flag": "🇹🇬" },
    { "code": "TK", "name": "Tokelau", "flag": "🇹🇰" },
    { "code": "TO", "name": "Tonga", "flag": "🇹🇴" },
    { "code": "TT", "name": "Trinidad and Tobago", "flag": "🇹🇹" },
    { "code": "TN", "name": "Tunisia", "flag": "🇹🇳" },
    { "code": "TR", "name": "Turkey", "flag": "🇹🇷" },
    { "code": "TM", "name": "Turkmenistan", "flag": "🇹🇲" },
    { "code": "TC", "name": "Turks and Caicos Islands", "flag": "🇹🇨" },
    { "code": "TV", "name": "Tuvalu", "flag": "🇹🇻" },
    { "code": "UG", "name": "Uganda", "flag": "🇺🇬" },
    { "code": "UA", "name": "Ukraine", "flag": "🇺🇦" },
    { "code": "AE", "name": "United Arab Emirates", "flag": "🇦🇪" },
    { "code": "GB", "name": "United Kingdom of Great Britain and Northern Ireland", "flag": "🇬🇧" },
    { "code": "US", "name": "United States of America", "flag": "🇺🇸" },
    { "code": "UM", "name": "United States Minor Outlying Islands", "flag": "🇺🇲" },
    { "code": "UY", "name": "Uruguay", "flag": "🇺🇾" },
    { "code": "UZ", "name": "Uzbekistan", "flag": "🇺🇿" },
    { "code": "VU", "name": "Vanuatu", "flag": "🇻🇺" },
    { "code": "VE", "name": "Venezuela (Bolivarian Republic of)", "flag": "🇻🇪" },
    { "code": "VN", "name": "Viet Nam", "flag": "🇻🇳" },
    { "code": "VG", "name": "Virgin Islands (British)", "flag": "🇻🇬" },
    { "code": "VI", "name": "Virgin Islands (U.S.)", "flag": "🇻🇮" },
    { "code": "WF", "name": "Wallis and Futuna", "flag": "🇼🇫" },
    { "code": "EH", "name": "Western Sahara", "flag": "🇪🇭" },
    { "code": "YE", "name": "Yemen", "flag": "🇾🇪" },
    { "code": "ZM", "name": "Zambia", "flag": "🇿🇲" },
    { "code": "ZW", "name": "Zimbabwe", "flag": "🇿🇼" }
];

class CountrySelect {
    _elementRef = inject(ElementRef);
    _renderer = inject(Renderer2);
    _formField = inject(FORM_FIELD, { optional: true });
    static nextId = 0;
    id = `ngs-country-select-${CountrySelect.nextId++}`;
    stateChanges = new Subject();
    searchTerm = model('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
    _valueSignal = signal(null, ...(ngDevMode ? [{ debugName: "_valueSignal" }] : /* istanbul ignore next */ []));
    _focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "_focusedSignal" }] : /* istanbul ignore next */ []));
    _touched = false;
    placeholderInputSignal = input('', { ...(ngDevMode ? { debugName: "placeholderInputSignal" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
    isRequiredSignal = model(false, { ...(ngDevMode ? { debugName: "isRequiredSignal" } : /* istanbul ignore next */ {}), alias: 'required' });
    isDisabledSignal = model(false, { ...(ngDevMode ? { debugName: "isDisabledSignal" } : /* istanbul ignore next */ {}), alias: 'disabled' });
    showCountryCode = input(false, { ...(ngDevMode ? { debugName: "showCountryCode" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    internalCountries = countries;
    filteredCountries = computed(() => {
        const term = this.searchTerm();
        const countries = this.internalCountries;
        if (!term || term.trim() === '') {
            return countries;
        }
        const filterValue = term.trim().toLowerCase();
        return countries.filter(country => country.name.toLowerCase().includes(filterValue) ||
            country.code.toLowerCase().includes(filterValue));
    }, ...(ngDevMode ? [{ debugName: "filteredCountries" }] : /* istanbul ignore next */ []));
    selectedCountryDisplay = computed(() => {
        return this.internalCountries.find(c => c.code === this._valueSignal());
    }, ...(ngDevMode ? [{ debugName: "selectedCountryDisplay" }] : /* istanbul ignore next */ []));
    ngsSelect = viewChild.required('ngsSelect');
    searchInput = viewChild.required('searchInput');
    fm = inject(FocusMonitor);
    elRef = inject(ElementRef);
    ngControl = inject(NgControl, { self: true, optional: true });
    destroyRef = inject(DestroyRef);
    opened = output();
    closed = output();
    onChangeFn = () => { };
    onTouchedFn = () => { };
    constructor() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
        this.destroyRef.onDestroy(() => {
            this.fm.stopMonitoring(this.elRef.nativeElement);
            this.stateChanges.complete();
        });
        effect(() => {
            this.onChangeFn(this._valueSignal());
        });
        effect(() => {
            this._valueSignal();
            this._focusedSignal();
            this.isRequiredSignal();
            this.isDisabledSignal();
            this.placeholderInputSignal();
            this.ngControl?.control?.status;
            this.stateChanges.next();
        });
    }
    ngOnInit() {
        if (this.ngControl?.control) {
            const control = this.ngControl.control;
            if (control.validator) {
                const validator = control.validator({});
                if (validator && validator['required']) {
                    this.isRequiredSignal.set(true);
                }
            }
            this.isDisabledSignal.set(control.disabled);
        }
        if (this._formField) {
            this._renderer.addClass(this._formField.elementRef.nativeElement, 'ngs-form-field-type-country-select');
        }
    }
    ngOnDestroy() {
    }
    get value() {
        return this._valueSignal();
    }
    set value(val) {
        this._valueSignal.set(val);
    }
    get focused() {
        return this._focusedSignal() || (this.ngsSelect?.()?.panelOpen() ?? false);
    }
    onFocusIn() {
        if (!this._focusedSignal()) {
            this._focusedSignal.set(true);
            this.stateChanges.next();
        }
    }
    onFocusOut(event) {
        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
            this._touched = true;
            this._focusedSignal.set(false);
            this.onTouchedFn();
            this.stateChanges.next();
        }
    }
    get placeholder() {
        return this.placeholderInputSignal();
    }
    set placeholder(plh) {
        this.stateChanges.next();
    }
    get required() {
        return this.isRequiredSignal();
    }
    set required(req) {
        this.isRequiredSignal.set(coerceBooleanProperty(req));
    }
    get disabled() {
        return this.isDisabledSignal();
    }
    set disabled(dis) {
        this.isDisabledSignal.set(coerceBooleanProperty(dis));
    }
    get empty() {
        return !this._valueSignal();
    }
    get shouldLabelFloat() {
        return this._focusedSignal() || !this.empty;
    }
    get errorState() {
        return !!(this.ngControl?.invalid && (this.ngControl?.touched || this._touched));
    }
    get touched() {
        return this._touched;
    }
    setDescribedByIds(ids) {
        const controlElement = this.elRef.nativeElement.querySelector('.select-trigger');
        if (controlElement) {
            controlElement.setAttribute('aria-describedby', ids.join(' '));
        }
    }
    onContainerClick() {
        if (this.disabled) {
            return;
        }
        this._focusedSignal.set(true);
        this.ngsSelect().open();
    }
    writeValue(value) {
        this._valueSignal.set(value);
    }
    registerOnChange(fn) {
        this.onChangeFn = fn;
    }
    registerOnTouched(fn) {
        this.onTouchedFn = () => {
            this._touched = true;
            fn();
            this.stateChanges.next();
        };
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    onSelectionChange(event) {
        this.value = event.value;
        this.onTouchedFn();
    }
    clearSearch(event) {
        event.stopPropagation();
        this.searchTerm.set('');
        this.searchInput().nativeElement.focus();
    }
    onSelectOpened() {
        setTimeout(() => {
            this.searchInput().nativeElement.focus();
        });
        this.opened.emit();
    }
    onSelectClosed() {
        this._focusedSignal.set(false);
        this.searchTerm.set('');
        if (!this._touched) {
            this.onTouchedFn();
        }
        this.closed.emit();
    }
    focus() {
        this.ngsSelect()?.focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountrySelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CountrySelect, isStandalone: true, selector: "ngs-country-select", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, placeholderInputSignal: { classPropertyName: "placeholderInputSignal", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequiredSignal: { classPropertyName: "isRequiredSignal", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isDisabledSignal: { classPropertyName: "isDisabledSignal", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCountryCode: { classPropertyName: "showCountryCode", publicName: "showCountryCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange", isRequiredSignal: "requiredChange", isDisabledSignal: "disabledChange", opened: "opened", closed: "closed" }, host: { listeners: { "focus": "onFocusIn()", "blur": "onFocusOut($event)" }, properties: { "class.floating": "shouldLabelFloat", "id": "id", "attr.tabindex": "disabled ? -1 : 0" }, classAttribute: "ngs-country-select" }, providers: [
            {
                provide: FormFieldControl,
                useExisting: forwardRef(() => CountrySelect),
            },
        ], viewQueries: [{ propertyName: "ngsSelect", first: true, predicate: ["ngsSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["ngsCountrySelect"], ngImport: i0, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountry = selectedCountryDisplay();\n    @if (selectedCountry) {\n      <div class=\"flex items-center gap-2\">\n        <span class=\"text-xl leading-[0]\">{{ selectedCountry.flag }}</span>\n        {{ selectedCountry.name }}\n        @if (showCountryCode()) {\n          <span class=\"code\">({{ selectedCountry.code }})</span>\n        }\n      </div>\n    }\n\n    @if (!selectedCountryDisplay() && placeholder) {\n      <div class=\"placeholder-text\">\n        {{ placeholder }}\n      </div>\n    }\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"searchTerm\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of filteredCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <div class=\"flex items-center gap-2 h-full\">\n        <span class=\"text-xl leading-[0]\">{{ country.flag }}</span>\n        {{ country.name }}\n        @if (showCountryCode()) {\n          <span class=\"code\">({{ country.code }})</span>\n        }\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "ariaLabel", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "directive", type: SelectTrigger, selector: "ngs-select-trigger" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: SelectHeader, selector: "ngs-select-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountrySelect, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-country-select', standalone: true, exportAs: 'ngsCountrySelect', providers: [
                        {
                            provide: FormFieldControl,
                            useExisting: forwardRef(() => CountrySelect),
                        },
                    ], host: {
                        'class': 'ngs-country-select',
                        '[class.floating]': 'shouldLabelFloat',
                        '[id]': 'id',
                        '[attr.tabindex]': 'disabled ? -1 : 0',
                        '(focus)': 'onFocusIn()',
                        '(blur)': 'onFocusOut($event)',
                    }, imports: [
                        Option,
                        Icon,
                        Select,
                        SelectTrigger,
                        ReactiveFormsModule,
                        Button,
                        SelectHeader,
                        FormsModule
                    ], template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountry = selectedCountryDisplay();\n    @if (selectedCountry) {\n      <div class=\"flex items-center gap-2\">\n        <span class=\"text-xl leading-[0]\">{{ selectedCountry.flag }}</span>\n        {{ selectedCountry.name }}\n        @if (showCountryCode()) {\n          <span class=\"code\">({{ selectedCountry.code }})</span>\n        }\n      </div>\n    }\n\n    @if (!selectedCountryDisplay() && placeholder) {\n      <div class=\"placeholder-text\">\n        {{ placeholder }}\n      </div>\n    }\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"searchTerm\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of filteredCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <div class=\"flex items-center gap-2 h-full\">\n        <span class=\"text-xl leading-[0]\">{{ country.flag }}</span>\n        {{ country.name }}\n        @if (showCountryCode()) {\n          <span class=\"code\">({{ country.code }})</span>\n        }\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }], placeholderInputSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequiredSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], isDisabledSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], showCountryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCountryCode", required: false }] }], ngsSelect: [{ type: i0.ViewChild, args: ['ngsSelect', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { CountrySelect, countries };
//# sourceMappingURL=ngstarter-ui-components-country-select.mjs.map
