@quidgest/ui 0.27.1 → 0.28.0

package/esm/components/QPhoneField/QPhoneField.vue.js

@@ -1,42 +1,43 @@
 import { useId as e } from "../../composables/useId/index.js";
-import { QClearButton as t } from "../__internal__/QClearButton/index.js";
-import { QTextField as n } from "../QTextField/index.js";
-import { QInputGroup as r } from "../QInputGroup/index.js";
-import { DEFAULT_TEXTS as i } from "./constants.js";
-import { QSelect as a } from "../QSelect/index.js";
-import o from "../../vendors/country-flag-icons/modules/hasFlag.js";
-import s from "../../vendors/libphonenumber-js/examples.mobile.json.js";
-import c from "../../vendors/libphonenumber-js/es6/parseIncompletePhoneNumber.js";
+import { mergeDescribedBy as t } from "../__internal__/QHelpPopover/resolveHelp.js";
+import { QClearButton as n } from "../__internal__/QClearButton/index.js";
+import { QTextField as r } from "../QTextField/index.js";
+import { QInputGroup as i } from "../QInputGroup/index.js";
+import { DEFAULT_ICONS as a, DEFAULT_TEXTS as o } from "./constants.js";
+import { QSelect as s } from "../QSelect/index.js";
+import c from "../../vendors/country-flag-icons/modules/hasFlag.js";
+import ee from "../../vendors/libphonenumber-js/examples.mobile.json.js";
+import te from "../../vendors/libphonenumber-js/es6/parseIncompletePhoneNumber.js";
 import { parsePhoneNumber as l } from "../../vendors/libphonenumber-js/max/exports/parsePhoneNumber.js";
 import { AsYouType as u } from "../../vendors/libphonenumber-js/max/exports/AsYouType.js";
 import { isSupportedCountry as d } from "../../vendors/libphonenumber-js/max/exports/isSupportedCountry.js";
-import { getCountries as ee } from "../../vendors/libphonenumber-js/max/exports/getCountries.js";
+import { getCountries as ne } from "../../vendors/libphonenumber-js/max/exports/getCountries.js";
 import { getCountryCallingCode as f } from "../../vendors/libphonenumber-js/max/exports/getCountryCallingCode.js";
-import { getExampleNumber as te } from "../../vendors/libphonenumber-js/max/exports/getExampleNumber.js";
-import { formatIncompletePhoneNumber as ne } from "../../vendors/libphonenumber-js/max/exports/formatIncompletePhoneNumber.js";
-import { computed as p, createBlock as re, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as ie, createVNode as _, defineComponent as ae, mergeModels as v, mergeProps as oe, nextTick as y, normalizeClass as b, openBlock as x, ref as S, renderSlot as C, toDisplayString as w, toRef as se, unref as T, useAttrs as ce, useModel as E, useSlots as le, useTemplateRef as D, watch as O, withCtx as k } from "vue";
+import { getExampleNumber as re } from "../../vendors/libphonenumber-js/max/exports/getExampleNumber.js";
+import { formatIncompletePhoneNumber as ie } from "../../vendors/libphonenumber-js/max/exports/formatIncompletePhoneNumber.js";
+import { computed as p, createBlock as ae, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as oe, createVNode as _, defineComponent as se, mergeModels as v, mergeProps as ce, nextTick as y, normalizeClass as b, openBlock as x, ref as S, renderSlot as C, toDisplayString as w, toRef as le, unref as T, useAttrs as ue, useModel as E, useSlots as de, useTemplateRef as D, watch as O, withCtx as k } from "vue";
 //#region src/components/QPhoneField/QPhoneField.vue?vue&type=script&setup=true&lang.ts
-var ue = { class: "q-phone-field__flag-code" }, de = {
+var fe = { class: "q-phone-field__flag-code" }, pe = {
 	key: 1,
 	class: "q-phone-field__flag-fallback",
 	"aria-hidden": "true"
-}, fe = { class: "q-phone-field__country-code" }, pe = { class: "q-phone-field__flag-code" }, me = {
+}, me = { class: "q-phone-field__country-code" }, he = { class: "q-phone-field__flag-code" }, ge = {
 	key: 1,
 	class: "q-phone-field__flag-fallback",
 	"aria-hidden": "true"
-}, he = { class: "q-phone-field__country-name" }, ge = { class: "q-phone-field__item-code" }, _e = {
+}, _e = { class: "q-phone-field__country-name" }, ve = { class: "q-phone-field__item-code" }, ye = {
 	key: 0,
 	class: "q-phone-field__empty"
-}, ve = [
+}, be = [
 	"name",
 	"value",
 	"form",
 	"disabled"
-], ye = ["id"], be = {
+], xe = ["id"], Se = {
 	key: 0,
 	class: "q-phone-field__validation-message",
 	role: "alert"
-}, A = /*@__PURE__*/ ae({
+}, A = /*@__PURE__*/ se({
 	inheritAttrs: !1,
 	__name: "QPhoneField",
 	props: /*@__PURE__*/ v({
@@ -46,6 +47,10 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 		required: { type: Boolean },
 		for: {},
 		labelPosition: {},
+		help: {},
+		helpDisplay: {},
+		icons: { default: () => a },
+		texts: { default: () => o },
 		size: {},
 		readonly: { type: Boolean },
 		disabled: { type: Boolean },
@@ -59,8 +64,7 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 			type: Boolean,
 			default: !0
 		},
-		inline: { type: Boolean },
-		texts: { default: () => i }
+		inline: { type: Boolean }
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {},
@@ -77,145 +81,145 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 		"update:country",
 		"update:open"
 	]),
-	setup(i, { expose: ae, emit: v }) {
-		let A = i, xe = v, Se = le(), j = E(i, "modelValue"), M = E(i, "country"), N = E(i, "open"), Ce = /^[+\d\s().-]+$/;
-		function we(e) {
+	setup(a, { expose: o, emit: se }) {
+		let v = a, A = se, Ce = de(), j = E(a, "modelValue"), M = E(a, "country"), N = E(a, "open"), we = /^[+\d\s().-]+$/;
+		function Te(e) {
 			let t = e?.toUpperCase();
 			return t && d(t) ? t : void 0;
 		}
-		function Te(e) {
-			if (e) return we(e.split(/[-_]/).slice(1).find((e) => /^[A-Za-z]{2}$/.test(e)));
+		function Ee(e) {
+			if (e) return Te(e.split(/[-_]/).slice(1).find((e) => /^[A-Za-z]{2}$/.test(e)));
 		}
-		let P = ce(), F = e(se(A, "id")), Ee = p(() => `${F.value}_input`), De = p(() => `${F.value}_country`), I = p(() => `${F.value}_validation`), Oe = p(() => typeof P.name == "string" && P.name ? P.name : void 0), ke = p(() => typeof P.form == "string" && P.form ? P.form : void 0), Ae = p(() => Object.fromEntries(Object.entries(P).filter(([e]) => ![
+		let P = ue(), F = e(le(v, "id")), De = p(() => `${F.value}_group`), Oe = p(() => `${F.value}_input`), ke = p(() => `${F.value}_country`), I = p(() => `${F.value}_validation`), Ae = p(() => typeof P.name == "string" && P.name ? P.name : void 0), je = p(() => typeof P.form == "string" && P.form ? P.form : void 0), Me = p(() => Object.fromEntries(Object.entries(P).filter(([e]) => ![
 			"aria-describedby",
 			"aria-label",
 			"name"
-		].includes(e)))), je = p(() => {
+		].includes(e)))), Ne = p(() => {
 			let e = P["aria-label"];
-			return typeof e == "string" && e ? e : A.label ? void 0 : A.texts.phoneNumber;
-		}), Me = D("field"), Ne = D("input"), Pe = D("countrySelect"), Fe = D("searchField"), Ie = p(() => Me.value?.fieldRef ?? null), L = p(() => Ne.value?.inputRef ?? null), R = S(""), z = S(""), B = S(), V = S(""), Le = S(!1), H = !1, Re = p(() => {
+			return typeof e == "string" && e ? e : v.label ? void 0 : v.texts.phoneNumber;
+		}), Pe = D("field"), Fe = D("input"), Ie = D("countrySelect"), Le = D("searchField"), Re = p(() => Pe.value?.fieldRef ?? null), L = p(() => Fe.value?.inputRef ?? null), R = S(""), z = S(""), B = S(), V = S(""), ze = S(!1), H = !1, Be = p(() => {
 			try {
-				return new Intl.DisplayNames([A.locale], { type: "region" });
+				return new Intl.DisplayNames([v.locale], { type: "region" });
 			} catch {
 				return new Intl.DisplayNames(["en-US"], { type: "region" });
 			}
 		});
 		function U(e) {
-			let t = Re.value.of(e);
+			let t = Be.value.of(e);
 			return !t || t === e ? e : t;
 		}
 		let W = p(() => {
-			let e = A.countries ?? ee(), t = e.filter((t, n) => d(t) && e.indexOf(t) === n);
-			return A.countries ? t : t.sort(Ye);
-		}), ze = p(() => W.value.map((e) => {
+			let e = v.countries ?? ne(), t = e.filter((t, n) => d(t) && e.indexOf(t) === n);
+			return v.countries ? t : t.sort(Ze);
+		}), Ve = p(() => W.value.map((e) => {
 			let t = U(e), n = f(e);
 			return {
 				key: e,
 				label: `${t} (+${n})`,
 				name: t,
 				callingCode: n,
-				hasFlag: o(e),
-				searchValue: Je(`${t} ${e} +${n}`)
+				hasFlag: c(e),
+				searchValue: Xe(`${t} ${e} +${n}`)
 			};
-		})), Be = p(() => {
-			let e = Je(z.value);
-			return e ? ze.value.filter((t) => t.searchValue.includes(e)) : ze.value;
-		}), G = p(() => B.value ? f(B.value) : V.value), Ve = p(() => B.value ? o(B.value) : !1), He = p({
+		})), He = p(() => {
+			let e = Xe(z.value);
+			return e ? Ve.value.filter((t) => t.searchValue.includes(e)) : Ve.value;
+		}), G = p(() => B.value ? f(B.value) : V.value), Ue = p(() => B.value ? c(B.value) : !1), We = p({
 			get: () => B.value,
 			set: (e) => {
-				e && ut(e);
+				e && ft(e);
 			}
-		}), Ue = p(() => !B.value || !G.value ? A.texts.selectCountry : `${A.texts.selectCountry}: ${U(B.value)} (+${G.value})`), We = p(() => {
-			if (A.readonly || A.disabled) return;
-			if (A.placeholder !== void 0) return A.placeholder;
+		}), Ge = p(() => !B.value || !G.value ? v.texts.selectCountry : `${v.texts.selectCountry}: ${U(B.value)} (+${G.value})`), Ke = p(() => {
+			if (v.readonly || v.disabled) return;
+			if (v.placeholder !== void 0) return v.placeholder;
 			if (!B.value) return;
-			let e = te(B.value, s);
+			let e = re(B.value, ee);
 			if (e) return Y(e.formatInternational(), e.countryCallingCode).replace(/\d/g, "0");
-		}), Ge = p(() => A.clearable && !!j.value && !A.readonly && !A.disabled), K = p(() => {
-			let e = j.value ? l(j.value, { extract: !1 }) : void 0, t = e?.country ?? B.value, n = e?.countryCallingCode ?? G.value, r = e && !e.country && e.countryCallingCode && (e.isPossible() || e.isValid()) ? A.countries === void 0 : t ? W.value.includes(t) : !!n && W.value.some((e) => f(e) === n);
+		}), qe = p(() => v.clearable && !!j.value && !v.readonly && !v.disabled), K = p(() => {
+			let e = j.value ? l(j.value, { extract: !1 }) : void 0, t = e?.country ?? B.value, n = e?.countryCallingCode ?? G.value, r = e && !e.country && e.countryCallingCode && (e.isPossible() || e.isValid()) ? v.countries === void 0 : t ? W.value.includes(t) : !!n && W.value.some((e) => f(e) === n);
 			return {
 				isPossible: !!e?.isPossible(),
 				isValid: !!e?.isValid(),
 				isAllowedCountry: r
 			};
-		}), Ke = p(() => A.autoValidate && Le.value && !A.readonly && !A.disabled && (A.required && !j.value || !!j.value && (!K.value.isValid || !K.value.isAllowedCountry))), q = p(() => A.invalid || Ke.value), J = p(() => {
-			if (Ke.value) return j.value ? K.value.isValid ? A.texts.unsupportedCountry : A.texts.invalidNumber : A.texts.requiredNumber;
-		}), qe = p(() => [P["aria-describedby"], J.value || Se.extras ? I.value : void 0].filter(Boolean).join(" ") || void 0);
-		function Je(e) {
+		}), Je = p(() => v.autoValidate && ze.value && !v.readonly && !v.disabled && (v.required && !j.value || !!j.value && (!K.value.isValid || !K.value.isAllowedCountry))), q = p(() => v.invalid || Je.value), J = p(() => {
+			if (Je.value) return j.value ? K.value.isValid ? v.texts.unsupportedCountry : v.texts.invalidNumber : v.texts.requiredNumber;
+		}), Ye = p(() => [P["aria-describedby"], J.value || Ce.extras ? I.value : void 0].filter(Boolean).join(" ") || void 0);
+		function Xe(e) {
 			return e.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
 		}
-		function Ye(e, t) {
+		function Ze(e, t) {
 			try {
-				return U(e).localeCompare(U(t), A.locale);
+				return U(e).localeCompare(U(t), v.locale);
 			} catch {
 				return U(e).localeCompare(U(t), "en-US");
 			}
 		}
-		function Xe(e) {
-			return c(e.trim().replace(/^00/, "+"));
+		function Qe(e) {
+			return te(e.trim().replace(/^00/, "+"));
 		}
-		function Ze(e, t) {
+		function $e(e, t) {
 			let n = e.getNumber(), r = e.getCountry() ?? n?.country;
 			if (r) return r;
 			let i = e.getCallingCode(), a = n?.nationalNumber ?? "", o = n?.getPossibleCountries() ?? [];
 			return t && (o.includes(t) || a && i && f(t) === i) ? t : o.length === 1 ? o[0] : void 0;
 		}
-		function Qe(e, t, n) {
+		function et(e, t, n) {
 			if (!e) return "";
 			let r = n ? l(n, { extract: !1 }) : void 0;
 			if (r && (r.isPossible() || r.isValid())) return Y(r.formatInternational(), r.countryCallingCode);
-			if (!t) return ne(e);
+			if (!t) return ie(e);
 			let i = f(t);
 			return Y(new u().input(`+${i}${e}`), i);
 		}
 		function Y(e, t) {
 			return e.slice(`+${t}`.length).trim();
 		}
-		function $e(e) {
+		function tt(e) {
 			let t = e.trim();
-			return /\d/.test(t) && Ce.test(t) && (t.match(/\+/g) ?? []).length <= 1 && (!t.includes("+") || t.startsWith("+"));
+			return /\d/.test(t) && we.test(t) && (t.match(/\+/g) ?? []).length <= 1 && (!t.includes("+") || t.startsWith("+"));
 		}
 		let X;
 		function Z(e) {
 			j.value !== e && (X = e, j.value = e, j.value === e && (X = void 0));
 		}
-		function et(e) {
+		function nt(e) {
 			M.value !== e && (M.value = e);
 		}
 		function Q(e, t = "") {
-			B.value = e, V.value = e ? f(e) : t, et(e);
+			B.value = e, V.value = e ? f(e) : t, nt(e);
 		}
-		function tt() {
+		function rt() {
 			if (M.value && W.value.includes(M.value)) return M.value;
-			if (A.defaultCountry && W.value.includes(A.defaultCountry)) return A.defaultCountry;
-			let e = Te(A.locale);
+			if (v.defaultCountry && W.value.includes(v.defaultCountry)) return v.defaultCountry;
+			let e = Ee(v.locale);
 			return e && W.value.includes(e) ? e : W.value[0];
 		}
-		function nt(e, t) {
-			let n = Xe(e);
+		function it(e, t) {
+			let n = Qe(e);
 			if (!n) {
 				R.value = "", t && Z("");
 				return;
 			}
 			let r = new u();
 			r.input(n);
-			let i = r.getNumber(), a = r.getCallingCode() ?? "", o = Ze(r, B.value), s = r.getNumberValue()?.toString() ?? n, c = i?.nationalNumber ?? (a ? n.slice(`+${a}`.length) : n);
-			Q(o, a), R.value = Qe(c, o, s), t && Z(s);
+			let i = r.getNumber(), a = r.getCallingCode() ?? "", o = $e(r, B.value), s = r.getNumberValue()?.toString() ?? n, c = i?.nationalNumber ?? (a ? n.slice(`+${a}`.length) : n);
+			Q(o, a), R.value = et(c, o, s), t && Z(s);
 		}
-		function rt(e) {
-			if (B.value || Q(tt()), !e) {
+		function at(e) {
+			if (B.value || Q(rt()), !e) {
 				R.value = "";
 				return;
 			}
 			let t = e.trim();
 			if (t.startsWith("+") || t.startsWith("00")) {
-				nt(t, !0);
+				it(t, !0);
 				return;
 			}
-			it(t);
+			ot(t);
 		}
-		function it(e, t) {
-			let n = c(e).replace(/^\+/, "").replace(/\D/g, "");
+		function ot(e, t) {
+			let n = te(e).replace(/^\+/, "").replace(/\D/g, "");
 			if (!n) {
 				R.value = "", Z(""), $(t);
 				return;
@@ -225,7 +229,7 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 			let i = r ? f(r) : V.value;
 			Z(i ? `+${i}${n}` : `+${n}`), $(t);
 		}
-		function at(e) {
+		function st(e) {
 			let t = e.selectionStart ?? e.value.length;
 			return {
 				digitOffset: (e.value.slice(0, t).match(/\d/g) ?? []).length,
@@ -249,134 +253,143 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 			for (let [i, a] of [...t.value].entries()) if (/\d/.test(a) && (n += 1), r = i + 1, n >= e.digitOffset) break;
 			t.setSelectionRange(r, r);
 		}
-		function ot(e) {
-			let t = e.value, n = at(e);
+		function ct(e) {
+			let t = e.value, n = st(e);
 			if (t.trim().startsWith("+") || t.trim().startsWith("00")) {
-				nt(t, !0), e.value = R.value, $(n);
+				it(t, !0), e.value = R.value, $(n);
 				return;
 			}
-			it(t, n), e.value = R.value;
+			ot(t, n), e.value = R.value;
 		}
-		function st(e) {
-			ot(e.target);
+		function lt(e) {
+			ct(e.target);
 		}
-		function ct(e) {
-			if (A.readonly || A.disabled) {
+		function ut(e) {
+			if (v.readonly || v.disabled) {
 				e.preventDefault();
 				return;
 			}
 			let t = e.clipboardData?.getData("text/plain") ?? e.clipboardData?.getData("text");
-			if (t === void 0 || (e.preventDefault(), !$e(t))) return;
+			if (t === void 0 || (e.preventDefault(), !tt(t))) return;
 			let n = e.currentTarget, r = n.selectionStart ?? n.value.length, i = n.selectionEnd ?? r, a = `${n.value.slice(0, r)}${t}${n.value.slice(i)}`;
-			if (!$e(a)) return;
+			if (!tt(a)) return;
 			n.value = a;
 			let o = r + t.length;
-			n.setSelectionRange(o, o), ot(n);
+			n.setSelectionRange(o, o), ct(n);
 		}
-		function lt() {
+		function dt() {
 			return (j.value ? l(j.value, { extract: !1 }) : void 0)?.nationalNumber ?? R.value.replace(/\D/g, "");
 		}
-		function ut(e) {
-			if (A.readonly || A.disabled || !W.value.includes(e)) return;
-			let t = lt(), n = f(e);
+		function ft(e) {
+			if (v.readonly || v.disabled || !W.value.includes(e)) return;
+			let t = dt(), n = f(e);
 			if (H = N.value, t) {
 				let r = `+${n}${t}`, i = new u();
 				i.input(r);
-				let a = Ze(i, e) ?? e;
-				Q(a, n), R.value = Qe(t, a, r), Z(r);
+				let a = $e(i, e) ?? e;
+				Q(a, n), R.value = et(t, a, r), Z(r);
 			} else Q(e, n);
 			N.value = !1;
 		}
-		function dt(e) {
-			["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), Pe.value?.focusList());
+		function pt(e) {
+			["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), Ie.value?.focusList());
 		}
-		async function ft() {
-			await y(), Fe.value?.inputRef?.focus();
+		async function mt() {
+			await y(), Le.value?.inputRef?.focus();
 		}
-		function pt() {
+		function ht() {
 			z.value = "", H && (H = !1, y(() => L.value?.focus()));
 		}
-		function mt() {
-			Le.value = !0;
+		function gt() {
+			ze.value = !0;
 		}
-		function ht(e) {
-			R.value = "", Z(""), xe("click:clear", e), y(() => L.value?.focus());
+		function _t(e) {
+			R.value = "", Z(""), A("click:clear", e), y(() => L.value?.focus());
 		}
 		return O(j, (e) => {
 			if (e === X) {
 				X = void 0;
 				return;
 			}
-			X = void 0, rt(e);
+			X = void 0, at(e);
 		}, {
 			immediate: !0,
 			flush: "sync"
 		}), O(M, (e) => {
-			e && d(e) && W.value.includes(e) && e !== B.value && ut(e);
+			e && d(e) && W.value.includes(e) && e !== B.value && ft(e);
 		}, { flush: "sync" }), O(W, () => {
-			!j.value && !W.value.includes(B.value) && Q(tt());
-		}), O(K, (e) => xe("validity-change", e), { immediate: !0 }), ae({
-			fieldRef: Ie,
+			!j.value && !W.value.includes(B.value) && Q(rt());
+		}), O(K, (e) => A("validity-change", e), { immediate: !0 }), o({
+			fieldRef: Re,
 			inputRef: L,
 			validity: K
-		}), (e, i) => (x(), re(T(r), {
+		}), (e, a) => (x(), ae(T(i), {
+			id: De.value,
 			ref: "field",
-			class: b(["q-phone-field", A.class]),
-			for: Ee.value,
-			label: A.label,
-			"label-position": A.labelPosition,
-			size: A.size,
-			required: A.required,
-			readonly: A.readonly,
-			disabled: A.disabled,
-			invalid: q.value
-		}, ie({
+			class: b(["q-phone-field", v.class]),
+			for: Oe.value,
+			label: v.label,
+			"label-position": v.labelPosition,
+			size: v.size,
+			required: v.required,
+			readonly: v.readonly,
+			disabled: v.disabled,
+			invalid: q.value,
+			help: v.help,
+			"help-display": v.helpDisplay,
+			icons: v.icons,
+			texts: v.texts
+		}, oe({
 			"label.prepend": k(() => [C(e.$slots, "label.prepend")]),
 			"label.append": k(() => [C(e.$slots, "label.append")]),
-			default: k(() => [
-				_(T(a), {
-					id: De.value,
+			default: k(({ describedBy: i }) => [
+				_(T(s), {
+					id: ke.value,
 					ref: "countrySelect",
-					modelValue: He.value,
-					"onUpdate:modelValue": i[1] ||= (e) => He.value = e,
+					modelValue: We.value,
+					"onUpdate:modelValue": a[1] ||= (e) => We.value = e,
 					open: N.value,
-					"onUpdate:open": i[2] ||= (e) => N.value = e,
+					"onUpdate:open": a[2] ||= (e) => N.value = e,
 					class: "q-phone-field__country-select",
 					"item-label": "label",
 					"item-value": "key",
 					size: "mini",
-					items: Be.value,
-					"overlay-anchor": Ie.value,
-					readonly: A.readonly,
-					disabled: A.disabled || W.value.length === 0,
-					inline: A.inline,
+					items: He.value,
+					"overlay-anchor": Re.value,
+					readonly: v.readonly,
+					disabled: v.disabled || W.value.length === 0,
+					inline: v.inline,
 					"select-on-tab": !1,
-					"aria-label": Ue.value,
-					onShow: ft,
-					onHide: pt
+					icons: v.icons,
+					texts: v.texts,
+					"aria-label": Ge.value,
+					onShow: mt,
+					onHide: ht
 				}, {
-					prepend: k(() => [Ve.value && B.value ? (x(), h("span", {
+					prepend: k(() => [Ue.value && B.value ? (x(), h("span", {
 						key: 0,
 						class: b(["q-phone-field__flag", `flag:${B.value}`]),
 						"aria-hidden": "true"
-					}, [g("span", ue, w(B.value), 1)], 2)) : B.value ? (x(), h("span", de, w(B.value), 1)) : m("v-if", !0)]),
-					value: k(() => [g("span", fe, w(G.value ? `+${G.value}` : "-"), 1)]),
-					"body.prepend": k(() => [_(T(n), {
+					}, [g("span", fe, w(B.value), 1)], 2)) : B.value ? (x(), h("span", pe, w(B.value), 1)) : m("v-if", !0)]),
+					value: k(() => [g("span", me, w(G.value ? `+${G.value}` : "-"), 1)]),
+					"body.prepend": k(() => [_(T(r), {
 						ref: "searchField",
 						modelValue: z.value,
-						"onUpdate:modelValue": i[0] ||= (e) => z.value = e,
+						"onUpdate:modelValue": a[0] ||= (e) => z.value = e,
 						class: "q-phone-field__search",
 						size: "block",
 						clearable: "",
 						autocomplete: "off",
-						"aria-label": A.texts.searchCountry,
-						placeholder: A.texts.searchCountry,
-						texts: A.texts,
-						onKeydown: dt
+						"aria-label": v.texts.searchCountry,
+						placeholder: v.texts.searchCountry,
+						icons: v.icons,
+						texts: v.texts,
+						onKeydown: pt
 					}, null, 8, [
 						"modelValue",
 						"aria-label",
 						"placeholder",
+						"icons",
 						"texts"
 					])]),
 					item: k(({ item: e }) => [
@@ -384,11 +397,11 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 							key: 0,
 							class: b(["q-phone-field__flag", `flag:${e.key}`]),
 							"aria-hidden": "true"
-						}, [g("span", pe, w(e.key), 1)], 2)) : (x(), h("span", me, w(e.key), 1)),
-						g("span", he, w(e.name), 1),
-						g("span", ge, "+" + w(e.callingCode), 1)
+						}, [g("span", he, w(e.key), 1)], 2)) : (x(), h("span", ge, w(e.key), 1)),
+						g("span", _e, w(e.name), 1),
+						g("span", ve, "+" + w(e.callingCode), 1)
 					]),
-					"body.append": k(() => [Be.value.length === 0 ? (x(), h("div", _e, w(A.texts.noCountries), 1)) : m("v-if", !0)]),
+					"body.append": k(() => [He.value.length === 0 ? (x(), h("div", ye, w(v.texts.noCountries), 1)) : m("v-if", !0)]),
 					_: 1
 				}, 8, [
 					"id",
@@ -399,37 +412,42 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 					"readonly",
 					"disabled",
 					"inline",
+					"icons",
+					"texts",
 					"aria-label"
 				]),
-				_(T(n), oe(Ae.value, {
+				_(T(r), ce(Me.value, {
 					id: T(F),
 					ref: "input",
 					modelValue: R.value,
-					"onUpdate:modelValue": i[3] ||= (e) => R.value = e,
+					"onUpdate:modelValue": a[3] ||= (e) => R.value = e,
 					class: "q-phone-field__input",
 					type: "tel",
 					inputmode: "tel",
 					autocomplete: "tel",
 					size: "block",
-					required: A.required,
-					placeholder: We.value,
-					readonly: A.readonly,
-					disabled: A.disabled,
+					required: v.required,
+					placeholder: Ke.value,
+					readonly: v.readonly,
+					disabled: v.disabled,
 					invalid: q.value,
-					"aria-label": je.value,
+					icons: v.icons,
+					texts: v.texts,
+					"aria-label": Ne.value,
 					"aria-invalid": q.value || void 0,
-					"aria-describedby": qe.value,
-					onInput: st,
-					onPaste: ct,
-					onBlur: mt
-				}), ie({ _: 2 }, [e.$slots.append || Ge.value ? {
+					"aria-describedby": T(t)(i, Ye.value),
+					onInput: lt,
+					onPaste: ut,
+					onBlur: gt
+				}), oe({ _: 2 }, [e.$slots.append || qe.value ? {
 					name: "append",
-					fn: k(() => [C(e.$slots, "append"), Ge.value ? (x(), re(T(t), {
+					fn: k(() => [C(e.$slots, "append"), qe.value ? (x(), ae(T(n), {
 						key: 0,
 						"data-testid": "q-phone-field__clear-button",
-						texts: A.texts,
-						onClick: ht
-					}, null, 8, ["texts"])) : m("v-if", !0)]),
+						icons: v.icons,
+						texts: v.texts,
+						onClick: _t
+					}, null, 8, ["icons", "texts"])) : m("v-if", !0)]),
 					key: "0"
 				} : void 0]), 1040, [
 					"id",
@@ -439,18 +457,21 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 					"readonly",
 					"disabled",
 					"invalid",
+					"icons",
+					"texts",
 					"aria-label",
 					"aria-invalid",
 					"aria-describedby"
 				]),
-				Oe.value ? (x(), h("input", {
+				m(" The visible input contains a national display value; submit the E.164 model instead. "),
+				Ae.value ? (x(), h("input", {
 					key: 0,
 					type: "hidden",
-					name: Oe.value,
+					name: Ae.value,
 					value: j.value,
-					form: ke.value,
-					disabled: A.disabled
-				}, null, 8, ve)) : m("v-if", !0)
+					form: je.value,
+					disabled: v.disabled
+				}, null, 8, be)) : m("v-if", !0)
 			]),
 			_: 2
 		}, [e.$slots.extras || J.value ? {
@@ -459,9 +480,10 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 				message: J.value,
 				validity: K.value,
 				validationId: I.value
-			}, () => [J.value ? (x(), h("span", be, w(J.value), 1)) : m("v-if", !0)])], 8, ye)]),
+			}, () => [J.value ? (x(), h("span", Se, w(J.value), 1)) : m("v-if", !0)])], 8, xe)]),
 			key: "0"
 		} : void 0]), 1032, [
+			"id",
 			"class",
 			"for",
 			"label",
@@ -470,7 +492,11 @@ var ue = { class: "q-phone-field__flag-code" }, de = {
 			"required",
 			"readonly",
 			"disabled",
-			"invalid"
+			"invalid",
+			"help",
+			"help-display",
+			"icons",
+			"texts"
 		]));
 	}
 });