import e from "../DropdownListItem.js";
import { tap as t } from "../../helpers/functions.js";
import { normalizeListOptions as n } from "../../helpers/utils.js";
import r from "../PlTooltip/PlTooltip.js";
import "../PlTooltip/index.js";
import { getErrorMessage as i } from "../../helpers/error.js";
import a from "../LongText.js";
import o from "../PlSvg/PlSvg.js";
import "../PlSvg/index.js";
import s from "../PlIcon24/PlIcon24.js";
import ee from "../PlIcon16/PlIcon16.js";
import './pl-autocomplete.css';/* empty css                */
import te from "../../utils/DoubleContour.js";
import { useLabelNotch as ne } from "../../utils/useLabelNotch.js";
import { deepEqual as c } from "../../helpers/objects.js";
import "../PlIcon16/index.js";
import "../PlMaskIcon24/index.js";
import re from "../../utils/DropdownOverlay/DropdownOverlay.js";
import "../../utils/DropdownOverlay/index.js";
import { useWatchFetch as l } from "../../composition/useWatchFetch.js";
import ie from "../../assets/images/required.js";
import { Fragment as ae, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as oe, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, openBlock as y, reactive as se, ref as b, renderList as ce, renderSlot as x, toDisplayString as S, unref as C, useModel as w, useSlots as le, useTemplateRef as ue, vModelText as de, watch as T, watchPostEffect as fe, withCtx as E, withDirectives as pe, withModifiers as D } from "vue";
import { isNil as O } from "@milaboratories/helpers";
import { refDebounced as me } from "@vueuse/core";
//#region src/components/PlAutocomplete/PlAutocomplete.vue?vue&type=script&setup=true&lang.ts
var he = ["tabindex"], ge = { class: "pl-autocomplete__container" }, _e = { class: "pl-autocomplete__field" }, k = ["disabled", "placeholder"], A = {
	key: 0,
	class: "input-value"
}, j = { class: "pl-autocomplete__controls" }, M = {
	key: 2,
	class: "arrow-icon arrow-icon-default"
}, N = { key: 0 }, P = {
	key: 0,
	class: "nothing-found"
}, F = {
	key: 0,
	class: "pl-autocomplete__error"
}, I = {
	key: 1,
	class: "pl-autocomplete__helper"
}, ve = {
	key: 2,
	class: "pl-autocomplete__helper"
}, L = /* @__PURE__ */ g({
	name: "PlAutocomplete",
	props: /* @__PURE__ */ _({
		optionsSearch: {},
		label: { default: "" },
		helper: { default: void 0 },
		loadingOptionsHelper: { default: void 0 },
		error: { default: void 0 },
		placeholder: { default: "..." },
		clearable: {
			type: Boolean,
			default: !1
		},
		required: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		arrowIcon: { default: void 0 },
		arrowIconLarge: { default: void 0 },
		optionSize: { default: "small" },
		formatValue: {
			type: Function,
			default: (e) => String(e)
		},
		groupPosition: { default: void 0 }
	}, {
		modelValue: { required: !0 },
		modelModifiers: {}
	}),
	emits: ["update:modelValue"],
	setup(g) {
		let _ = w(g, "modelValue"), L = g, ye = le(), R = b(), z = b(), B = ue("overlay"), V = b(null), H = se({
			activeIndex: -1,
			open: !1
		}), be = () => t(G.value.findIndex((e) => c(e.value, _.value)), (e) => e < 0 ? 0 : e), xe = () => H.activeIndex = be(), U = b([]), W = b(), G = u(() => n(U.value).map((e, t) => ({
			...e,
			index: t,
			isSelected: t === Se.value,
			isActive: t === H.activeIndex
		}))), K = b(!0), q = b(!1), J = u(() => L.disabled), Se = u(() => U.value.findIndex((e) => c(e.value, _.value))), Y = u(() => {
			if (!K.value) {
				if (L.error) return i(L.error);
				if (q.value) return "Data loading error";
			}
		}), X = u(() => {
			let e = C(W), t = C(G);
			return (e ?? t.find((e) => c(e.value, _.value)) ?? t.find((e) => c(e.value, _.value)))?.label || (_.value ? L.formatValue(_.value) : "");
		}), Ce = u(() => !H.open && _.value ? "" : _.value ? String(X.value) : L.placeholder), we = u(() => _.value !== void 0 && _.value !== null), Te = u(() => J.value ? void 0 : "0"), Z = (e) => {
			_.value = e?.value, W.value = e, V.value = null, H.open = !1, R?.value?.focus();
		}, Ee = () => {
			_.value = void 0, W.value = void 0;
		}, De = () => z.value?.focus(), Oe = () => {
			H.open = !H.open;
		};
		T(() => H.open, (e) => {
			V.value = e ? "" : null;
		});
		let ke = () => {
			H.open = !0;
		}, Ae = (e) => {
			let t = e.relatedTarget;
			!R.value?.contains(t) && !B.value?.listRef?.contains(t) && (V.value = null, H.open = !1);
		}, je = (e) => {
			if ([
				"ArrowDown",
				"ArrowUp",
				"Enter",
				"Escape"
			].includes(e.code)) e.preventDefault();
			else return;
			let { open: t, activeIndex: n } = H;
			if (!t) {
				e.code === "Enter" && (H.open = !0, V.value = "");
				return;
			}
			e.code === "Escape" && (H.open = !1, V.value = null, R.value?.focus());
			let r = C(G), { length: i } = r;
			if (!i) return;
			e.code === "Enter" && Z(r.find((e) => e.index === n));
			let a = r.findIndex((e) => e.index === n) ?? -1, o = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, s = Math.abs(a + o + i) % i;
			H.activeIndex = G.value[s].index ?? -1;
		};
		ne(R), T(() => _.value, xe, { immediate: !0 }), T(() => H.open, (e) => e ? z.value?.focus() : ""), fe(() => {
			V.value, H.activeIndex >= 0 && H.open && B.value?.scrollIntoActive();
		});
		let Me = me(V, 300, { maxWait: 1e3 }), Q = l(() => Me.value, async (e) => O(e) ? void 0 : L.optionsSearch(e, "label")), $ = l(() => _.value, async (e) => O(e) || c(W.value?.value, e) ? W.value : (await L.optionsSearch(String(e), "value")).find((t) => String(t.value) === String(e)));
		return T(() => Q.value, (e) => {
			e && (U.value = e, V.value !== null && (q.value = !1));
		}), T(() => $.value, (e) => {
			e && (W.value = n([e])[0]);
		}), T(() => Q.error, (e) => {
			e && (q.value = !!e);
		}), T(() => Q.loading || $.loading, (e) => {
			K.value = e;
		}), (t, n) => (y(), p("div", {
			class: "pl-autocomplete__envelope",
			onClick: D(De, ["stop"])
		}, [m("div", {
			ref_key: "rootRef",
			ref: R,
			tabindex: Te.value,
			class: v(["pl-autocomplete", {
				open: H.open,
				error: !!Y.value,
				disabled: J.value
			}]),
			onKeydown: je,
			onFocusout: Ae
		}, [m("div", ge, [
			m("div", _e, [
				pe(m("input", {
					ref_key: "input",
					ref: z,
					"onUpdate:modelValue": n[0] ||= (e) => V.value = e,
					type: "text",
					tabindex: "-1",
					disabled: J.value,
					placeholder: Ce.value,
					spellcheck: "false",
					autocomplete: "chrome-off",
					onFocus: ke
				}, null, 40, k), [[de, V.value]]),
				H.open ? f("", !0) : (y(), p("div", A, [h(a, null, {
					default: E(() => [oe(S(X.value), 1)]),
					_: 1
				})])),
				m("div", j, [
					K.value ? (y(), d(C(s), {
						key: 0,
						name: "loading"
					})) : f("", !0),
					g.clearable && we.value ? (y(), d(C(ee), {
						key: 1,
						class: "clear",
						name: "delete-clear",
						onClick: D(Ee, ["stop"])
					})) : f("", !0),
					x(t.$slots, "append"),
					m("div", {
						class: "pl-autocomplete__arrow-wrapper",
						onClick: D(Oe, ["stop"])
					}, [g.arrowIconLarge ? (y(), p("div", {
						key: 0,
						class: v(["arrow-icon", [`icon-24 ${g.arrowIconLarge}`]])
					}, null, 2)) : g.arrowIcon ? (y(), p("div", {
						key: 1,
						class: v(["arrow-icon", [`icon-16 ${g.arrowIcon}`]])
					}, null, 2)) : (y(), p("div", M))])
				])
			]),
			g.label ? (y(), p("label", N, [
				g.required ? (y(), d(C(o), {
					key: 0,
					uri: C(ie)
				}, null, 8, ["uri"])) : f("", !0),
				m("span", null, S(g.label), 1),
				ye.tooltip ? (y(), d(C(r), {
					key: 1,
					class: "info",
					position: "top"
				}, {
					tooltip: E(() => [x(t.$slots, "tooltip")]),
					_: 3
				})) : f("", !0)
			])) : f("", !0),
			H.open ? (y(), d(C(re), {
				key: 1,
				ref: "overlay",
				root: R.value,
				class: "pl-autocomplete__options",
				tabindex: "-1",
				gap: 3
			}, {
				default: E(() => [(y(!0), p(ae, null, ce(G.value, (t, n) => (y(), d(e, {
					key: n,
					option: t,
					"is-selected": t.isSelected,
					"is-hovered": t.isActive,
					size: g.optionSize,
					onClick: D((e) => Z(t), ["stop"])
				}, null, 8, [
					"option",
					"is-selected",
					"is-hovered",
					"size",
					"onClick"
				]))), 128)), G.value.length ? f("", !0) : (y(), p("div", P, "Nothing found"))]),
				_: 1
			}, 8, ["root"])) : f("", !0),
			h(te, {
				class: "pl-autocomplete__contour",
				"group-position": g.groupPosition
			}, null, 8, ["group-position"])
		])], 42, he), Y.value ? (y(), p("div", F, S(Y.value), 1)) : K.value && g.loadingOptionsHelper ? (y(), p("div", I, S(g.loadingOptionsHelper), 1)) : g.helper ? (y(), p("div", ve, S(g.helper), 1)) : f("", !0)]));
	}
});
//#endregion
export { L as default };

//# sourceMappingURL=PlAutocomplete.vue2.js.map