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";
//#region src/components/PlDropdown/PlDropdown.vue?vue&type=script&setup=true&lang.ts
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" }, de = { key: 0 }, j = {
	key: 0,
	class: "pl-dropdown__error"
}, M = {
	key: 1,
	class: "pl-dropdown__helper"
}, N = {
	key: 2,
	class: "pl-dropdown__helper"
}, P = /* @__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: "..." },
		missingValueLabel: { default: "Value not available" },
		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: P }) {
		let F = P, I = y, L = S(), R = S(), z = E("optionListRef"), B = x({
			search: "",
			activeIndex: -1,
			open: !1,
			optionsHeight: 0
		}), V = () => e(Z.value.findIndex((e) => l(e.value, I.modelValue)), (e) => e < 0 ? 0 : e), H = () => B.activeIndex = V(), U = f(() => I.options === void 0), W = f(() => !I.disabled && U.value), G = f(() => U.value ? !0 : I.disabled), K = f(() => (I.options ?? []).findIndex((e) => l(e.value, I.modelValue))), q = f(() => I.modelValue !== void 0 && I.modelValue !== null), fe = f(() => q.value && K.value === -1 && !U.value), J = f(() => {
			if (!U.value && I.error) return r(I.error);
		}), Y = f(() => t(I.options ?? []).map((e, t) => ({
			...e,
			index: t,
			isSelected: t === K.value,
			isActive: t === B.activeIndex
		}))), X = f(() => T(Y).find((e) => l(e.value, I.modelValue))?.label), pe = f(() => !B.open && q.value ? "" : X.value ? String(X.value) : I.placeholder), { orderedRef: Z, groupsRef: me, restRef: he } = d(f(() => {
			let e = Y.value;
			return B.search ? e.filter((e) => {
				let t = B.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 === B.search;
			}) : e;
		}), "group"), ge = f(() => G.value ? void 0 : "0"), Q = (e) => {
			F("update:modelValue", e), B.search = "", B.open = !1, L?.value?.focus();
		}, $ = (e) => {
			Q(e);
		}, _e = () => F("update:modelValue", void 0), ve = () => R.value?.focus(), ye = () => {
			B.open = !B.open, B.open || (B.search = "");
		}, be = () => B.open = !0, xe = (e) => {
			let t = e.relatedTarget;
			!L.value?.contains(t) && !z.value?.listRef?.contains(t) && (B.search = "", B.open = !1);
		}, Se = (e) => {
			if ([
				"ArrowDown",
				"ArrowUp",
				"Enter",
				"Escape"
			].includes(e.code)) e.preventDefault();
			else return;
			let { open: t, activeIndex: n } = B;
			if (!t) {
				e.code === "Enter" && (B.open = !0);
				return;
			}
			e.code === "Escape" && (B.open = !1, L.value?.focus());
			let r = Z.value, { 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;
			B.activeIndex = r[Math.abs(a + o + i) % i].index ?? -1;
		};
		return c(L), O(() => I.modelValue, H, { immediate: !0 }), O(() => B.open, (e) => e ? R.value?.focus() : ""), re(() => {
			B.search, B.activeIndex >= 0 && B.open && z.value?.scrollIntoActive();
		}), (e, t) => (b(), h("div", {
			class: "pl-dropdown__envelope",
			onClick: ve
		}, [g("div", {
			ref_key: "rootRef",
			ref: L,
			tabindex: ge.value,
			class: ne(["pl-dropdown", {
				open: B.open,
				error: y.error || y.errorStatus,
				disabled: G.value
			}]),
			onKeydown: Se,
			onFocusout: xe
		}, [g("div", oe, [
			g("div", se, [
				ie(g("input", {
					ref_key: "input",
					ref: R,
					"onUpdate:modelValue": t[0] ||= (e) => B.search = e,
					type: "text",
					tabindex: "-1",
					disabled: G.value,
					placeholder: pe.value,
					spellcheck: "false",
					autocomplete: "chrome-off",
					onFocus: be
				}, null, 40, ce), [[D, B.search]]),
				B.open ? m("", !0) : (b(), h("div", le, [fe.value ? (b(), p(i, {
					key: 0,
					class: "input-value--missing"
				}, {
					default: k(() => [_(w(y.missingValueLabel), 1)]),
					_: 1
				})) : X.value === void 0 ? m("", !0) : (b(), p(i, { key: 1 }, {
					default: k(() => [_(w(X.value), 1)]),
					_: 1
				}))])),
				g("div", ue, [
					W.value ? (b(), p(T(o), {
						key: 0,
						name: "loading"
					})) : m("", !0),
					y.clearable && q.value ? (b(), p(T(s), {
						key: 1,
						class: "clear",
						name: "delete-clear",
						onClick: A(_e, ["stop"])
					})) : m("", !0),
					C(e.$slots, "append"),
					g("div", {
						class: "pl-dropdown__arrow-wrapper",
						onClick: A(ye, ["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", de, [
				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),
			B.open ? (b(), p(u, {
				key: 1,
				ref_key: "optionListRef",
				ref: z,
				"root-ref": L.value,
				groups: T(me),
				rest: T(he),
				"option-size": y.optionSize,
				"select-option": $
			}, 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", j, w(J.value), 1)) : W.value && y.loadingOptionsHelper ? (b(), h("div", M, w(y.loadingOptionsHelper), 1)) : y.helper ? (b(), h("div", N, w(y.helper), 1)) : m("", !0)]));
	}
});
//#endregion
export { P as default };

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