import e from "../DropdownListItem.js";
import { tap as t, tapIf as n } from "../../helpers/functions.js";
import { normalizeListOptions as r } from "../../helpers/utils.js";
import i from "../PlTooltip/PlTooltip.js";
import "../PlTooltip/index.js";
import { getErrorMessage as a } from "../../helpers/error.js";
import o from "../LongText.js";
import { scrollIntoView as s } from "../../helpers/dom.js";
import c from "../PlSvg/PlSvg.js";
import "../PlSvg/index.js";
import l from "../PlIcon24/PlIcon24.js";
import ee from "../PlIcon16/PlIcon16.js";
import te from "../../utils/DoubleContour.js";
import { useLabelNotch as ne } from "../../utils/useLabelNotch.js";
import { deepEqual as u } from "../../helpers/objects.js";
import "../PlIcon16/index.js";
import "../PlMaskIcon24/index.js";
import re from "../../assets/images/required.js";
/* empty css                   */
import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as ie, createVNode as _, defineComponent as v, normalizeClass as y, openBlock as b, reactive as ae, ref as x, renderList as oe, renderSlot as S, toDisplayString as C, unref as w, useSlots as se, vModelText as ce, watch as T, watchPostEffect as E, withCtx as D, withDirectives as le, withModifiers as O } from "vue";
var ue = { class: "ui-dropdown__envelope" }, de = ["tabindex"], fe = { class: "ui-dropdown__container" }, pe = { class: "ui-dropdown__field" }, k = ["disabled", "placeholder"], A = { class: "ui-dropdown__controls" }, j = { key: 0 }, M = {
	key: 0,
	class: "nothing-found"
}, N = {
	key: 0,
	class: "ui-dropdown__error"
}, P = {
	key: 1,
	class: "ui-dropdown__helper"
}, F = {
	key: 2,
	class: "ui-dropdown__helper"
}, I = /* @__PURE__ */ v({
	name: "PlDropdown",
	props: {
		modelValue: {},
		label: { default: "" },
		options: { default: void 0 },
		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" }
	},
	emits: ["update:modelValue"],
	setup(v, { emit: I }) {
		let L = I, R = v, z = se(), B = x(), V = x(), H = x(), U = ae({
			search: "",
			activeIndex: -1,
			open: !1
		}), me = () => t(X.value.findIndex((e) => u(e.value, R.modelValue)), (e) => e < 0 ? 0 : e), he = () => U.activeIndex = me(), W = f(() => R.options === void 0), G = f(() => W.value ? !0 : R.disabled), K = f(() => (R.options ?? []).findIndex((e) => u(e.value, R.modelValue))), q = f(() => {
			if (!W.value) {
				if (R.error) return a(R.error);
				if (R.modelValue !== void 0 && K.value === -1) return "The selected value is not one of the options";
			}
		}), J = f(() => r(R.options ?? []).map((e, t) => ({
			...e,
			index: t,
			isSelected: t === K.value,
			isActive: t === U.activeIndex
		}))), Y = f(() => w(J).find((e) => u(e.value, R.modelValue))?.label || R.modelValue), ge = f(() => !U.open && R.modelValue ? "" : R.modelValue ? String(Y.value) : R.placeholder), _e = f(() => R.modelValue !== void 0 && R.modelValue !== null), X = f(() => {
			let e = J.value;
			return U.search ? e.filter((e) => {
				let t = U.search.toLowerCase();
				return e.label.toLowerCase().includes(t) || e.description && e.description.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === U.search;
			}) : e;
		}), Z = f(() => G.value ? void 0 : "0"), Q = (e) => {
			L("update:modelValue", e), U.search = "", U.open = !1, B?.value?.focus();
		}, ve = () => L("update:modelValue", void 0), ye = () => H.value?.focus(), $ = () => U.open = !U.open, be = () => U.open = !0, xe = (e) => {
			B?.value?.contains(e.relatedTarget) || (U.search = "", U.open = !1);
		}, Se = () => {
			let e = V.value;
			e && n(e.querySelector(".hovered-item"), (t) => {
				s(e, t);
			});
		}, Ce = (e) => {
			if ([
				"ArrowDown",
				"ArrowUp",
				"Enter",
				"Escape"
			].includes(e.code)) e.preventDefault();
			else return;
			let { open: t, activeIndex: n } = U;
			if (!t) {
				e.code === "Enter" && (U.open = !0);
				return;
			}
			e.code === "Escape" && (U.open = !1, B.value?.focus());
			let r = w(X), { length: i } = r;
			if (!i) return;
			e.code === "Enter" && Q(r.find((e) => e.index === n)?.value);
			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;
			U.activeIndex = X.value[s].index ?? -1;
		};
		return ne(B), T(() => R.modelValue, he, { immediate: !0 }), T(() => U.open, (e) => e ? H.value?.focus() : ""), E(() => {
			U.search, U.activeIndex >= 0 && U.open && Se();
		}), (t, n) => (b(), h("div", ue, [g("div", {
			ref_key: "root",
			ref: B,
			tabindex: Z.value,
			class: y(["ui-dropdown", {
				open: U.open,
				error: v.error,
				disabled: G.value
			}]),
			onKeydown: Ce,
			onFocusout: xe
		}, [g("div", fe, [
			g("div", pe, [
				le(g("input", {
					ref_key: "input",
					ref: H,
					"onUpdate:modelValue": n[0] ||= (e) => U.search = e,
					type: "text",
					tabindex: "-1",
					disabled: G.value,
					placeholder: ge.value,
					spellcheck: "false",
					autocomplete: "chrome-off",
					onFocus: be
				}, null, 40, k), [[ce, U.search]]),
				U.open ? m("", !0) : (b(), h("div", {
					key: 0,
					onClick: ye
				}, [_(o, { class: "input-value" }, {
					default: D(() => [ie(C(Y.value), 1)]),
					_: 1
				})])),
				g("div", A, [
					W.value ? (b(), p(w(l), {
						key: 0,
						name: "loading"
					})) : m("", !0),
					v.clearable && _e.value ? (b(), p(w(ee), {
						key: 1,
						class: "clear",
						name: "delete-clear",
						onClick: O(ve, ["stop"])
					})) : m("", !0),
					S(t.$slots, "append"),
					v.arrowIconLarge ? (b(), h("div", {
						key: 2,
						class: y(["arrow-icon", [`icon-24 ${v.arrowIconLarge}`]]),
						onClick: O($, ["stop"])
					}, null, 2)) : v.arrowIcon ? (b(), h("div", {
						key: 3,
						class: y(["arrow-icon", [`icon-16 ${v.arrowIcon}`]]),
						onClick: O($, ["stop"])
					}, null, 2)) : (b(), h("div", {
						key: 4,
						class: "arrow-icon arrow-icon-default",
						onClick: O($, ["stop"])
					}))
				])
			]),
			v.label ? (b(), h("label", j, [
				v.required ? (b(), p(w(c), {
					key: 0,
					uri: w(re)
				}, null, 8, ["uri"])) : m("", !0),
				g("span", null, C(v.label), 1),
				w(z).tooltip ? (b(), p(w(i), {
					key: 1,
					class: "info",
					position: "top"
				}, {
					tooltip: D(() => [S(t.$slots, "tooltip")]),
					_: 3
				})) : m("", !0)
			])) : m("", !0),
			U.open ? (b(), h("div", {
				key: 1,
				ref_key: "list",
				ref: V,
				class: "ui-dropdown__options"
			}, [(b(!0), h(d, null, oe(X.value, (t, n) => (b(), p(e, {
				key: n,
				option: t,
				"is-selected": t.isSelected,
				"is-hovered": t.isActive,
				size: v.optionSize,
				onClick: O((e) => Q(t.value), ["stop"])
			}, null, 8, [
				"option",
				"is-selected",
				"is-hovered",
				"size",
				"onClick"
			]))), 128)), X.value.length ? m("", !0) : (b(), h("div", M, "Nothing found"))], 512)) : m("", !0),
			_(te, { class: "ui-dropdown__contour" })
		])], 42, de), q.value ? (b(), h("div", N, C(q.value), 1)) : W.value && v.loadingOptionsHelper ? (b(), h("div", P, C(v.loadingOptionsHelper), 1)) : v.helper ? (b(), h("div", F, C(v.helper), 1)) : m("", !0)]));
	}
});
export { I as default };

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