@webority/ui-elements 0.0.10 → 0.3.0

package/dist/ui-elements.js

@@ -50,13 +50,20 @@ var e = class extends HTMLElement {
 		let e = Number(this.getAttribute("debounce"));
 		return Number.isFinite(e) && e >= 0 ? e : 250;
 	}
-	_readOptions() {
-		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+	_snapshotDeclared() {
+		if (this._declared) return;
+		let e = [...this.querySelectorAll(":scope > wui-option")];
+		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
-			label: e.innerHTML
-		}));
+			label: e.innerHTML,
+			selected: e.hasAttribute("selected")
+		})));
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
 	}
 	render() {
+		this._snapshotDeclared();
 		let e = this.getAttribute("placeholder") || "Search…";
 		this.innerHTML = `
       <div class="search-select">
@@ -321,17 +328,24 @@ var e = class extends HTMLElement {
 	get options() {
 		return this._readOptions();
 	}
-	_readOptions() {
-		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+	_snapshotDeclared() {
+		if (this._declared) return;
+		let e = [...this.querySelectorAll(":scope > wui-option")];
+		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
-			label: e.innerHTML
-		}));
+			label: e.innerHTML,
+			selected: e.hasAttribute("selected")
+		})));
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
 	}
 	_labelFor(e) {
 		let t = this._readOptions().find((t) => String(t.value) === String(e));
 		return t ? t.label : e;
 	}
 	render() {
+		this._snapshotDeclared();
 		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
 		this._internals?.setFormValue(this._values.join(",")), this.innerHTML = `
       <div class="search-select">
@@ -421,29 +435,69 @@ var e = class extends HTMLElement {
 	}
 }, d = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), f = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;"), p = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), m = [
 	[
-		"IN",
-		"India",
-		"91"
+		"AF",
+		"Afghanistan",
+		"93"
 	],
 	[
-		"US",
-		"United States",
+		"AX",
+		"Åland Islands",
+		"358"
+	],
+	[
+		"AL",
+		"Albania",
+		"355"
+	],
+	[
+		"DZ",
+		"Algeria",
+		"213"
+	],
+	[
+		"AS",
+		"American Samoa",
 		"1"
 	],
 	[
-		"GB",
-		"United Kingdom",
-		"44"
+		"AD",
+		"Andorra",
+		"376"
 	],
 	[
-		"AE",
-		"United Arab Emirates",
-		"971"
+		"AO",
+		"Angola",
+		"244"
 	],
 	[
-		"SG",
-		"Singapore",
-		"65"
+		"AI",
+		"Anguilla",
+		"1"
+	],
+	[
+		"AG",
+		"Antigua & Barbuda",
+		"1"
+	],
+	[
+		"AR",
+		"Argentina",
+		"54"
+	],
+	[
+		"AM",
+		"Armenia",
+		"374"
+	],
+	[
+		"AW",
+		"Aruba",
+		"297"
+	],
+	[
+		"AC",
+		"Ascension Island",
+		"247"
 	],
 	[
 		"AU",
@@ -451,69 +505,159 @@ var e = class extends HTMLElement {
 		"61"
 	],
 	[
-		"CA",
-		"Canada",
+		"AT",
+		"Austria",
+		"43"
+	],
+	[
+		"AZ",
+		"Azerbaijan",
+		"994"
+	],
+	[
+		"BS",
+		"Bahamas",
 		"1"
 	],
 	[
-		"DE",
-		"Germany",
-		"49"
+		"BH",
+		"Bahrain",
+		"973"
 	],
 	[
-		"FR",
-		"France",
-		"33"
+		"BD",
+		"Bangladesh",
+		"880"
 	],
 	[
-		"IT",
-		"Italy",
-		"39"
+		"BB",
+		"Barbados",
+		"1"
 	],
 	[
-		"ES",
-		"Spain",
-		"34"
+		"BY",
+		"Belarus",
+		"375"
 	],
 	[
-		"NL",
-		"Netherlands",
-		"31"
+		"BE",
+		"Belgium",
+		"32"
 	],
 	[
-		"CH",
-		"Switzerland",
-		"41"
+		"BZ",
+		"Belize",
+		"501"
 	],
 	[
-		"SE",
-		"Sweden",
-		"46"
+		"BJ",
+		"Benin",
+		"229"
 	],
 	[
-		"NO",
-		"Norway",
-		"47"
+		"BM",
+		"Bermuda",
+		"1"
 	],
 	[
-		"DK",
-		"Denmark",
-		"45"
+		"BT",
+		"Bhutan",
+		"975"
 	],
 	[
-		"IE",
-		"Ireland",
-		"353"
+		"BO",
+		"Bolivia",
+		"591"
 	],
 	[
-		"NZ",
-		"New Zealand",
-		"64"
+		"BA",
+		"Bosnia & Herzegovina",
+		"387"
 	],
 	[
-		"JP",
-		"Japan",
-		"81"
+		"BW",
+		"Botswana",
+		"267"
+	],
+	[
+		"BR",
+		"Brazil",
+		"55"
+	],
+	[
+		"IO",
+		"British Indian Ocean Territory",
+		"246"
+	],
+	[
+		"VG",
+		"British Virgin Islands",
+		"1"
+	],
+	[
+		"BN",
+		"Brunei",
+		"673"
+	],
+	[
+		"BG",
+		"Bulgaria",
+		"359"
+	],
+	[
+		"BF",
+		"Burkina Faso",
+		"226"
+	],
+	[
+		"BI",
+		"Burundi",
+		"257"
+	],
+	[
+		"KH",
+		"Cambodia",
+		"855"
+	],
+	[
+		"CM",
+		"Cameroon",
+		"237"
+	],
+	[
+		"CA",
+		"Canada",
+		"1"
+	],
+	[
+		"CV",
+		"Cape Verde",
+		"238"
+	],
+	[
+		"BQ",
+		"Caribbean Netherlands",
+		"599"
+	],
+	[
+		"KY",
+		"Cayman Islands",
+		"1"
+	],
+	[
+		"CF",
+		"Central African Republic",
+		"236"
+	],
+	[
+		"TD",
+		"Chad",
+		"235"
+	],
+	[
+		"CL",
+		"Chile",
+		"56"
 	],
 	[
 		"CN",
@@ -521,79 +665,99 @@ var e = class extends HTMLElement {
 		"86"
 	],
 	[
-		"HK",
-		"Hong Kong",
-		"852"
+		"CX",
+		"Christmas Island",
+		"61"
 	],
 	[
-		"MY",
-		"Malaysia",
-		"60"
+		"CC",
+		"Cocos (Keeling) Islands",
+		"61"
 	],
 	[
-		"ID",
-		"Indonesia",
-		"62"
+		"CO",
+		"Colombia",
+		"57"
 	],
 	[
-		"TH",
-		"Thailand",
-		"66"
+		"KM",
+		"Comoros",
+		"269"
 	],
 	[
-		"PH",
-		"Philippines",
-		"63"
+		"CG",
+		"Congo - Brazzaville",
+		"242"
 	],
 	[
-		"VN",
-		"Vietnam",
-		"84"
+		"CD",
+		"Congo - Kinshasa",
+		"243"
 	],
 	[
-		"KR",
-		"South Korea",
-		"82"
+		"CK",
+		"Cook Islands",
+		"682"
 	],
 	[
-		"SA",
-		"Saudi Arabia",
-		"966"
+		"CR",
+		"Costa Rica",
+		"506"
 	],
 	[
-		"QA",
-		"Qatar",
-		"974"
+		"CI",
+		"Côte d’Ivoire",
+		"225"
 	],
 	[
-		"KW",
-		"Kuwait",
-		"965"
+		"HR",
+		"Croatia",
+		"385"
 	],
 	[
-		"BH",
-		"Bahrain",
-		"973"
+		"CU",
+		"Cuba",
+		"53"
 	],
 	[
-		"OM",
-		"Oman",
-		"968"
+		"CW",
+		"Curaçao",
+		"599"
 	],
 	[
-		"ZA",
-		"South Africa",
-		"27"
+		"CY",
+		"Cyprus",
+		"357"
 	],
 	[
-		"NG",
-		"Nigeria",
-		"234"
+		"CZ",
+		"Czechia",
+		"420"
 	],
 	[
-		"KE",
-		"Kenya",
-		"254"
+		"DK",
+		"Denmark",
+		"45"
+	],
+	[
+		"DJ",
+		"Djibouti",
+		"253"
+	],
+	[
+		"DM",
+		"Dominica",
+		"1"
+	],
+	[
+		"DO",
+		"Dominican Republic",
+		"1"
+	],
+	[
+		"EC",
+		"Ecuador",
+		"593"
 	],
 	[
 		"EG",
@@ -601,86 +765,946 @@ var e = class extends HTMLElement {
 		"20"
 	],
 	[
-		"BR",
-		"Brazil",
-		"55"
+		"SV",
+		"El Salvador",
+		"503"
 	],
 	[
-		"MX",
-		"Mexico",
-		"52"
+		"GQ",
+		"Equatorial Guinea",
+		"240"
 	],
 	[
-		"AR",
-		"Argentina",
-		"54"
+		"ER",
+		"Eritrea",
+		"291"
 	],
 	[
-		"BD",
-		"Bangladesh",
-		"880"
+		"EE",
+		"Estonia",
+		"372"
 	],
 	[
-		"PK",
-		"Pakistan",
-		"92"
+		"SZ",
+		"Eswatini",
+		"268"
 	],
 	[
-		"LK",
-		"Sri Lanka",
-		"94"
+		"ET",
+		"Ethiopia",
+		"251"
 	],
 	[
-		"NP",
-		"Nepal",
-		"977"
-	]
-], h = (e) => e.toUpperCase().replace(/./g, (e) => String.fromCodePoint(127397 + e.charCodeAt(0))), g = (e) => (m.find((t) => t[0] === e) || [
-	"",
-	"",
-	""
-])[2], _ = class extends HTMLElement {
-	static formAssociated = !0;
-	static get observedAttributes() {
-		return [
-			"value",
-			"country",
-			"placeholder",
-			"disabled"
-		];
-	}
-	constructor() {
-		super(), this._internals = this.attachInternals ? this.attachInternals() : null, this._country = "IN", this._national = "";
-	}
-	connectedCallback() {
-		this._rendered || this.render();
-	}
-	attributeChangedCallback(e, t, n) {
-		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
-	}
-	get value() {
-		return `+${g(this._country)}${this._national}`;
-	}
-	set value(e) {
-		this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
-	}
-	_commit() {
-		this._internals?.setFormValue(this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-	}
-	render() {
-		let e = this.getAttribute("placeholder") || "Enter phone number";
-		this._country = this.getAttribute("country") || this._country;
-		let t = m.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="phone-flag-lg">${h(e)}</span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
-		this.innerHTML = `
-      <div class="phone-input-wrap">
-        <div class="phone-country-adornment">
-          <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="phone-flag" data-flag>${h(this._country)}</span>
-            <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
-            <span class="phone-dial" data-dial>+${g(this._country)}</span>
-          </button>
-          <div class="country-dropdown-menu" role="listbox" hidden>
-            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
+		"FK",
+		"Falkland Islands",
+		"500"
+	],
+	[
+		"FO",
+		"Faroe Islands",
+		"298"
+	],
+	[
+		"FJ",
+		"Fiji",
+		"679"
+	],
+	[
+		"FI",
+		"Finland",
+		"358"
+	],
+	[
+		"FR",
+		"France",
+		"33"
+	],
+	[
+		"GF",
+		"French Guiana",
+		"594"
+	],
+	[
+		"PF",
+		"French Polynesia",
+		"689"
+	],
+	[
+		"GA",
+		"Gabon",
+		"241"
+	],
+	[
+		"GM",
+		"Gambia",
+		"220"
+	],
+	[
+		"GE",
+		"Georgia",
+		"995"
+	],
+	[
+		"DE",
+		"Germany",
+		"49"
+	],
+	[
+		"GH",
+		"Ghana",
+		"233"
+	],
+	[
+		"GI",
+		"Gibraltar",
+		"350"
+	],
+	[
+		"GR",
+		"Greece",
+		"30"
+	],
+	[
+		"GL",
+		"Greenland",
+		"299"
+	],
+	[
+		"GD",
+		"Grenada",
+		"1"
+	],
+	[
+		"GP",
+		"Guadeloupe",
+		"590"
+	],
+	[
+		"GU",
+		"Guam",
+		"1"
+	],
+	[
+		"GT",
+		"Guatemala",
+		"502"
+	],
+	[
+		"GG",
+		"Guernsey",
+		"44"
+	],
+	[
+		"GN",
+		"Guinea",
+		"224"
+	],
+	[
+		"GW",
+		"Guinea-Bissau",
+		"245"
+	],
+	[
+		"GY",
+		"Guyana",
+		"592"
+	],
+	[
+		"HT",
+		"Haiti",
+		"509"
+	],
+	[
+		"HN",
+		"Honduras",
+		"504"
+	],
+	[
+		"HK",
+		"Hong Kong SAR China",
+		"852"
+	],
+	[
+		"HU",
+		"Hungary",
+		"36"
+	],
+	[
+		"IS",
+		"Iceland",
+		"354"
+	],
+	[
+		"IN",
+		"India",
+		"91"
+	],
+	[
+		"ID",
+		"Indonesia",
+		"62"
+	],
+	[
+		"IR",
+		"Iran",
+		"98"
+	],
+	[
+		"IQ",
+		"Iraq",
+		"964"
+	],
+	[
+		"IE",
+		"Ireland",
+		"353"
+	],
+	[
+		"IM",
+		"Isle of Man",
+		"44"
+	],
+	[
+		"IL",
+		"Israel",
+		"972"
+	],
+	[
+		"IT",
+		"Italy",
+		"39"
+	],
+	[
+		"JM",
+		"Jamaica",
+		"1"
+	],
+	[
+		"JP",
+		"Japan",
+		"81"
+	],
+	[
+		"JE",
+		"Jersey",
+		"44"
+	],
+	[
+		"JO",
+		"Jordan",
+		"962"
+	],
+	[
+		"KZ",
+		"Kazakhstan",
+		"7"
+	],
+	[
+		"KE",
+		"Kenya",
+		"254"
+	],
+	[
+		"KI",
+		"Kiribati",
+		"686"
+	],
+	[
+		"XK",
+		"Kosovo",
+		"383"
+	],
+	[
+		"KW",
+		"Kuwait",
+		"965"
+	],
+	[
+		"KG",
+		"Kyrgyzstan",
+		"996"
+	],
+	[
+		"LA",
+		"Laos",
+		"856"
+	],
+	[
+		"LV",
+		"Latvia",
+		"371"
+	],
+	[
+		"LB",
+		"Lebanon",
+		"961"
+	],
+	[
+		"LS",
+		"Lesotho",
+		"266"
+	],
+	[
+		"LR",
+		"Liberia",
+		"231"
+	],
+	[
+		"LY",
+		"Libya",
+		"218"
+	],
+	[
+		"LI",
+		"Liechtenstein",
+		"423"
+	],
+	[
+		"LT",
+		"Lithuania",
+		"370"
+	],
+	[
+		"LU",
+		"Luxembourg",
+		"352"
+	],
+	[
+		"MO",
+		"Macao SAR China",
+		"853"
+	],
+	[
+		"MG",
+		"Madagascar",
+		"261"
+	],
+	[
+		"MW",
+		"Malawi",
+		"265"
+	],
+	[
+		"MY",
+		"Malaysia",
+		"60"
+	],
+	[
+		"MV",
+		"Maldives",
+		"960"
+	],
+	[
+		"ML",
+		"Mali",
+		"223"
+	],
+	[
+		"MT",
+		"Malta",
+		"356"
+	],
+	[
+		"MH",
+		"Marshall Islands",
+		"692"
+	],
+	[
+		"MQ",
+		"Martinique",
+		"596"
+	],
+	[
+		"MR",
+		"Mauritania",
+		"222"
+	],
+	[
+		"MU",
+		"Mauritius",
+		"230"
+	],
+	[
+		"YT",
+		"Mayotte",
+		"262"
+	],
+	[
+		"MX",
+		"Mexico",
+		"52"
+	],
+	[
+		"FM",
+		"Micronesia",
+		"691"
+	],
+	[
+		"MD",
+		"Moldova",
+		"373"
+	],
+	[
+		"MC",
+		"Monaco",
+		"377"
+	],
+	[
+		"MN",
+		"Mongolia",
+		"976"
+	],
+	[
+		"ME",
+		"Montenegro",
+		"382"
+	],
+	[
+		"MS",
+		"Montserrat",
+		"1"
+	],
+	[
+		"MA",
+		"Morocco",
+		"212"
+	],
+	[
+		"MZ",
+		"Mozambique",
+		"258"
+	],
+	[
+		"MM",
+		"Myanmar (Burma)",
+		"95"
+	],
+	[
+		"NA",
+		"Namibia",
+		"264"
+	],
+	[
+		"NR",
+		"Nauru",
+		"674"
+	],
+	[
+		"NP",
+		"Nepal",
+		"977"
+	],
+	[
+		"NL",
+		"Netherlands",
+		"31"
+	],
+	[
+		"NC",
+		"New Caledonia",
+		"687"
+	],
+	[
+		"NZ",
+		"New Zealand",
+		"64"
+	],
+	[
+		"NI",
+		"Nicaragua",
+		"505"
+	],
+	[
+		"NE",
+		"Niger",
+		"227"
+	],
+	[
+		"NG",
+		"Nigeria",
+		"234"
+	],
+	[
+		"NU",
+		"Niue",
+		"683"
+	],
+	[
+		"NF",
+		"Norfolk Island",
+		"672"
+	],
+	[
+		"KP",
+		"North Korea",
+		"850"
+	],
+	[
+		"MK",
+		"North Macedonia",
+		"389"
+	],
+	[
+		"MP",
+		"Northern Mariana Islands",
+		"1"
+	],
+	[
+		"NO",
+		"Norway",
+		"47"
+	],
+	[
+		"OM",
+		"Oman",
+		"968"
+	],
+	[
+		"PK",
+		"Pakistan",
+		"92"
+	],
+	[
+		"PW",
+		"Palau",
+		"680"
+	],
+	[
+		"PS",
+		"Palestinian Territories",
+		"970"
+	],
+	[
+		"PA",
+		"Panama",
+		"507"
+	],
+	[
+		"PG",
+		"Papua New Guinea",
+		"675"
+	],
+	[
+		"PY",
+		"Paraguay",
+		"595"
+	],
+	[
+		"PE",
+		"Peru",
+		"51"
+	],
+	[
+		"PH",
+		"Philippines",
+		"63"
+	],
+	[
+		"PL",
+		"Poland",
+		"48"
+	],
+	[
+		"PT",
+		"Portugal",
+		"351"
+	],
+	[
+		"PR",
+		"Puerto Rico",
+		"1"
+	],
+	[
+		"QA",
+		"Qatar",
+		"974"
+	],
+	[
+		"RE",
+		"Réunion",
+		"262"
+	],
+	[
+		"RO",
+		"Romania",
+		"40"
+	],
+	[
+		"RU",
+		"Russia",
+		"7"
+	],
+	[
+		"RW",
+		"Rwanda",
+		"250"
+	],
+	[
+		"WS",
+		"Samoa",
+		"685"
+	],
+	[
+		"SM",
+		"San Marino",
+		"378"
+	],
+	[
+		"ST",
+		"São Tomé & Príncipe",
+		"239"
+	],
+	[
+		"SA",
+		"Saudi Arabia",
+		"966"
+	],
+	[
+		"SN",
+		"Senegal",
+		"221"
+	],
+	[
+		"RS",
+		"Serbia",
+		"381"
+	],
+	[
+		"SC",
+		"Seychelles",
+		"248"
+	],
+	[
+		"SL",
+		"Sierra Leone",
+		"232"
+	],
+	[
+		"SG",
+		"Singapore",
+		"65"
+	],
+	[
+		"SX",
+		"Sint Maarten",
+		"1"
+	],
+	[
+		"SK",
+		"Slovakia",
+		"421"
+	],
+	[
+		"SI",
+		"Slovenia",
+		"386"
+	],
+	[
+		"SB",
+		"Solomon Islands",
+		"677"
+	],
+	[
+		"SO",
+		"Somalia",
+		"252"
+	],
+	[
+		"ZA",
+		"South Africa",
+		"27"
+	],
+	[
+		"KR",
+		"South Korea",
+		"82"
+	],
+	[
+		"SS",
+		"South Sudan",
+		"211"
+	],
+	[
+		"ES",
+		"Spain",
+		"34"
+	],
+	[
+		"LK",
+		"Sri Lanka",
+		"94"
+	],
+	[
+		"BL",
+		"St. Barthélemy",
+		"590"
+	],
+	[
+		"SH",
+		"St. Helena",
+		"290"
+	],
+	[
+		"KN",
+		"St. Kitts & Nevis",
+		"1"
+	],
+	[
+		"LC",
+		"St. Lucia",
+		"1"
+	],
+	[
+		"MF",
+		"St. Martin",
+		"590"
+	],
+	[
+		"PM",
+		"St. Pierre & Miquelon",
+		"508"
+	],
+	[
+		"VC",
+		"St. Vincent & Grenadines",
+		"1"
+	],
+	[
+		"SD",
+		"Sudan",
+		"249"
+	],
+	[
+		"SR",
+		"Suriname",
+		"597"
+	],
+	[
+		"SJ",
+		"Svalbard & Jan Mayen",
+		"47"
+	],
+	[
+		"SE",
+		"Sweden",
+		"46"
+	],
+	[
+		"CH",
+		"Switzerland",
+		"41"
+	],
+	[
+		"SY",
+		"Syria",
+		"963"
+	],
+	[
+		"TW",
+		"Taiwan",
+		"886"
+	],
+	[
+		"TJ",
+		"Tajikistan",
+		"992"
+	],
+	[
+		"TZ",
+		"Tanzania",
+		"255"
+	],
+	[
+		"TH",
+		"Thailand",
+		"66"
+	],
+	[
+		"TL",
+		"Timor-Leste",
+		"670"
+	],
+	[
+		"TG",
+		"Togo",
+		"228"
+	],
+	[
+		"TK",
+		"Tokelau",
+		"690"
+	],
+	[
+		"TO",
+		"Tonga",
+		"676"
+	],
+	[
+		"TT",
+		"Trinidad & Tobago",
+		"1"
+	],
+	[
+		"TA",
+		"Tristan da Cunha",
+		"290"
+	],
+	[
+		"TN",
+		"Tunisia",
+		"216"
+	],
+	[
+		"TR",
+		"Türkiye",
+		"90"
+	],
+	[
+		"TM",
+		"Turkmenistan",
+		"993"
+	],
+	[
+		"TC",
+		"Turks & Caicos Islands",
+		"1"
+	],
+	[
+		"TV",
+		"Tuvalu",
+		"688"
+	],
+	[
+		"VI",
+		"U.S. Virgin Islands",
+		"1"
+	],
+	[
+		"UG",
+		"Uganda",
+		"256"
+	],
+	[
+		"UA",
+		"Ukraine",
+		"380"
+	],
+	[
+		"AE",
+		"United Arab Emirates",
+		"971"
+	],
+	[
+		"GB",
+		"United Kingdom",
+		"44"
+	],
+	[
+		"US",
+		"United States",
+		"1"
+	],
+	[
+		"UY",
+		"Uruguay",
+		"598"
+	],
+	[
+		"UZ",
+		"Uzbekistan",
+		"998"
+	],
+	[
+		"VU",
+		"Vanuatu",
+		"678"
+	],
+	[
+		"VA",
+		"Vatican City",
+		"39"
+	],
+	[
+		"VE",
+		"Venezuela",
+		"58"
+	],
+	[
+		"VN",
+		"Vietnam",
+		"84"
+	],
+	[
+		"WF",
+		"Wallis & Futuna",
+		"681"
+	],
+	[
+		"EH",
+		"Western Sahara",
+		"212"
+	],
+	[
+		"YE",
+		"Yemen",
+		"967"
+	],
+	[
+		"ZM",
+		"Zambia",
+		"260"
+	],
+	[
+		"ZW",
+		"Zimbabwe",
+		"263"
+	]
+], h = (e) => (m.find((t) => t[0] === e) || [
+	"",
+	"",
+	""
+])[2], g = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, _ = class extends HTMLElement {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"value",
+			"country",
+			"placeholder",
+			"disabled"
+		];
+	}
+	constructor() {
+		super(), this._internals = this.attachInternals ? this.attachInternals() : null, this._country = "IN", this._national = "";
+	}
+	connectedCallback() {
+		this._rendered || this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
+	}
+	get value() {
+		return `+${h(this._country)}${this._national}`;
+	}
+	set value(e) {
+		this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
+	}
+	_commit() {
+		this._internals?.setFormValue(this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	render() {
+		let e = this.getAttribute("placeholder") || "Enter phone number";
+		this._country = this.getAttribute("country") || this._country;
+		let t = m.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${g(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		this.innerHTML = `
+      <div class="phone-input-wrap">
+        <div class="phone-country-adornment">
+          <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
+            <span class="${g(this._country)}" data-flag aria-hidden="true"></span>
+            <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
+            <span class="phone-dial" data-dial>+${h(this._country)}</span>
+          </button>
+          <div class="country-dropdown-menu" role="listbox" hidden>
+            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
             <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
           </div>
         </div>
@@ -691,32 +1715,39 @@ var e = class extends HTMLElement {
 		let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"), i = this.querySelector(".country-empty"), a = this.querySelector("input[type=tel]"), o = this.querySelector("[data-flag]"), s = this.querySelector("[data-dial]");
 		if (!e || !t) return;
 		let c = () => !t.hidden, l = () => {
-			t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", d(""), n.focus();
+			let n = e.getBoundingClientRect(), r = t.offsetWidth || 320, i = t.offsetHeight || 320, a = window.innerHeight - n.bottom, o = a < i + 6 && n.top > a ? n.top - i - 6 : n.bottom + 6, s = Math.min(Math.max(8, n.left), Math.max(8, window.innerWidth - r - 8));
+			t.style.top = `${Math.max(8, o)}px`, t.style.left = `${s}px`;
 		}, u = () => {
+			t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", f(""), l(), n.focus();
+		}, d = () => {
 			t.hidden = !0, e.setAttribute("aria-expanded", "false");
-		}, d = (e) => {
+		};
+		this._reposition = () => {
+			c() && l();
+		}, window.addEventListener("scroll", this._reposition, !0), window.addEventListener("resize", this._reposition);
+		let f = (e) => {
 			let t = e.trim().toLowerCase(), n = 0;
 			for (let e of r.querySelectorAll(".country-dropdown-item")) {
 				let r = !t || e.textContent.toLowerCase().includes(t);
 				e.hidden = !r, r && (n += 1);
 			}
 			i && (i.hidden = n > 0);
-		}, f = (e) => {
-			this._country = e, this.setAttribute("country", e), o && (o.textContent = h(e)), s && (s.textContent = `+${g(e)}`);
+		}, p = (e) => {
+			this._country = e, this.setAttribute("country", e), o && (o.className = g(e)), s && (s.textContent = `+${h(e)}`);
 			for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
-			u(), this._commit();
+			d(), this._commit();
 		};
-		e.addEventListener("click", () => c() ? u() : l()), n.addEventListener("input", () => d(n.value)), r.addEventListener("click", (e) => {
+		e.addEventListener("click", () => c() ? d() : u()), n.addEventListener("input", () => f(n.value)), r.addEventListener("click", (e) => {
 			let t = e.target.closest(".country-dropdown-item");
-			t && f(t.dataset.iso);
+			t && p(t.dataset.iso);
 		}), a.addEventListener("input", () => {
 			this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
 		}), this._onDocClick = (e) => {
-			c() && !this.contains(e.target) && u();
+			c() && !this.contains(e.target) && d();
 		}, document.addEventListener("click", this._onDocClick), this._internals?.setFormValue(this.value);
 	}
 	disconnectedCallback() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick);
+		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
 }, v = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), y = class extends HTMLElement {
 	static formAssociated = !0;
@@ -751,14 +1782,20 @@ var e = class extends HTMLElement {
 	get options() {
 		return this._readOptions();
 	}
-	_readOptions() {
-		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+	_snapshotDeclared() {
+		if (this._declared) return;
+		let e = [...this.querySelectorAll(":scope > wui-option")];
+		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
 			selected: e.hasAttribute("selected")
-		}));
+		})));
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
 	}
 	render() {
+		this._snapshotDeclared();
 		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...", i = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
 		i && (this._value = String(i.value)), this._internals?.setFormValue(this._value);
 		let a = e.map((e) => {