@cognivo/components 0.8.0

package/dist/components/cg-phone-input/cg-phone-input.js

@@ -0,0 +1,972 @@
+import { css as w, LitElement as x, html as p, nothing as g } from "lit";
+import { property as d, state as f, query as y, customElement as S } from "lit/decorators.js";
+import { h as I, r as M } from "../../chunks/premium.css-9I4kHrsl.js";
+import { b as k } from "../../chunks/outside-click-CP1P1fK3.js";
+const e = (t, a, s, n, c, l) => {
+  const i = t.toUpperCase().split("").map((_) => 127462 + _.charCodeAt(0) - 65), u = String.fromCodePoint(...i), h = { iso2: t, name: a, dialCode: s, flag: u };
+  return n !== void 0 && (h.format = n), c !== void 0 && (h.minLength = c), l !== void 0 && (h.maxLength = l), h;
+}, b = [
+  e("AF", "Afghanistan", "93", "70 123 4567", 9, 9),
+  e("AL", "Albania", "355", "67 212 3456", 9, 9),
+  e("DZ", "Algeria", "213", "551 23 45 67", 9, 9),
+  e("AS", "American Samoa", "1684", "684-733-1234", 7, 7),
+  e("AD", "Andorra", "376", "312 345", 6, 9),
+  e("AO", "Angola", "244", "923 123 456", 9, 9),
+  e("AI", "Anguilla", "1264", "264-235-1234", 7, 7),
+  e("AG", "Antigua and Barbuda", "1268", "268-464-1234", 7, 7),
+  e("AR", "Argentina", "54", "11 1234-5678", 10, 11),
+  e("AM", "Armenia", "374", "77 123456", 8, 8),
+  e("AW", "Aruba", "297", "560 1234", 7, 7),
+  e("AU", "Australia", "61", "412 345 678", 9, 9),
+  e("AT", "Austria", "43", "664 123456", 10, 11),
+  e("AZ", "Azerbaijan", "994", "40 123 45 67", 9, 9),
+  e("BS", "Bahamas", "1242", "242-359-1234", 7, 7),
+  e("BH", "Bahrain", "973", "3600 1234", 8, 8),
+  e("BD", "Bangladesh", "880", "1812-345678", 10, 10),
+  e("BB", "Barbados", "1246", "246-250-1234", 7, 7),
+  e("BY", "Belarus", "375", "29 491-19-11", 9, 9),
+  e("BE", "Belgium", "32", "470 12 34 56", 9, 9),
+  e("BZ", "Belize", "501", "622-1234", 7, 7),
+  e("BJ", "Benin", "229", "90 01 12 34", 8, 8),
+  e("BM", "Bermuda", "1441", "441-370-1234", 7, 7),
+  e("BT", "Bhutan", "975", "17 12 34 56", 8, 8),
+  e("BO", "Bolivia", "591", "71234567", 8, 8),
+  e("BA", "Bosnia and Herzegovina", "387", "61 123 456", 8, 9),
+  e("BW", "Botswana", "267", "71 123 456", 8, 8),
+  e("BR", "Brazil", "55", "11 96123-4567", 10, 11),
+  e("IO", "British Indian Ocean Territory", "246", "380 1234", 7, 7),
+  e("VG", "British Virgin Islands", "1284", "284-300-1234", 7, 7),
+  e("BN", "Brunei", "673", "712 3456", 7, 7),
+  e("BG", "Bulgaria", "359", "48 123 456", 9, 9),
+  e("BF", "Burkina Faso", "226", "70 12 34 56", 8, 8),
+  e("BI", "Burundi", "257", "79 56 12 34", 8, 8),
+  e("KH", "Cambodia", "855", "91 234 567", 8, 9),
+  e("CM", "Cameroon", "237", "6 71 23 45 67", 9, 9),
+  e("CA", "Canada", "1", "(506) 234-5678", 10, 10),
+  e("CV", "Cape Verde", "238", "991 12 34", 7, 7),
+  e("KY", "Cayman Islands", "1345", "345-323-1234", 7, 7),
+  e("CF", "Central African Republic", "236", "70 01 23 45", 8, 8),
+  e("TD", "Chad", "235", "63 01 23 45", 8, 8),
+  e("CL", "Chile", "56", "2 2123 4567", 9, 9),
+  e("CN", "China", "86", "131 2345 6789", 11, 11),
+  e("CO", "Colombia", "57", "321 1234567", 10, 10),
+  e("KM", "Comoros", "269", "321 23 45", 7, 7),
+  e("CG", "Congo", "242", "06 123 4567", 9, 9),
+  e("CD", "Congo, DRC", "243", "991 234 567", 9, 9),
+  e("CK", "Cook Islands", "682", "71 234", 5, 5),
+  e("CR", "Costa Rica", "506", "8312 3456", 8, 8),
+  e("CI", "Côte d'Ivoire", "225", "01 23 45 67 89", 10, 10),
+  e("HR", "Croatia", "385", "92 123 4567", 8, 9),
+  e("CU", "Cuba", "53", "5 1234567", 8, 8),
+  e("CW", "Curaçao", "599", "9 518 1234", 7, 8),
+  e("CY", "Cyprus", "357", "96 123456", 8, 8),
+  e("CZ", "Czech Republic", "420", "601 123 456", 9, 9),
+  e("DK", "Denmark", "45", "32 12 34 56", 8, 8),
+  e("DJ", "Djibouti", "253", "77 83 10 01", 8, 8),
+  e("DM", "Dominica", "1767", "767-225-1234", 7, 7),
+  e("DO", "Dominican Republic", "1", "809-234-5678", 10, 10),
+  e("EC", "Ecuador", "593", "99 123 4567", 9, 9),
+  e("EG", "Egypt", "20", "100 123 4567", 10, 10),
+  e("SV", "El Salvador", "503", "7012 3456", 8, 8),
+  e("GQ", "Equatorial Guinea", "240", "222 123 456", 9, 9),
+  e("ER", "Eritrea", "291", "7 123 456", 7, 7),
+  e("EE", "Estonia", "372", "5123 4567", 7, 8),
+  e("SZ", "Eswatini", "268", "7612 3456", 8, 8),
+  e("ET", "Ethiopia", "251", "91 123 4567", 9, 9),
+  e("FK", "Falkland Islands", "500", "51234", 5, 5),
+  e("FO", "Faroe Islands", "298", "211234", 6, 6),
+  e("FJ", "Fiji", "679", "701 2345", 7, 7),
+  e("FI", "Finland", "358", "41 234 5678", 9, 11),
+  e("FR", "France", "33", "6 12 34 56 78", 9, 9),
+  e("GF", "French Guiana", "594", "694 12 34 56", 9, 9),
+  e("PF", "French Polynesia", "689", "40 12 34 56", 8, 8),
+  e("GA", "Gabon", "241", "06 03 12 34", 7, 8),
+  e("GM", "Gambia", "220", "301 2345", 7, 7),
+  e("GE", "Georgia", "995", "555 12 34 56", 9, 9),
+  e("DE", "Germany", "49", "1512 3456789", 10, 11),
+  e("GH", "Ghana", "233", "23 123 4567", 9, 9),
+  e("GI", "Gibraltar", "350", "5713 4567", 8, 8),
+  e("GR", "Greece", "30", "691 234 5678", 10, 10),
+  e("GL", "Greenland", "299", "22 12 34", 6, 6),
+  e("GD", "Grenada", "1473", "473-403-1234", 7, 7),
+  e("GP", "Guadeloupe", "590", "690 30-1234", 9, 9),
+  e("GU", "Guam", "1671", "671-300-1234", 7, 7),
+  e("GT", "Guatemala", "502", "5123 4567", 8, 8),
+  e("GG", "Guernsey", "44", "7781 123456", 10, 10),
+  e("GN", "Guinea", "224", "601 12 34 56", 9, 9),
+  e("GW", "Guinea-Bissau", "245", "955 012 345", 9, 9),
+  e("GY", "Guyana", "592", "609 1234", 7, 7),
+  e("HT", "Haiti", "509", "34 10 1234", 8, 8),
+  e("HN", "Honduras", "504", "9123-4567", 8, 8),
+  e("HK", "Hong Kong", "852", "5123 4567", 8, 8),
+  e("HU", "Hungary", "36", "20 123 4567", 9, 9),
+  e("IS", "Iceland", "354", "611 1234", 7, 9),
+  e("IN", "India", "91", "81234 56789", 10, 10),
+  e("ID", "Indonesia", "62", "812-345-678", 9, 12),
+  e("IR", "Iran", "98", "912 345 6789", 10, 10),
+  e("IQ", "Iraq", "964", "791 234 5678", 10, 10),
+  e("IE", "Ireland", "353", "85 012 3456", 9, 9),
+  e("IM", "Isle of Man", "44", "7924 123456", 10, 10),
+  e("IL", "Israel", "972", "50-234-5678", 9, 9),
+  e("IT", "Italy", "39", "312 345 6789", 9, 11),
+  e("JM", "Jamaica", "1876", "876-210-1234", 7, 7),
+  e("JP", "Japan", "81", "90-1234-5678", 10, 10),
+  e("JE", "Jersey", "44", "7797 712345", 10, 10),
+  e("JO", "Jordan", "962", "7 9012 3456", 9, 9),
+  e("KZ", "Kazakhstan", "7", "771 000 9998", 10, 10),
+  e("KE", "Kenya", "254", "712 123456", 9, 9),
+  e("KI", "Kiribati", "686", "72001234", 8, 8),
+  e("XK", "Kosovo", "383", "43 201 234", 8, 9),
+  e("KW", "Kuwait", "965", "500 12345", 8, 8),
+  e("KG", "Kyrgyzstan", "996", "700 123 456", 9, 9),
+  e("LA", "Laos", "856", "20 23 123 456", 10, 10),
+  e("LV", "Latvia", "371", "21 234 567", 8, 8),
+  e("LB", "Lebanon", "961", "71 123 456", 8, 8),
+  e("LS", "Lesotho", "266", "5012 3456", 8, 8),
+  e("LR", "Liberia", "231", "77 012 3456", 8, 9),
+  e("LY", "Libya", "218", "91 2345678", 9, 9),
+  e("LI", "Liechtenstein", "423", "660 234 567", 7, 9),
+  e("LT", "Lithuania", "370", "612 34567", 8, 8),
+  e("LU", "Luxembourg", "352", "628 123 456", 9, 9),
+  e("MO", "Macau", "853", "6612 3456", 8, 8),
+  e("MG", "Madagascar", "261", "32 12 345 67", 9, 9),
+  e("MW", "Malawi", "265", "991 23 45 67", 9, 9),
+  e("MY", "Malaysia", "60", "12-345 6789", 9, 10),
+  e("MV", "Maldives", "960", "771-2345", 7, 7),
+  e("ML", "Mali", "223", "65 01 23 45", 8, 8),
+  e("MT", "Malta", "356", "9696 1234", 8, 8),
+  e("MH", "Marshall Islands", "692", "235-1234", 7, 7),
+  e("MQ", "Martinique", "596", "696 30-1234", 9, 9),
+  e("MR", "Mauritania", "222", "22 12 34 56", 8, 8),
+  e("MU", "Mauritius", "230", "5251 2345", 8, 8),
+  e("YT", "Mayotte", "262", "639 01 23 45", 9, 9),
+  e("MX", "Mexico", "52", "222 123 4567", 10, 10),
+  e("FM", "Micronesia", "691", "350 1234", 7, 7),
+  e("MD", "Moldova", "373", "621 12 345", 8, 8),
+  e("MC", "Monaco", "377", "6 12 34 56 78", 8, 9),
+  e("MN", "Mongolia", "976", "8812 3456", 8, 8),
+  e("ME", "Montenegro", "382", "67 622 901", 8, 9),
+  e("MS", "Montserrat", "1664", "664-491-1234", 7, 7),
+  e("MA", "Morocco", "212", "650-123456", 9, 9),
+  e("MZ", "Mozambique", "258", "82 123 4567", 9, 9),
+  e("MM", "Myanmar", "95", "9 212 3456", 7, 10),
+  e("NA", "Namibia", "264", "81 123 4567", 9, 9),
+  e("NR", "Nauru", "674", "555 1234", 7, 7),
+  e("NP", "Nepal", "977", "984-1234567", 10, 10),
+  e("NL", "Netherlands", "31", "6 12345678", 9, 9),
+  e("NC", "New Caledonia", "687", "75.12.34", 6, 6),
+  e("NZ", "New Zealand", "64", "21 123 4567", 8, 10),
+  e("NI", "Nicaragua", "505", "8123 4567", 8, 8),
+  e("NE", "Niger", "227", "93 12 34 56", 8, 8),
+  e("NG", "Nigeria", "234", "802 123 4567", 10, 10),
+  e("NU", "Niue", "683", "4002", 4, 4),
+  e("KP", "North Korea", "850", "192 123 4567", 10, 10),
+  e("MK", "North Macedonia", "389", "72 345 678", 8, 8),
+  e("MP", "Northern Mariana Islands", "1670", "670-234-5678", 7, 7),
+  e("NO", "Norway", "47", "406 12 345", 8, 8),
+  e("OM", "Oman", "968", "9212 3456", 8, 8),
+  e("PK", "Pakistan", "92", "301 2345678", 10, 10),
+  e("PW", "Palau", "680", "620 1234", 7, 7),
+  e("PS", "Palestine", "970", "599 123 456", 9, 9),
+  e("PA", "Panama", "507", "6123-4567", 8, 8),
+  e("PG", "Papua New Guinea", "675", "7012 3456", 8, 8),
+  e("PY", "Paraguay", "595", "961 456789", 9, 9),
+  e("PE", "Peru", "51", "912 345 678", 9, 9),
+  e("PH", "Philippines", "63", "905 123 4567", 10, 10),
+  e("PL", "Poland", "48", "512 345 678", 9, 9),
+  e("PT", "Portugal", "351", "912 345 678", 9, 9),
+  e("PR", "Puerto Rico", "1", "787-234-5678", 10, 10),
+  e("QA", "Qatar", "974", "3312 3456", 8, 8),
+  e("RE", "Réunion", "262", "692 12 34 56", 9, 9),
+  e("RO", "Romania", "40", "712 034 567", 9, 9),
+  e("RU", "Russia", "7", "912 345-67-89", 10, 10),
+  e("RW", "Rwanda", "250", "720 123 456", 9, 9),
+  e("KN", "Saint Kitts and Nevis", "1869", "869-765-2917", 7, 7),
+  e("LC", "Saint Lucia", "1758", "758-284-5678", 7, 7),
+  e("VC", "Saint Vincent", "1784", "784-430-1234", 7, 7),
+  e("WS", "Samoa", "685", "72 12345", 6, 7),
+  e("SM", "San Marino", "378", "66 66 12 12", 10, 10),
+  e("ST", "São Tomé and Príncipe", "239", "981 2345", 7, 7),
+  e("SA", "Saudi Arabia", "966", "51 234 5678", 9, 9),
+  e("SN", "Senegal", "221", "70 123 45 67", 9, 9),
+  e("RS", "Serbia", "381", "60 1234567", 8, 9),
+  e("SC", "Seychelles", "248", "2 510 123", 7, 7),
+  e("SL", "Sierra Leone", "232", "25 123456", 8, 8),
+  e("SG", "Singapore", "65", "8123 4567", 8, 8),
+  e("SX", "Sint Maarten", "1721", "721-520-5678", 7, 7),
+  e("SK", "Slovakia", "421", "912 123 456", 9, 9),
+  e("SI", "Slovenia", "386", "31 234 567", 8, 8),
+  e("SB", "Solomon Islands", "677", "74 21234", 7, 7),
+  e("SO", "Somalia", "252", "7 1123456", 8, 8),
+  e("ZA", "South Africa", "27", "71 123 4567", 9, 9),
+  e("KR", "South Korea", "82", "10-1234-5678", 9, 11),
+  e("SS", "South Sudan", "211", "977 123 456", 9, 9),
+  e("ES", "Spain", "34", "612 34 56 78", 9, 9),
+  e("LK", "Sri Lanka", "94", "71 234 5678", 9, 9),
+  e("SD", "Sudan", "249", "91 123 1234", 9, 9),
+  e("SR", "Suriname", "597", "741-2345", 7, 7),
+  e("SE", "Sweden", "46", "70-123 45 67", 9, 9),
+  e("CH", "Switzerland", "41", "78 123 45 67", 9, 9),
+  e("SY", "Syria", "963", "944 567 890", 9, 9),
+  e("TW", "Taiwan", "886", "912 345 678", 9, 9),
+  e("TJ", "Tajikistan", "992", "917 12 3456", 9, 9),
+  e("TZ", "Tanzania", "255", "621 234 567", 9, 9),
+  e("TH", "Thailand", "66", "81 234 5678", 9, 9),
+  e("TL", "Timor-Leste", "670", "7721 2345", 7, 8),
+  e("TG", "Togo", "228", "90 11 23 45", 8, 8),
+  e("TK", "Tokelau", "690", "7290", 4, 4),
+  e("TO", "Tonga", "676", "771 5123", 5, 7),
+  e("TT", "Trinidad and Tobago", "1868", "868-291-5678", 7, 7),
+  e("TN", "Tunisia", "216", "20 123 456", 8, 8),
+  e("TR", "Turkey", "90", "501 234 56 78", 10, 10),
+  e("TM", "Turkmenistan", "993", "66 123456", 8, 8),
+  e("TC", "Turks and Caicos Islands", "1649", "649-231-1234", 7, 7),
+  e("TV", "Tuvalu", "688", "901234", 5, 6),
+  e("UG", "Uganda", "256", "712 345678", 9, 9),
+  e("UA", "Ukraine", "380", "50 123 4567", 9, 9),
+  e("AE", "United Arab Emirates", "971", "50 123 4567", 8, 9),
+  e("GB", "United Kingdom", "44", "7400 123456", 10, 10),
+  e("US", "United States", "1", "(201) 555-0123", 10, 10),
+  e("UY", "Uruguay", "598", "94 231 234", 8, 8),
+  e("UZ", "Uzbekistan", "998", "91 234 56 78", 9, 9),
+  e("VU", "Vanuatu", "678", "591 1234", 5, 7),
+  e("VA", "Vatican City", "39", "312 345 6789", 9, 11),
+  e("VE", "Venezuela", "58", "412-1234567", 10, 10),
+  e("VN", "Vietnam", "84", "912 345 678", 9, 10),
+  e("VI", "U.S. Virgin Islands", "1340", "340-642-1234", 7, 7),
+  e("WF", "Wallis and Futuna", "681", "50 12 34", 6, 6),
+  e("YE", "Yemen", "967", "712 345 678", 9, 9),
+  e("ZM", "Zambia", "260", "95 1234567", 9, 9),
+  e("ZW", "Zimbabwe", "263", "71 234 5678", 9, 9)
+], m = b.reduce(
+  (t, a) => (t[a.iso2] = a, t),
+  {}
+), A = {
+  1: "US",
+  7: "RU",
+  39: "IT",
+  44: "GB",
+  47: "NO",
+  212: "MA",
+  262: "RE",
+  358: "FI",
+  590: "GP",
+  599: "CW"
+};
+function C(t, a = "US") {
+  if (!t.startsWith("+")) return;
+  const s = t.slice(1);
+  let n, c = 0;
+  for (const l of b)
+    if (s.startsWith(l.dialCode)) {
+      if (l.dialCode.length > c) {
+        n = l, c = l.dialCode.length;
+        continue;
+      }
+      if (l.dialCode.length === c && n) {
+        const i = A[l.dialCode];
+        (l.iso2 === a || n.iso2 !== a && i && l.iso2 === i) && (n = l);
+      }
+    }
+  return n;
+}
+function v(t) {
+  return t.replace(/\D+/g, "");
+}
+var B = Object.defineProperty, z = Object.getOwnPropertyDescriptor, o = (t, a, s, n) => {
+  for (var c = n > 1 ? void 0 : n ? z(a, s) : a, l = t.length - 1, i; l >= 0; l--)
+    (i = t[l]) && (c = (n ? i(a, s, c) : i(c)) || c);
+  return n && c && B(a, s, c), c;
+};
+let r = class extends x {
+  constructor() {
+    super(), this.value = "", this.country = "US", this.defaultCountry = "US", this.name = "", this.label = "", this.placeholder = "", this.helper = "", this.size = "md", this.rounded = "lg", this.disabled = !1, this.readonly = !1, this.error = !1, this.success = !1, this.required = !1, this.loading = !1, this.nationalMode = !1, this.preferredCountries = ["US", "GB", "BR", "DE", "FR", "CA", "AU", "IN", "JP", "MX"], this.onlyCountries = [], this.excludeCountries = [], this.open = !1, this._national = "", this._focused = !1, this._query = "", this._activeIndex = 0, this._announcement = "", this._disposeOutside = null, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  // ─── Lifecycle ────────────────────────────────────────────────────────────
+  connectedCallback() {
+    if (super.connectedCallback(), !this.country && this.defaultCountry && (this.country = this.defaultCountry), this.value) {
+      const t = C(this.value, this.country || "US"), a = v(this.value);
+      t ? (this.country = t.iso2, this._national = a.slice(t.dialCode.length)) : this._national = a;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._disposeOutside?.(), this._disposeOutside = null;
+  }
+  updated(t) {
+    if (super.updated(t), t.has("open") && (this.open ? (this._disposeOutside = k(this, () => {
+      this._close();
+    }), this.updateComplete.then(() => this._searchInput?.focus())) : (this._disposeOutside?.(), this._disposeOutside = null, this._query = "", this._activeIndex = 0)), t.has("value") && !t.has("country") && this.value) {
+      const a = C(this.value, this.country || "US");
+      if (a) {
+        a.iso2 !== this.country && (this.country = a.iso2);
+        const s = v(this.value);
+        this._national = s.slice(a.dialCode.length);
+      }
+    }
+    (t.has("value") || t.has("required")) && (this._internals?.setFormValue(this.value || ""), this.required && !this.value ? this._internals?.setValidity({ valueMissing: !0 }, "This field is required") : this._internals?.setValidity({}));
+  }
+  formResetCallback() {
+    this.value = this.getAttribute("value") ?? "", this._national = "";
+  }
+  formStateRestoreCallback(t) {
+    this.value = t;
+  }
+  // ─── Public methods ───────────────────────────────────────────────────────
+  focus() {
+    this._telInput?.focus();
+  }
+  /** Length-based validation against the selected country format. */
+  validate() {
+    const t = this._currentCountry;
+    if (!t) return !1;
+    const a = this._national.length;
+    return t.minLength != null && a < t.minLength || t.maxLength != null && a > t.maxLength ? !1 : a > 0;
+  }
+  // ─── Derived values ───────────────────────────────────────────────────────
+  get _currentCountry() {
+    return m[(this.country || "US").toUpperCase()];
+  }
+  get _filteredCountries() {
+    const t = this._query.trim().toLowerCase(), a = (i) => !(this.onlyCountries.length && !this.onlyCountries.includes(i.iso2) || this.excludeCountries.includes(i.iso2)), s = (i) => {
+      if (!t) return !0;
+      const u = t.startsWith("+") ? t.slice(1) : t;
+      return i.name.toLowerCase().includes(t) || i.iso2.toLowerCase().includes(t) || i.dialCode.startsWith(u);
+    };
+    if (t) {
+      const i = b.filter((u) => a(u) && s(u));
+      return { preferred: [], rest: i };
+    }
+    const n = new Set(this.preferredCountries), c = this.preferredCountries.map((i) => m[i]).filter((i) => !!i && a(i)), l = b.filter((i) => a(i) && !n.has(i.iso2));
+    return { preferred: c, rest: l };
+  }
+  get _flatFiltered() {
+    const { preferred: t, rest: a } = this._filteredCountries;
+    return [...t, ...a];
+  }
+  get _isFloated() {
+    return this._focused || !!this._national;
+  }
+  // ─── Event helpers ────────────────────────────────────────────────────────
+  _emitChange() {
+    const a = this._currentCountry?.dialCode ?? "", s = v(this._national), n = s ? `+${a}${s}` : "";
+    n !== this.value && (this.value = n), this.dispatchEvent(new CustomEvent("cg-phone-input-change", {
+      detail: {
+        value: n,
+        country: this.country,
+        dialCode: a,
+        nationalNumber: s,
+        valid: this.validate()
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _announce(t) {
+    this._announcement = "", requestAnimationFrame(() => {
+      this._announcement = t;
+    });
+  }
+  // ─── Country trigger / popover ────────────────────────────────────────────
+  _toggleOpen(t) {
+    t.stopPropagation(), !(this.disabled || this.readonly) && (this.open = !this.open);
+  }
+  _close() {
+    this.open && (this.open = !1);
+  }
+  _selectCountry(t, a = !0) {
+    this.country !== t.iso2 && (this.country = t.iso2, this._announce(`Switched to ${t.name}, +${t.dialCode}`), this.dispatchEvent(new CustomEvent("cg-phone-input-country-change", {
+      detail: { country: t.iso2, dialCode: t.dialCode },
+      bubbles: !0,
+      composed: !0
+    })), this._emitChange()), this.open = !1, a && this.updateComplete.then(() => this._telInput?.focus());
+  }
+  _onSearchInput(t) {
+    this._query = t.target.value, this._activeIndex = 0, this.updateComplete.then(() => this._optionsEl?.scrollTo({ top: 0 }));
+  }
+  _onPopoverKey(t) {
+    const a = this._flatFiltered;
+    if (t.key === "ArrowDown")
+      t.preventDefault(), this._activeIndex = Math.min(a.length - 1, this._activeIndex + 1), this._scrollActiveIntoView();
+    else if (t.key === "ArrowUp")
+      t.preventDefault(), this._activeIndex = Math.max(0, this._activeIndex - 1), this._scrollActiveIntoView();
+    else if (t.key === "Enter") {
+      t.preventDefault();
+      const s = a[this._activeIndex];
+      s && this._selectCountry(s);
+    } else t.key === "Escape" && (t.preventDefault(), this._close(), this._telInput?.focus());
+  }
+  _scrollActiveIntoView() {
+    this.updateComplete.then(() => {
+      this._optionsEl?.querySelector(`.option[data-index="${this._activeIndex}"]`)?.scrollIntoView({ block: "nearest" });
+    });
+  }
+  // ─── Number input handlers ────────────────────────────────────────────────
+  _onTelKeydown(t) {
+    t.key === "ArrowDown" && (t.altKey || t.metaKey) && (t.preventDefault(), this.open = !0);
+  }
+  _onTelInput(t) {
+    const a = t.target.value;
+    this._national = v(a), this._emitChange();
+  }
+  _onTelFocus() {
+    this._focused = !0;
+  }
+  _onTelBlur() {
+    this._focused = !1;
+  }
+  // ─── Render helpers ───────────────────────────────────────────────────────
+  _renderOption(t, a) {
+    const s = t.iso2 === this.country, n = a === this._activeIndex;
+    return p`
+      <div
+        class="option ${s ? "selected" : ""} ${n ? "active" : ""}"
+        role="option"
+        id="cg-phone-opt-${a}"
+        data-index=${a}
+        aria-selected=${s ? "true" : "false"}
+        @click=${(c) => {
+      c.stopPropagation(), this._selectCountry(t);
+    }}
+        @mouseenter=${() => {
+      this._activeIndex = a;
+    }}
+      >
+        <span class="opt-flag" aria-hidden="true">${t.flag}</span>
+        <span class="opt-name">${t.name}</span>
+        <span class="opt-dial">+${t.dialCode}</span>
+      </div>
+    `;
+  }
+  render() {
+    const t = this._currentCountry, a = [
+      "wrapper",
+      this._focused ? "focused" : "",
+      this.disabled ? "disabled" : "",
+      this.readonly ? "readonly" : ""
+    ].filter(Boolean).join(" "), s = [
+      "field",
+      this.label ? "has-label" : "",
+      this._isFloated ? "floated" : ""
+    ].filter(Boolean).join(" "), { preferred: n, rest: c } = this._filteredCountries, l = t ? `Country code, currently ${t.name}, +${t.dialCode}` : "Select country code", i = this.placeholder || t?.format || "Phone number";
+    return p`
+      <div class=${a}>
+        <button
+          type="button"
+          class="trigger"
+          aria-haspopup="dialog"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="cg-phone-listbox"
+          aria-label=${l}
+          ?disabled=${this.disabled || this.readonly}
+          @click=${this._toggleOpen}
+          @keydown=${(u) => {
+      (u.key === "ArrowDown" || u.key === "Enter" || u.key === " ") && (u.preventDefault(), this.open = !0);
+    }}
+          @focus=${() => {
+      this._focused = !0;
+    }}
+          @blur=${() => {
+      this._focused = !1;
+    }}
+        >
+          ${this.loading ? p`<span class="trigger-spinner" aria-hidden="true"></span>` : p`<span class="flag" aria-hidden="true">${t?.flag ?? "🌐"}</span>`}
+          <span class="dial-code">+${t?.dialCode ?? ""}</span>
+          <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m6 9 6 6 6-6"/>
+          </svg>
+        </button>
+
+        <div class=${s}>
+          ${this.label ? p`<span class="floating-label">${this.label}</span>` : g}
+          <input
+            type="tel"
+            inputmode="tel"
+            autocomplete="tel"
+            .value=${this._national}
+            name=${this.name || g}
+            placeholder=${i}
+            ?disabled=${this.disabled || this.loading}
+            ?readonly=${this.readonly}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-required=${this.required ? "true" : "false"}
+            aria-describedby=${this.helper ? "cg-phone-helper" : g}
+            @input=${this._onTelInput}
+            @keydown=${this._onTelKeydown}
+            @focus=${this._onTelFocus}
+            @blur=${this._onTelBlur}
+          />
+        </div>
+
+        <div
+          class="popover"
+          role="dialog"
+          aria-label="Select country"
+          @keydown=${this._onPopoverKey}
+          @click=${(u) => u.stopPropagation()}
+        >
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="11" cy="11" r="7"/>
+              <path d="m20 20-3.5-3.5"/>
+            </svg>
+            <input
+              type="search"
+              role="searchbox"
+              .value=${this._query}
+              placeholder="Search country or +code"
+              aria-controls="cg-phone-listbox"
+              aria-activedescendant=${this.open && this._activeIndex >= 0 ? `cg-phone-opt-${this._activeIndex}` : g}
+              @input=${this._onSearchInput}
+            />
+          </div>
+
+          <div
+            class="options"
+            id="cg-phone-listbox"
+            role="listbox"
+            aria-label="Countries"
+          >
+            ${this._flatFiltered.length === 0 ? p`<div class="empty">No countries match "${this._query}"</div>` : p`
+                  ${n.length > 0 ? p`
+                    <div class="group-label" role="presentation">Suggested</div>
+                    ${n.map((u, h) => this._renderOption(u, h))}
+                    <div class="group-label" role="presentation">All countries</div>
+                  ` : g}
+                  ${c.map((u, h) => this._renderOption(u, n.length + h))}
+                `}
+          </div>
+        </div>
+      </div>
+
+      ${this.helper ? p`<div class="helper" id="cg-phone-helper">${this.helper}</div>` : g}
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this._announcement}</div>
+    `;
+  }
+};
+r.formAssociated = !0;
+r.styles = [I, M, w`
+    :host { display: block; font-family: var(--cg-font-family-primary); }
+
+    /* ── Outer wrapper — matches cg-input chrome ────────────────────────── */
+    .wrapper {
+      display: flex;
+      align-items: stretch;
+      height: var(--cg-component-input-height-md);
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-phone-input-radius);
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      position: relative;
+    }
+
+    :host([size="lg"]) .wrapper { height: var(--cg-component-input-height-lg); }
+
+    :host([rounded="none"]) .wrapper { border-radius: 0; }
+    :host([rounded="sm"]) .wrapper { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .wrapper { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .wrapper { border-radius: var(--cg-component-phone-input-radius); }
+
+    .wrapper:hover:not(.disabled) {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .wrapper.focused {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    :host([error]) .wrapper { border-color: var(--cg-color-input-border-error); }
+    :host([error]) .wrapper.focused {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+    :host([success]) .wrapper { border-color: var(--cg-color-input-icon-success); }
+    :host([success]) .wrapper.focused {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+
+    .wrapper.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      background: var(--cg-color-input-background-disabled);
+      border-color: var(--cg-color-input-border-disabled);
+    }
+    .wrapper.readonly {
+      background: var(--cg-color-surface-field-readonly-background);
+      border-style: dashed;
+    }
+
+    /* ── Country trigger ────────────────────────────────────────────────── */
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-component-phone-input-trigger-gap);
+      padding: 0 var(--cg-component-phone-input-trigger-padding-x);
+      background: var(--cg-overlay-dark-subtle);
+      border: none;
+      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-phone-input-radius) 0 0 var(--cg-component-phone-input-radius);
+      color: var(--cg-color-input-text-default);
+      cursor: pointer;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      flex-shrink: 0;
+      margin: calc(-1 * var(--cg-border-width-50));
+      margin-right: 0;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger:hover:not(:disabled) { background: var(--cg-overlay-accent-subtle); }
+    .trigger:focus-visible {
+      outline: none;
+      background: var(--cg-overlay-accent-subtle);
+    }
+    .trigger:disabled { cursor: not-allowed; }
+
+    :host([rounded="none"]) .trigger { border-radius: 0; }
+    :host([rounded="sm"]) .trigger { border-radius: var(--cg-border-radius-50) 0 0 var(--cg-border-radius-50); }
+    :host([rounded="md"]) .trigger { border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100); }
+
+    .flag {
+      font-size: var(--cg-font-size-base);
+      line-height: 1;
+      filter: saturate(1.1);
+      flex-shrink: 0;
+    }
+    :host([size="lg"]) .flag { font-size: var(--cg-font-size-lg); }
+
+    .dial-code {
+      color: var(--cg-color-input-text-default);
+      font-variant-numeric: tabular-nums;
+      letter-spacing: 0.01em;
+    }
+
+    .chevron {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-input-text-placeholder);
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      flex-shrink: 0;
+    }
+    :host([open]) .chevron { transform: rotate(180deg); }
+
+    .trigger-spinner {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: cg-phone-spin 600ms linear infinite;
+    }
+    @keyframes cg-phone-spin { to { transform: rotate(360deg); } }
+
+    /* ── Number field ───────────────────────────────────────────────────── */
+    .field {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      padding: 0 var(--cg-spacing-12);
+      position: relative;
+    }
+
+    input[type="tel"] {
+      flex: 1;
+      width: 100%;
+      min-width: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-default);
+      padding: var(--cg-spacing-8) 0;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: 0.01em;
+    }
+    :host([size="lg"]) input[type="tel"] {
+      font-size: var(--cg-font-size-base);
+      padding: var(--cg-spacing-12) 0;
+    }
+    .field.has-label input[type="tel"] {
+      padding-top: var(--cg-spacing-20);
+      padding-bottom: var(--cg-spacing-2);
+    }
+    :host([size="lg"]) .field.has-label input[type="tel"] {
+      padding-top: var(--cg-spacing-24);
+      padding-bottom: var(--cg-spacing-4);
+    }
+    input[type="tel"]::placeholder { color: transparent; }
+    .field.floated input[type="tel"]::placeholder {
+      color: var(--cg-color-input-text-placeholder);
+      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    input[type="tel"]:disabled { cursor: not-allowed; }
+
+    /* ── Floating label ─────────────────────────────────────────────────── */
+    .floating-label {
+      position: absolute;
+      left: var(--cg-spacing-12);
+      right: var(--cg-spacing-12);
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      pointer-events: none;
+      transform-origin: left top;
+      transition:
+        top var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        font-size var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      z-index: 2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    :host([size="lg"]) .floating-label { font-size: var(--cg-font-size-base); }
+    .field.floated .floating-label {
+      top: var(--cg-spacing-6);
+      transform: translateY(0);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+    }
+    :host([size="lg"]) .field.floated .floating-label {
+      top: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+    }
+    :host([error]) .field.floated .floating-label {
+      color: var(--cg-color-status-error-text-default);
+    }
+    :host([success]) .field.floated .floating-label {
+      color: var(--cg-color-status-success-text-default);
+    }
+
+    /* ── Helper text ────────────────────────────────────────────────────── */
+    .helper {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12) 0;
+    }
+    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
+    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }
+
+    /* ── Country popover ────────────────────────────────────────────────── */
+    .popover {
+      position: absolute;
+      top: calc(100% + var(--cg-spacing-6));
+      left: 0;
+      z-index: var(--cg-z-index-500);
+      width: var(--cg-component-phone-input-popover-width);
+      max-width: calc(100vw - var(--cg-spacing-32));
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-component-popover-radius);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      display: none;
+      opacity: 0;
+      transform: translateY(calc(var(--cg-spacing-4) * -1));
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+      overflow: hidden;
+    }
+    :host([open]) .popover {
+      display: block;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .search {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+    }
+    .search svg {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+    }
+    .search input {
+      flex: 1;
+      width: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      padding: var(--cg-spacing-4) 0;
+    }
+    .search input::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    .options {
+      max-height: var(--cg-component-phone-input-popover-max-height);
+      overflow-y: auto;
+      padding: var(--cg-spacing-4);
+      scrollbar-width: thin;
+      scrollbar-color: var(--cg-color-surface-cards-border-strong) transparent;
+    }
+
+    .group-label {
+      padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      height: var(--cg-component-phone-input-option-height);
+      padding: 0 var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-text);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .option .opt-flag { font-size: var(--cg-font-size-base); flex-shrink: 0; }
+    .option .opt-name {
+      flex: 1;
+      min-width: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .option .opt-dial {
+      color: var(--cg-color-input-text-placeholder);
+      font-variant-numeric: tabular-nums;
+      flex-shrink: 0;
+    }
+    .option:hover, .option.active {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+    }
+    .option.selected { font-weight: var(--cg-font-weight-medium); }
+    .option.selected .opt-name::after {
+      content: '';
+      display: inline-block;
+      width: var(--cg-spacing-6);
+    }
+    .option.selected .opt-dial::after {
+      content: ' ✓';
+      color: var(--cg-color-accent-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-20);
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Visually-hidden live region ────────────────────────────────────── */
+    .sr-only {
+      position: absolute; width: 1px; height: 1px;
+      padding: 0; margin: -1px; overflow: hidden;
+      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+  `];
+o([
+  d()
+], r.prototype, "value", 2);
+o([
+  d({ reflect: !0 })
+], r.prototype, "country", 2);
+o([
+  d({ attribute: "default-country" })
+], r.prototype, "defaultCountry", 2);
+o([
+  d()
+], r.prototype, "name", 2);
+o([
+  d()
+], r.prototype, "label", 2);
+o([
+  d()
+], r.prototype, "placeholder", 2);
+o([
+  d()
+], r.prototype, "helper", 2);
+o([
+  d({ reflect: !0 })
+], r.prototype, "size", 2);
+o([
+  d({ reflect: !0 })
+], r.prototype, "rounded", 2);
+o([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+o([
+  d({ type: Boolean })
+], r.prototype, "readonly", 2);
+o([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+o([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "success", 2);
+o([
+  d({ type: Boolean })
+], r.prototype, "required", 2);
+o([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+o([
+  d({ type: Boolean, attribute: "national-mode" })
+], r.prototype, "nationalMode", 2);
+o([
+  d({ type: Array, attribute: "preferred-countries" })
+], r.prototype, "preferredCountries", 2);
+o([
+  d({ type: Array, attribute: "only-countries" })
+], r.prototype, "onlyCountries", 2);
+o([
+  d({ type: Array, attribute: "exclude-countries" })
+], r.prototype, "excludeCountries", 2);
+o([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+o([
+  f()
+], r.prototype, "_national", 2);
+o([
+  f()
+], r.prototype, "_focused", 2);
+o([
+  f()
+], r.prototype, "_query", 2);
+o([
+  f()
+], r.prototype, "_activeIndex", 2);
+o([
+  f()
+], r.prototype, "_announcement", 2);
+o([
+  y('input[type="tel"]')
+], r.prototype, "_telInput", 2);
+o([
+  y(".search input")
+], r.prototype, "_searchInput", 2);
+o([
+  y(".options")
+], r.prototype, "_optionsEl", 2);
+r = o([
+  S("cg-phone-input")
+], r);
+export {
+  r as CgPhoneInput
+};
+//# sourceMappingURL=cg-phone-input.js.map