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 { useClickOutside as i } from "../../composition/useClickOutside.js";
import { scrollIntoView as a } from "../../helpers/dom.js";
import { deepEqual as o } from "../../helpers/objects.js";
import { useElementPosition as ee } from "../../composition/usePosition.js";
import './pl-dropdown-line.css';/* empty css                 */
import { useFilteredList as te } from "../../composition/useFilteredList.js";
import s from "./ResizableInput.js";
import c from "../TabItem.js";
import { Fragment as l, Teleport as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, nextTick as v, normalizeClass as y, normalizeStyle as b, openBlock as x, reactive as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, toRef as D, unref as O, vShow as k, watch as A, withDirectives as j, withModifiers as M } from "vue";
var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__icon-wrapper" }, re = { class: "pl-line-dropdown__icon" }, ie = {
	key: 0,
	class: "pl-line-dropdown__no-item"
}, P = {
	key: 0,
	class: "pl-line-dropdown__no-item"
}, F = /* @__PURE__ */ _({
	__name: "PlDropdownLine",
	props: {
		modelValue: {},
		disabled: { type: Boolean },
		prefix: { default: "" },
		options: {},
		placeholder: { default: "Select.." },
		mode: { default: "list" },
		tabsContainerStyles: {
			type: [
				Boolean,
				null,
				String,
				Object,
				Array
			],
			default: void 0
		},
		clearable: {
			type: Boolean,
			default: !1
		}
	},
	emits: ["update:modelValue"],
	setup(_, { emit: F }) {
		let I = F, L = _, R = S({
			isOpen: !1,
			activeOption: -1,
			optionsHeight: 0
		}), z = C(), B = C(), V = d(() => {
			let e = [];
			return R.isOpen && e.push("open"), L.disabled && e.push("disabled"), e.join(" ");
		}), H = C(""), U = te(D(L, "options"), H), W = d(() => !!(L.clearable && R.isOpen && L.modelValue && G.value)), G = d(() => {
			if (L.modelValue !== void 0) {
				let e = J();
				if (e !== -1) return r(L.options)[e].label;
			}
			return "";
		}), K = C(G.value);
		A(G, (e) => {
			K.value = e;
		});
		let q = d(() => R.isOpen && H.value && H.value.length >= G.value.length - 1 ? H.value : G.value || "...");
		i(z, () => {
			L.mode === "list" && (R.isOpen = !1);
		}), A(() => K.value, (e) => {
			G.value === e ? H.value = "" : H.value = e;
		}), A(() => R.isOpen, (e) => {
			e && z.value && (z.value.querySelector("input")?.focus(), v(() => Q()));
		}), A(() => L.modelValue, () => ae(), { immediate: !0 });
		function J() {
			return L.options.findIndex((e) => o(e.value, L.modelValue));
		}
		function ae() {
			R.activeOption = t(U.value.findIndex((e) => o(e.value, L.modelValue)), (e) => e < 0 ? 0 : e);
		}
		function oe() {
			H.value = "";
		}
		function se() {
			L.disabled ? R.isOpen = !1 : v(() => {
				R.isOpen = !R.isOpen;
			});
		}
		function ce() {
			L.mode === "list" && (R.isOpen = !1);
		}
		function Y(e) {
			e && (I("update:modelValue", e.value), ce(), oe());
		}
		function X(e) {
			return o(e.value, L.modelValue);
		}
		let Z = (e) => {
			let t = e.relatedTarget;
			!z.value?.contains(t) && !B.value?.contains(t) && (H.value = "", R.isOpen = !1);
		};
		function le(e) {
			let { activeOption: t } = R;
			if (!R.isOpen && e.code === "Enter") {
				R.isOpen = !0;
				return;
			}
			let { length: n } = U.value;
			if (!n) return;
			[
				"ArrowDown",
				"ArrowUp",
				"Enter"
			].includes(e.code) && e.preventDefault(), e.code === "Enter" && Y(U.value[t]);
			let r = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
			R.activeOption = Math.abs(t + r + n) % n, requestAnimationFrame(Q);
		}
		function Q() {
			let e = B.value;
			e && n(e.querySelector(".hovered-item"), (t) => {
				L.mode === "list" ? a(e, t) : t.scrollIntoView({
					behavior: "smooth",
					block: "nearest",
					inline: "center"
				});
			});
		}
		function ue() {
			I("update:modelValue", void 0);
		}
		let $ = S({
			top: "0px",
			left: "0px"
		});
		return A(B, (e) => {
			e && (R.optionsHeight = e.getBoundingClientRect().height, window.dispatchEvent(new CustomEvent("adjust")));
		}), ee(z, (e) => {
			let t = e.top + e.height + 2;
			t + R.optionsHeight > e.clientHeight ? $.top = e.top - R.optionsHeight - 2 + "px" : $.top = t + "px", $.left = e.left + "px";
		}), (t, n) => (x(), m("div", {
			ref_key: "container",
			ref: z,
			tabindex: "0",
			class: y([V.value, "pl-line-dropdown uc-pointer"]),
			onKeydown: le,
			onFocusout: Z,
			onClick: se
		}, [
			h("div", N, E(L?.prefix), 1),
			g(s, {
				modelValue: K.value,
				"onUpdate:modelValue": n[0] ||= (e) => K.value = e,
				placeholder: q.value,
				disabled: L.disabled,
				class: "pl-line-dropdown__input"
			}, null, 8, [
				"modelValue",
				"placeholder",
				"disabled"
			]),
			h("div", ne, [j(h("div", re, null, 512), [[k, !W.value]]), j(h("div", {
				class: "pl-line-dropdown__icon-clear",
				onClick: ue
			}, null, 512), [[k, W.value]])]),
			R.isOpen ? (x(), f(u, {
				key: 0,
				to: "body"
			}, [L.mode === "list" ? (x(), m("div", {
				key: 0,
				ref_key: "list",
				ref: B,
				style: b($),
				tabindex: "-1",
				class: "pl-line-dropdown__items",
				onFocusout: Z,
				onClick: n[1] ||= M(() => {}, ["stop"])
			}, [(x(!0), m(l, null, w(O(U), (n, r) => T(t.$slots, "item", {
				key: r,
				item: n,
				textItem: "text",
				isSelected: X(n),
				isHovered: R.activeOption == r,
				onClick: M((e) => Y(n), ["stop"])
			}, () => [g(e, {
				option: n,
				"text-item": "text",
				"is-selected": X(n),
				"is-hovered": R.activeOption == r,
				size: "medium",
				onClick: M((e) => Y(n), ["stop"])
			}, null, 8, [
				"option",
				"is-selected",
				"is-hovered",
				"onClick"
			])])), 128)), O(U).length === 0 ? (x(), m("div", ie, [...n[3] ||= [h("div", { class: "pl-line-dropdown__no-item-title text-s" }, " Didn't find anything that matched ", -1)]])) : p("", !0)], 36)) : L.mode === "tabs" ? (x(), m("div", {
				key: 1,
				ref_key: "list",
				ref: B,
				style: b($),
				tabindex: "-1",
				class: "pl-line-dropdown__items-tabs",
				onFocusout: Z,
				onClick: n[2] ||= M(() => {}, ["stop"])
			}, [(x(!0), m(l, null, w(O(U), (e, n) => T(t.$slots, "item", {
				key: n,
				item: e,
				isSelected: X(e),
				isHovered: R.activeOption == n,
				onClick: M((t) => Y(e), ["stop"])
			}, () => [g(c, {
				option: e,
				"is-selected": X(e),
				"is-hovered": R.activeOption == n,
				onClick: M((t) => Y(e), ["stop"])
			}, null, 8, [
				"option",
				"is-selected",
				"is-hovered",
				"onClick"
			])])), 128)), O(U).length === 0 ? (x(), m("div", P, [...n[4] ||= [h("div", { class: "pl-line-dropdown__no-item-title text-s" }, " Didn't find anything that matched ", -1)]])) : p("", !0)], 36)) : p("", !0)])) : p("", !0)
		], 34));
	}
});
export { F as default };

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