@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-country-select.mjs

@@ -0,0 +1,489 @@
+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=\"px-3 py-3 rounded-t sticky top-0 z-1\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"searchTerm\"\n             class=\"w-full bg-surface-container-low text-sm focus:outline-none rounded-[var(--input-radius)]\n                  focus:bg-surface-container-lowest focus:shadow-sm h-12 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-4 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(--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=\"px-3 py-3 rounded-t sticky top-0 z-1\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"searchTerm\"\n             class=\"w-full bg-surface-container-low text-sm focus:outline-none rounded-[var(--input-radius)]\n                  focus:bg-surface-container-lowest focus:shadow-sm h-12 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-4 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(--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