import { t } from './client-only-CAHE6F0E.mjs';
import { g } from './SvgIcon-BKMVrGmr.mjs';
import { useSSRContext, ref, watch, resolveComponent, mergeProps, withCtx, createVNode, openBlock, createBlock, toDisplayString, createCommentVNode, unref, isRef, Transition, Fragment, renderList, withDirectives, vModelText } from 'vue';
import { ssrRenderComponent, ssrRenderAttr, ssrInterpolate, ssrIncludeBooleanAttr, ssrRenderClass } from 'vue/server-renderer';
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
import { u as ef, j as Fv } from './server.mjs';

const k = { __name: "BasePhoneInput", __ssrInlineRender: true, props: { name: { type: String, required: true }, label: { type: String, required: false }, placeholder: { type: String, required: false }, value: { type: Object, required: false }, disabled: { type: Boolean, required: false }, rounded: { type: Boolean, required: false } }, emits: ["update:value"], setup(a2, { expose: k2, emit: E2 }) {
  const P = ef(), F = E2, M = a2, O = Fv(M.name), R = ref(P.countries && P.countries.length > 0 ? P.countries[0] : null), z = ref(""), A = () => {
    var e2, l2;
    const a3 = { phone_number: z.value, phone_code: R.value.phone_code, phone_limit: +R.value.max_length };
    (null == (e2 = M.value) ? undefined : e2.phone_number) === z.value && (null == (l2 = M.value) ? undefined : l2.phone_code) === R.value.phone_code || (O.setValue(a3), F("update:value", a3));
  };
  watch(() => M.value, (e2) => {
    if (e2) {
      const l2 = P.countries.find((l3) => l3.phone_code == e2.phone_code);
      (l2 && R.value.phone_code !== l2.phone_code || z.value !== e2.phone_number) && (l2 && (R.value = l2), z.value = e2.phone_number, A());
    }
  }, { deep: true, immediate: true }), watch(() => R.value, () => {
    A();
  }, { deep: true });
  return k2({ clearInput: () => {
    z.value = false;
  } }), (n2, d2, B2, U2) => {
    const k3 = resolveComponent("veeField"), E3 = t, F2 = g, M2 = resolveComponent("VeeErrorMessage");
    d2(ssrRenderComponent(k3, mergeProps({ name: a2.name }, U2), { default: withCtx(({ field: e2, meta: l2 }, n3, d3, o2) => {
      var u2, B3, U3, k4, O2, C;
      if (!n3) return [createVNode("div", { class: "input-phone-wrapper" }, [a2.label ? (openBlock(), createBlock("label", { key: 0, for: a2.name + "id" }, toDisplayString(a2.label), 9, ["for"])) : createCommentVNode("", true), createVNode("div", { dir: "ltr", class: "flex items-center" }, [createVNode("div", null, [createVNode(E3, null, { default: withCtx(() => [createVNode(unref(Listbox), { modelValue: unref(R), "onUpdate:modelValue": (e3) => isRef(R) ? R.value = e3 : null, disabled: a2.disabled }, { default: withCtx(() => [createVNode(unref(ListboxButton), { class: [a2.disabled && "bg-[#fafafa]", a2.rounded && "!rounded-s-full"] }, { default: withCtx(() => [createVNode("div", { class: "flex items-center gap-1.5" }, [createVNode("img", { class: "h-5 w-7 object-cover", src: unref(R).flag, alt: unref(R).name }, null, 8, ["src", "alt"]), createVNode(F2, { name: "chevron-down" })])]), _: 1 }, 8, ["class"]), createVNode(Transition, { name: "fade" }, { default: withCtx(() => [createVNode(unref(ListboxOptions), null, { default: withCtx(() => [(openBlock(true), createBlock(Fragment, null, renderList(unref(P).countries, (e3) => (openBlock(), createBlock(unref(ListboxOption), { as: "template", key: e3.id, value: e3 }, { default: withCtx(({ active: l3, selected: a3 }) => [createVNode("li", { class: ["flex items-center gap-1", [l3 && "bg-primary bg-opacity-20", a3 && "bg-primary bg-opacity-20"]] }, [createVNode("img", { class: "h-5 w-7 object-cover", src: null == e3 ? undefined : e3.flag, alt: null == e3 ? undefined : e3.name }, null, 8, ["src", "alt"]), createVNode("span", null, "+" + toDisplayString(null == e3 ? undefined : e3.phone_code), 1)], 2)]), _: 2 }, 1032, ["value"]))), 128))]), _: 1 })]), _: 1 })]), _: 1 }, 8, ["modelValue", "onUpdate:modelValue", "disabled"])]), _: 1 })]), createVNode("div", { class: "flex-grow" }, [withDirectives(createVNode("input", { disabled: a2.disabled, "onUpdate:modelValue": (e3) => isRef(z) ? z.value = e3 : null, type: "number", class: ["appearance-none", a2.rounded ? "!rounded-e-full" : ""], onInput: A, placeholder: a2.placeholder, id: `phoneInput_${a2.name}` }, null, 42, ["disabled", "onUpdate:modelValue", "placeholder", "id"]), [[vModelText, unref(z)]])])])]), +(null == (O2 = null == (k4 = unref(z)) ? undefined : k4.toString()) ? undefined : O2.length) != +(null == (C = unref(R)) ? undefined : C.max_length) ? (openBlock(), createBlock(M2, { key: 0, class: "text-sm text-red-500", name: a2.name }, null, 8, ["name"])) : createCommentVNode("", true)];
      n3(`<div class="input-phone-wrapper"${o2}>`), a2.label ? n3(`<label${ssrRenderAttr("for", a2.name + "id")}${o2}>${ssrInterpolate(a2.label)}</label>`) : n3("<!---->"), n3(`<div dir="ltr" class="flex items-center"${o2}><div${o2}>`), n3(ssrRenderComponent(E3, null, {}, d3, o2)), n3(`</div><div class="flex-grow"${o2}><input${ssrIncludeBooleanAttr(a2.disabled) ? " disabled" : ""}${ssrRenderAttr("value", unref(z))} type="number" class="${ssrRenderClass([a2.rounded ? "!rounded-e-full" : "", "appearance-none"])}"${ssrRenderAttr("placeholder", a2.placeholder)}${ssrRenderAttr("id", `phoneInput_${a2.name}`)}${o2}></div></div></div>`), +(null == (B3 = null == (u2 = unref(z)) ? undefined : u2.toString()) ? undefined : B3.length) != +(null == (U3 = unref(R)) ? undefined : U3.max_length) ? n3(ssrRenderComponent(M2, { class: "text-sm text-red-500", name: a2.name }, null, d3, o2)) : n3("<!---->");
    }), _: 1 }, B2));
  };
} }, E = k.setup;
k.setup = (e2, l2) => {
  const n2 = useSSRContext();
  return (n2.modules || (n2.modules = /* @__PURE__ */ new Set())).add("components/Inputs/BasePhoneInput.vue"), E ? E(e2, l2) : undefined;
};

export { k };
//# sourceMappingURL=BasePhoneInput-D6eLsH_Y.mjs.map
