@ngstarter-ui/components 1.0.21

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

@@ -0,0 +1,397 @@
+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, FormsModule } from '@angular/forms';
+import { FORM_FIELD, FormFieldControl } from '@ngstarter-ui/components/form-field';
+import { Option, Select, SelectHeader, SelectTrigger } 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 currencies = [
+    { "code": "AED", "name": "UAE Dirham", "symbol": "د.إ", "countryCode": "AE", "flag": "🇦🇪" },
+    { "code": "AFN", "name": "Afghan Afghani", "symbol": "؋", "countryCode": "AF", "flag": "🇦🇫" },
+    { "code": "ALL", "name": "Albanian Lek", "symbol": "L", "countryCode": "AL", "flag": "🇦🇱" },
+    { "code": "AMD", "name": "Armenian Dram", "symbol": "֏", "countryCode": "AM", "flag": "🇦🇲" },
+    { "code": "ANG", "name": "Netherlands Antillean Guilder", "symbol": "ƒ", "countryCode": "AN", "flag": "🇦🇳" },
+    { "code": "AOA", "name": "Angolan Kwanza", "symbol": "Kz", "countryCode": "AO", "flag": "🇦🇴" },
+    { "code": "ARS", "name": "Argentine Peso", "symbol": "$", "countryCode": "AR", "flag": "🇦🇷" },
+    { "code": "AUD", "name": "Australian Dollar", "symbol": "$", "countryCode": "AU", "flag": "🇦🇺" },
+    { "code": "AWG", "name": "Aruban Florin", "symbol": "ƒ", "countryCode": "AW", "flag": "🇦🇼" },
+    { "code": "AZN", "name": "Azerbaijani Manat", "symbol": "₼", "countryCode": "AZ", "flag": "🇦🇿" },
+    { "code": "BAM", "name": "Bosnia-Herzegovina Convertible Mark", "symbol": "KM", "countryCode": "BA", "flag": "🇧🇦" },
+    { "code": "BBD", "name": "Barbadian Dollar", "symbol": "$", "countryCode": "BB", "flag": "🇧🇧" },
+    { "code": "BDT", "name": "Bangladeshi Taka", "symbol": "৳", "countryCode": "BD", "flag": "🇧🇩" },
+    { "code": "BGN", "name": "Bulgarian Lev", "symbol": "лв", "countryCode": "BG", "flag": "🇧🇬" },
+    { "code": "BHD", "name": "Bahraini Dinar", "symbol": ".د.ب", "countryCode": "BH", "flag": "🇧🇭" },
+    { "code": "BIF", "name": "Burundian Franc", "symbol": "FBu", "countryCode": "BI", "flag": "🇧🇮" },
+    { "code": "BMD", "name": "Bermudan Dollar", "symbol": "$", "countryCode": "BM", "flag": "🇧🇲" },
+    { "code": "BND", "name": "Brunei Dollar", "symbol": "$", "countryCode": "BN", "flag": "🇧🇳" },
+    { "code": "BOB", "name": "Bolivian Boliviano", "symbol": "Bs.", "countryCode": "BO", "flag": "🇧🇴" },
+    { "code": "BRL", "name": "Brazilian Real", "symbol": "R$", "countryCode": "BR", "flag": "🇧🇷" },
+    { "code": "BSD", "name": "Bahamian Dollar", "symbol": "$", "countryCode": "BS", "flag": "🇧🇸" },
+    { "code": "BTN", "name": "Bhutanese Ngultrum", "symbol": "Nu.", "countryCode": "BT", "flag": "🇧🇹" },
+    { "code": "BWP", "name": "Botswanan Pula", "symbol": "P", "countryCode": "BW", "flag": "🇧🇼" },
+    { "code": "BYN", "name": "Belarusian Ruble", "symbol": "Br", "countryCode": "BY", "flag": "🇧🇾" },
+    { "code": "BZD", "name": "Belize Dollar", "symbol": "BZ$", "countryCode": "BZ", "flag": "🇧🇿" },
+    { "code": "CAD", "name": "Canadian Dollar", "symbol": "$", "countryCode": "CA", "flag": "🇨🇦" },
+    { "code": "CDF", "name": "Congolese Franc", "symbol": "FC", "countryCode": "CD", "flag": "🇨🇩" },
+    { "code": "CHF", "name": "Swiss Franc", "symbol": "CHF", "countryCode": "CH", "flag": "🇨🇭" },
+    { "code": "CLP", "name": "Chilean Peso", "symbol": "$", "countryCode": "CL", "flag": "🇨🇱" },
+    { "code": "CNY", "name": "Chinese Yuan", "symbol": "¥", "countryCode": "CN", "flag": "🇨🇳" },
+    { "code": "COP", "name": "Colombian Peso", "symbol": "$", "countryCode": "CO", "flag": "🇨🇴" },
+    { "code": "CRC", "name": "Costa Rican Colón", "symbol": "₡", "countryCode": "CR", "flag": "🇨🇷" },
+    { "code": "CUP", "name": "Cuban Peso", "symbol": "₱", "countryCode": "CU", "flag": "🇨🇺" },
+    { "code": "CVE", "name": "Cape Verdean Escudo", "symbol": "$", "countryCode": "CV", "flag": "🇨🇻" },
+    { "code": "CZK", "name": "Czech Koruna", "symbol": "Kč", "countryCode": "CZ", "flag": "🇨🇿" },
+    { "code": "DJF", "name": "Djiboutian Franc", "symbol": "Fdj", "countryCode": "DJ", "flag": "🇩🇯" },
+    { "code": "DKK", "name": "Danish Krone", "symbol": "kr", "countryCode": "DK", "flag": "🇩🇰" },
+    { "code": "DOP", "name": "Dominican Peso", "symbol": "RD$", "countryCode": "DO", "flag": "🇩🇴" },
+    { "code": "DZD", "name": "Algerian Dinar", "symbol": "د.ج", "countryCode": "DZ", "flag": "🇩🇿" },
+    { "code": "EGP", "name": "Egyptian Pound", "symbol": "£", "countryCode": "EG", "flag": "🇪🇬" },
+    { "code": "ERN", "name": "Eritrean Nakfa", "symbol": "Nfk", "countryCode": "ER", "flag": "🇪🇷" },
+    { "code": "ETB", "name": "Ethiopian Birr", "symbol": "Br", "countryCode": "ET", "flag": "🇪🇹" },
+    { "code": "EUR", "name": "Euro", "symbol": "€", "countryCode": "EU", "flag": "🇪🇺" },
+    { "code": "FJD", "name": "Fijian Dollar", "symbol": "$", "countryCode": "FJ", "flag": "🇫🇯" },
+    { "code": "FKP", "name": "Falkland Islands Pound", "symbol": "£", "countryCode": "FK", "flag": "🇫🇰" },
+    { "code": "GBP", "name": "British Pound", "symbol": "£", "countryCode": "GB", "flag": "🇬🇧" },
+    { "code": "GEL", "name": "Georgian Lari", "symbol": "₾", "countryCode": "GE", "flag": "🇬🇪" },
+    { "code": "GHS", "name": "Ghanaian Cedi", "symbol": "GH₵", "countryCode": "GH", "flag": "🇬🇭" },
+    { "code": "GIP", "name": "Gibraltar Pound", "symbol": "£", "countryCode": "GI", "flag": "🇬🇮" },
+    { "code": "GMD", "name": "Gambian Dalasi", "symbol": "D", "countryCode": "GM", "flag": "🇬🇲" },
+    { "code": "GNF", "name": "Guinean Franc", "symbol": "FG", "countryCode": "GN", "flag": "🇬🇳" },
+    { "code": "GTQ", "name": "Guatemalan Quetzal", "symbol": "Q", "countryCode": "GT", "flag": "🇬🇹" },
+    { "code": "GYD", "name": "Guyanaese Dollar", "symbol": "$", "countryCode": "GY", "flag": "🇬🇾" },
+    { "code": "HKD", "name": "Hong Kong Dollar", "symbol": "$", "countryCode": "HK", "flag": "🇭🇰" },
+    { "code": "HNL", "name": "Honduran Lempira", "symbol": "L", "countryCode": "HN", "flag": "🇭🇳" },
+    { "code": "HRK", "name": "Croatian Kuna", "symbol": "kn", "countryCode": "HR", "flag": "🇭🇷" },
+    { "code": "HTG", "name": "Haitian Gourde", "symbol": "G", "countryCode": "HT", "flag": "🇭🇹" },
+    { "code": "HUF", "name": "Hungarian Forint", "symbol": "Ft", "countryCode": "HU", "flag": "🇭🇺" },
+    { "code": "IDR", "name": "Indonesian Rupiah", "symbol": "Rp", "countryCode": "ID", "flag": "🇮🇩" },
+    { "code": "ILS", "name": "Israeli New Shekel", "symbol": "₪", "countryCode": "IL", "flag": "🇮🇱" },
+    { "code": "INR", "name": "Indian Rupee", "symbol": "₹", "countryCode": "IN", "flag": "🇮🇳" },
+    { "code": "IQD", "name": "Iraqi Dinar", "symbol": "ع.د", "countryCode": "IQ", "flag": "🇮🇶" },
+    { "code": "IRR", "name": "Iranian Rial", "symbol": "﷼", "countryCode": "IR", "flag": "🇮🇷" },
+    { "code": "ISK", "name": "Icelandic Króna", "symbol": "kr", "countryCode": "IS", "flag": "🇮🇸" },
+    { "code": "JMD", "name": "Jamaican Dollar", "symbol": "J$", "countryCode": "JM", "flag": "🇯🇲" },
+    { "code": "JOD", "name": "Jordanian Dinar", "symbol": "JD", "countryCode": "JO", "flag": "🇯🇴" },
+    { "code": "JPY", "name": "Japanese Yen", "symbol": "¥", "countryCode": "JP", "flag": "🇯🇵" },
+    { "code": "KES", "name": "Kenyan Shilling", "symbol": "KSh", "countryCode": "KE", "flag": "🇰🇪" },
+    { "code": "KGS", "name": "Kyrgystani Som", "symbol": "с", "countryCode": "KG", "flag": "🇰🇬" },
+    { "code": "KHR", "name": "Cambodian Riel", "symbol": "៛", "countryCode": "KH", "flag": "🇰🇭" },
+    { "code": "KMF", "name": "Comorian Franc", "symbol": "CF", "countryCode": "KM", "flag": "🇰🇲" },
+    { "code": "KPW", "name": "North Korean Won", "symbol": "₩", "countryCode": "KP", "flag": "🇰🇵" },
+    { "code": "KRW", "name": "South Korean Won", "symbol": "₩", "countryCode": "KR", "flag": "🇰🇷" },
+    { "code": "KWD", "name": "Kuwaiti Dinar", "symbol": "د.ك", "countryCode": "KW", "flag": "🇰🇼" },
+    { "code": "KYD", "name": "Cayman Islands Dollar", "symbol": "$", "countryCode": "KY", "flag": "🇰🇾" },
+    { "code": "KZT", "name": "Kazakhstani Tenge", "symbol": "₸", "countryCode": "KZ", "flag": "🇰🇿" },
+    { "code": "LAK", "name": "Laotian Kip", "symbol": "₭", "countryCode": "LA", "flag": "🇱🇦" },
+    { "code": "LBP", "name": "Lebanese Pound", "symbol": "£", "countryCode": "LB", "flag": "🇱🇧" },
+    { "code": "LKR", "name": "Sri Lankan Rupee", "symbol": "₨", "countryCode": "LK", "flag": "🇱🇰" },
+    { "code": "LRD", "name": "Liberian Dollar", "symbol": "$", "countryCode": "LR", "flag": "🇱🇷" },
+    { "code": "LSL", "name": "Lesotho Loti", "symbol": "L", "countryCode": "LS", "flag": "🇱🇸" },
+    { "code": "LYD", "name": "Libyan Dinar", "symbol": "ل.د", "countryCode": "LY", "flag": "🇱🇾" },
+    { "code": "MAD", "name": "Moroccan Dirham", "symbol": "د.م.", "countryCode": "MA", "flag": "🇲🇦" },
+    { "code": "MDL", "name": "Moldovan Leu", "symbol": "L", "countryCode": "MD", "flag": "🇲🇩" },
+    { "code": "MGA", "name": "Malagasy Ariary", "symbol": "Ar", "countryCode": "MG", "flag": "🇲🇬" },
+    { "code": "MKD", "name": "Macedonian Denar", "symbol": "ден", "countryCode": "MK", "flag": "🇲🇰" },
+    { "code": "MMK", "name": "Myanma Kyat", "symbol": "K", "countryCode": "MM", "flag": "🇲🇲" },
+    { "code": "MNT", "name": "Mongolian Tugrik", "symbol": "₮", "countryCode": "MN", "flag": "🇲🇳" },
+    { "code": "MOP", "name": "Macanese Pataca", "symbol": "MOP$", "countryCode": "MO", "flag": "🇲🇴" },
+    { "code": "MRU", "name": "Mauritanian Ouguiya", "symbol": "UM", "countryCode": "MR", "flag": "🇲🇷" },
+    { "code": "MUR", "name": "Mauritian Rupee", "symbol": "₨", "countryCode": "MU", "flag": "🇲🇺" },
+    { "code": "MVR", "name": "Maldivian Rufiyaa", "symbol": ".ރ", "countryCode": "MV", "flag": "🇲🇻" },
+    { "code": "MWK", "name": "Malawian Kwacha", "symbol": "MK", "countryCode": "MW", "flag": "🇲🇼" },
+    { "code": "MXN", "name": "Mexican Peso", "symbol": "$", "countryCode": "MX", "flag": "🇲🇽" },
+    { "code": "MYR", "name": "Malaysian Ringgit", "symbol": "RM", "countryCode": "MY", "flag": "🇲🇾" },
+    { "code": "MZN", "name": "Mozambican Metical", "symbol": "MT", "countryCode": "MZ", "flag": "🇲🇿" },
+    { "code": "NAD", "name": "Namibian Dollar", "symbol": "$", "countryCode": "NA", "flag": "🇳🇦" },
+    { "code": "NGN", "name": "Nigerian Naira", "symbol": "₦", "countryCode": "NG", "flag": "🇳🇬" },
+    { "code": "NIO", "name": "Nicaraguan Córdoba", "symbol": "C$", "countryCode": "NI", "flag": "🇳🇮" },
+    { "code": "NOK", "name": "Norwegian Krone", "symbol": "kr", "countryCode": "NO", "flag": "🇳🇴" },
+    { "code": "NPR", "name": "Nepalese Rupee", "symbol": "₨", "countryCode": "NP", "flag": "🇳🇵" },
+    { "code": "NZD", "name": "New Zealand Dollar", "symbol": "$", "countryCode": "NZ", "flag": "🇳🇿" },
+    { "code": "OMR", "name": "Omani Rial", "symbol": "ر.ع.", "countryCode": "OM", "flag": "🇴🇲" },
+    { "code": "PAB", "name": "Panamanian Balboa", "symbol": "B/.", "countryCode": "PA", "flag": "🇵🇦" },
+    { "code": "PEN", "name": "Peruvian Nuevo Sol", "symbol": "S/.", "countryCode": "PE", "flag": "🇵🇪" },
+    { "code": "PGK", "name": "Papua New Guinean Kina", "symbol": "K", "countryCode": "PG", "flag": "🇵🇬" },
+    { "code": "PHP", "name": "Philippine Peso", "symbol": "₱", "countryCode": "PH", "flag": "🇵🇭" },
+    { "code": "PKR", "name": "Pakistani Rupee", "symbol": "₨", "countryCode": "PK", "flag": "🇵🇰" },
+    { "code": "PLN", "name": "Polish Złoty", "symbol": "zł", "countryCode": "PL", "flag": "🇵🇱" },
+    { "code": "PYG", "name": "Paraguayan Guarani", "symbol": "₲", "countryCode": "PY", "flag": "🇵🇾" },
+    { "code": "QAR", "name": "Qatari Riyal", "symbol": "ر.ق", "countryCode": "QA", "flag": "🇶🇦" },
+    { "code": "RON", "name": "Romanian Leu", "symbol": "lei", "countryCode": "RO", "flag": "🇷🇴" },
+    { "code": "RSD", "name": "Serbian Dinar", "symbol": "дин.", "countryCode": "RS", "flag": "🇷🇸" },
+    { "code": "RUB", "name": "Russian Ruble", "symbol": "₽", "countryCode": "RU", "flag": "🇷🇺" },
+    { "code": "RWF", "name": "Rwandan Franc", "symbol": "R₣", "countryCode": "RW", "flag": "🇷🇼" },
+    { "code": "SAR", "name": "Saudi Riyal", "symbol": "ر.س", "countryCode": "SA", "flag": "🇸🇦" },
+    { "code": "SBD", "name": "Solomon Islands Dollar", "symbol": "$", "countryCode": "SB", "flag": "🇸🇧" },
+    { "code": "SCR", "name": "Seychellois Rupee", "symbol": "₨", "countryCode": "SC", "flag": "🇸🇨" },
+    { "code": "SDG", "name": "Sudanese Pound", "symbol": "ج.س.", "countryCode": "SD", "flag": "🇸🇩" },
+    { "code": "SEK", "name": "Swedish Krona", "symbol": "kr", "countryCode": "SE", "flag": "🇸🇪" },
+    { "code": "SGD", "name": "Singapore Dollar", "symbol": "$", "countryCode": "SG", "flag": "🇸🇬" },
+    { "code": "SHP", "name": "Saint Helena Pound", "symbol": "£", "countryCode": "SH", "flag": "🇸🇭" },
+    { "code": "SLL", "name": "Sierra Leonean Leone", "symbol": "Le", "countryCode": "SL", "flag": "🇸🇱" },
+    { "code": "SOS", "name": "Somali Shilling", "symbol": "S", "countryCode": "SO", "flag": "🇸🇴" },
+    { "code": "SRD", "name": "Surinamese Dollar", "symbol": "$", "countryCode": "SR", "flag": "🇸🇷" },
+    { "code": "SSP", "name": "South Sudanese Pound", "symbol": "£", "countryCode": "SS", "flag": "🇸🇸" },
+    { "code": "STN", "name": "São Tomé and Príncipe Dobra", "symbol": "Db", "countryCode": "ST", "flag": "🇸🇹" },
+    { "code": "SVC", "name": "Salvadoran Colón", "symbol": "$", "countryCode": "SV", "flag": "🇸🇻" },
+    { "code": "SYP", "name": "Syrian Pound", "symbol": "£", "countryCode": "SY", "flag": "🇸🇾" },
+    { "code": "SZL", "name": "Swazi Lilangeni", "symbol": "L", "countryCode": "SZ", "flag": "🇸🇿" },
+    { "code": "THB", "name": "Thai Baht", "symbol": "฿", "countryCode": "TH", "flag": "🇹🇭" },
+    { "code": "TJS", "name": "Tajikistani Somoni", "symbol": "SM", "countryCode": "TJ", "flag": "🇹🇯" },
+    { "code": "TMT", "name": "Turkmenistani Manat", "symbol": "T", "countryCode": "TM", "flag": "🇹🇲" },
+    { "code": "TND", "name": "Tunisian Dinar", "symbol": "د.ت", "countryCode": "TN", "flag": "🇹🇳" },
+    { "code": "TOP", "name": "Tongan Paʻanga", "symbol": "T$", "countryCode": "TO", "flag": "🇹🇴" },
+    { "code": "TRY", "name": "Turkish Lira", "symbol": "₺", "countryCode": "TR", "flag": "🇹🇷" },
+    { "code": "TTD", "name": "Trinidad and Tobago Dollar", "symbol": "TT$", "countryCode": "TT", "flag": "🇹🇹" },
+    { "code": "TWD", "name": "New Taiwan Dollar", "symbol": "NT$", "countryCode": "TW", "flag": "🇹🇼" },
+    { "code": "TZS", "name": "Tanzanian Shilling", "symbol": "TSh", "countryCode": "TZ", "flag": "🇹🇿" },
+    { "code": "UAH", "name": "Ukrainian Hryvnia", "symbol": "₴", "countryCode": "UA", "flag": "🇺🇦" },
+    { "code": "UGX", "name": "Ugandan Shilling", "symbol": "USh", "countryCode": "UG", "flag": "🇺🇬" },
+    { "code": "USD", "name": "United States Dollar", "symbol": "$", "countryCode": "US", "flag": "🇺🇸" },
+    { "code": "UYU", "name": "Uruguayan Peso", "symbol": "$U", "countryCode": "UY", "flag": "🇺🇾" },
+    { "code": "UZS", "name": "Uzbekistani Som", "symbol": "сўм", "countryCode": "UZ", "flag": "🇺🇿" },
+    { "code": "VEF", "name": "Venezuelan Bolívar Fuerte", "symbol": "Bs", "countryCode": "VE", "flag": "🇻🇪" },
+    { "code": "VND", "name": "Vietnamese Dong", "symbol": "₫", "countryCode": "VN", "flag": "🇻🇳" },
+    { "code": "VUV", "name": "Vanuatu Vatu", "symbol": "VT", "countryCode": "VU", "flag": "🇻🇺" },
+    { "code": "WST", "name": "Samoan Tala", "symbol": "WS$", "countryCode": "WS", "flag": "🇼🇸" },
+    { "code": "XAF", "name": "CFA Franc BEAC", "symbol": "FCFA", "countryCode": "CM", "flag": "🇨🇲" },
+    { "code": "XCD", "name": "East Caribbean Dollar", "symbol": "$", "countryCode": "AG", "flag": "🇦🇬" },
+    { "code": "XOF", "name": "CFA Franc BCEAO", "symbol": "CFA", "countryCode": "BJ", "flag": "🇧🇯" },
+    { "code": "XPF", "name": "CFP Franc", "symbol": "₣", "countryCode": "PF", "flag": "🇵🇫" },
+    { "code": "YER", "name": "Yemeni Rial", "symbol": "﷼", "countryCode": "YE", "flag": "🇾🇪" },
+    { "code": "ZAR", "name": "South African Rand", "symbol": "R", "countryCode": "ZA", "flag": "🇿🇦" },
+    { "code": "ZMW", "name": "Zambian Kwacha", "symbol": "ZK", "countryCode": "ZM", "flag": "🇿🇲" },
+    { "code": "ZWL", "name": "Zimbabwean Dollar", "symbol": "$", "countryCode": "ZW", "flag": "🇿🇼" }
+];
+
+class CurrencySelect {
+    _elementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    _formField = inject(FORM_FIELD, { optional: true });
+    static nextId = 0;
+    id = `ngs-currency-select-${CurrencySelect.nextId++}`;
+    stateChanges = new Subject();
+    controlType = 'ngs-currency-select';
+    autofilled;
+    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' });
+    showCountryName = input(false, { ...(ngDevMode ? { debugName: "showCountryName" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    internalCurrencies = currencies;
+    filteredCurrencies = computed(() => {
+        const term = this.searchTerm();
+        const currencies = this.internalCurrencies;
+        if (!term || term.trim() === '') {
+            return currencies;
+        }
+        const filterValue = term.trim().toLowerCase();
+        return currencies.filter(currency => currency.name.toLowerCase().includes(filterValue) ||
+            currency.code.toLowerCase().includes(filterValue));
+    }, ...(ngDevMode ? [{ debugName: "filteredCurrencies" }] : /* istanbul ignore next */ []));
+    selectedCurrencyDisplay = computed(() => {
+        return this.internalCurrencies.find(c => c.code === this._valueSignal());
+    }, ...(ngDevMode ? [{ debugName: "selectedCurrencyDisplay" }] : /* istanbul ignore next */ []));
+    ngsSelect = viewChild('ngsSelect', ...(ngDevMode ? [{ debugName: "ngsSelect" }] : /* istanbul ignore next */ []));
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
+    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-currency-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: CurrencySelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CurrencySelect, isStandalone: true, selector: "ngs-currency-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 }, showCountryName: { classPropertyName: "showCountryName", publicName: "showCountryName", 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-currency-select" }, providers: [
+            {
+                provide: FormFieldControl,
+                useExisting: forwardRef(() => CurrencySelect),
+            },
+        ], viewQueries: [{ propertyName: "ngsSelect", first: true, predicate: ["ngsSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["ngsCurrencySelect"], 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 selectedCurrency = selectedCurrencyDisplay();\n    @if (selectedCurrency) {\n      <div class=\"flex items-center gap-2\">\n        <span class=\"text-xl leading-[0]\">{{ selectedCurrency.flag }}</span>\n        <div>\n          <span class=\"currency-code\">\n            {{ selectedCurrency.code }}\n            <span class=\"text-neutral-500 inline-block ms-0.5\">{{ selectedCurrency.symbol }}</span>\n          </span>\n          @if (showCountryName()) {\n            &ndash; {{ selectedCurrency.name }}\n          }\n        </div>\n      </div>\n    }\n\n    @if (!selectedCurrencyDisplay() && 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 (currency of filteredCurrencies(); track currency.code) {\n    <ngs-option [value]=\"currency.code\">\n      <div class=\"flex items-center gap-2 h-full\">\n        <span class=\"text-xl leading-[0]\">{{ currency.flag }}</span>\n        <div>\n          <span class=\"currency-code uppercase\">\n            {{ currency.code }}\n            <span class=\"text-neutral-500 inline-block ms-0.5\">{{ currency.symbol }}</span>\n          </span>\n          @if (showCountryName()) {\n            &ndash; {{ currency.name }}\n          }\n        </div>\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Currency not found</span>.\n      </div>\n    }\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .currency-code{text-transform:uppercase}\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: "component", type: SelectHeader, selector: "ngs-select-header" }, { kind: "directive", type: SelectTrigger, selector: "ngs-select-trigger" }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CurrencySelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-currency-select', exportAs: 'ngsCurrencySelect', providers: [
+                        {
+                            provide: FormFieldControl,
+                            useExisting: forwardRef(() => CurrencySelect),
+                        },
+                    ], host: {
+                        'class': 'ngs-currency-select',
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : 0',
+                        '(focus)': 'onFocusIn()',
+                        '(blur)': 'onFocusOut($event)',
+                    }, imports: [
+                        Option,
+                        Icon,
+                        Select,
+                        SelectHeader,
+                        SelectTrigger,
+                        FormsModule,
+                        Button
+                    ], 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 selectedCurrency = selectedCurrencyDisplay();\n    @if (selectedCurrency) {\n      <div class=\"flex items-center gap-2\">\n        <span class=\"text-xl leading-[0]\">{{ selectedCurrency.flag }}</span>\n        <div>\n          <span class=\"currency-code\">\n            {{ selectedCurrency.code }}\n            <span class=\"text-neutral-500 inline-block ms-0.5\">{{ selectedCurrency.symbol }}</span>\n          </span>\n          @if (showCountryName()) {\n            &ndash; {{ selectedCurrency.name }}\n          }\n        </div>\n      </div>\n    }\n\n    @if (!selectedCurrencyDisplay() && 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 (currency of filteredCurrencies(); track currency.code) {\n    <ngs-option [value]=\"currency.code\">\n      <div class=\"flex items-center gap-2 h-full\">\n        <span class=\"text-xl leading-[0]\">{{ currency.flag }}</span>\n        <div>\n          <span class=\"currency-code uppercase\">\n            {{ currency.code }}\n            <span class=\"text-neutral-500 inline-block ms-0.5\">{{ currency.symbol }}</span>\n          </span>\n          @if (showCountryName()) {\n            &ndash; {{ currency.name }}\n          }\n        </div>\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Currency not found</span>.\n      </div>\n    }\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .currency-code{text-transform:uppercase}\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"] }], showCountryName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCountryName", 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 { CurrencySelect, currencies };
+//# sourceMappingURL=ngstarter-ui-components-currency-select.mjs.map