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

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