import e from "../DropdownListItem.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 "../PlSvg/PlSvg.js";
import "../PlSvg/index.js";
import a from "../PlIcon24/PlIcon24.js";
import "../PlIcon24/index.js";
import ee from "../../utils/DoubleContour.js";
import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
import { deepEqual as s, deepIncludes as c } from "../../helpers/objects.js";
import te from "../../utils/DropdownOverlay/DropdownOverlay.js";
import l from "../../assets/images/required.js";
import u from "../PlChip/PlChip.js";
import "../PlChip/index.js";
import './pl-dropdown-multi.css';/* empty css                  */
import { Fragment as d, 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 b, openBlock as x, reactive as ne, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useSlots as re, useTemplateRef as ie, vModelText as ae, watch as oe, watchPostEffect as se, withCtx as D, withDirectives as ce, withModifiers as O } from "vue";
var le = ["tabindex"], ue = { class: "pl-dropdown-multi__container" }, de = { class: "pl-dropdown-multi__field" }, fe = ["disabled", "placeholder"], pe = {
	key: 0,
	class: "chips-container"
}, k = { class: "pl-dropdown-multi__controls" }, A = { key: 0 }, j = { class: "pl-dropdown-multi__open-chips-container" }, M = {
	key: 0,
	class: "nothing-found"
}, N = {
	key: 0,
	class: "pl-dropdown-multi__error"
}, P = {
	key: 1,
	class: "pl-dropdown-multi__helper"
}, F = /* @__PURE__ */ y({
	name: "PlDropdownMulti",
	props: {
		modelValue: { default: () => [] },
		label: { default: void 0 },
		options: { default: void 0 },
		helper: { default: void 0 },
		error: { default: void 0 },
		placeholder: { default: "..." },
		required: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		groupPosition: { default: void 0 }
	},
	emits: ["update:modelValue"],
	setup(y, { emit: F }) {
		let I = F, L = (e) => I("update:modelValue", e), R = re(), z = y, B = S(), V = S(), H = ie("overlay"), U = ne({
			search: "",
			activeOption: -1,
			open: !1,
			optionsHeight: 0
		}), W = f(() => Array.isArray(z.modelValue) ? z.modelValue : []), me = f(() => U.open && z.modelValue.length > 0 ? z.placeholder : z.modelValue.length > 0 ? "" : z.placeholder), G = f(() => t(z.options ?? [])), K = f(() => W.value.map((e) => G.value.find((t) => s(t.value, e))).filter((e) => e !== void 0)), q = f(() => {
			let e = E(W), t = E(G);
			return (U.search ? t.filter((e) => {
				let t = U.search.toLowerCase();
				return e.label.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === U.search;
			}) : [...t]).map((t) => ({
				...t,
				selected: c(e, t.value)
			}));
		}), J = f(() => z.options === void 0), he = f(() => !z.disabled && J.value), Y = f(() => J.value ? !0 : z.disabled), ge = f(() => Y.value ? void 0 : "0"), _e = () => {
			U.activeOption = 0;
		}, X = (e) => {
			let t = E(W);
			L(c(t, e) ? t.filter((t) => !s(t, e)) : [...t, e]), U.search = "", B?.value?.focus();
		}, Z = (e) => L(E(W).filter((t) => !s(t, e))), Q = () => V.value?.focus(), ve = () => {
			U.open = !U.open, U.open || (U.search = "");
		}, $ = (e) => {
			let t = e.relatedTarget;
			!B.value?.contains(t) && !H.value?.listRef?.contains(t) && (U.search = "", U.open = !1);
		}, ye = (e) => {
			let { open: t, activeOption: n } = U;
			if (!t) {
				e.code === "Enter" && (U.open = !0);
				return;
			}
			e.code === "Escape" && (U.open = !1, B.value?.focus());
			let r = E(q), { length: i } = r;
			if (!i) return;
			[
				"ArrowDown",
				"ArrowUp",
				"Enter"
			].includes(e.code) && e.preventDefault(), e.code === "Enter" && X(r[n].value);
			let a = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
			U.activeOption = Math.abs(n + a + i) % i, requestAnimationFrame(() => H.value?.scrollIntoActive());
		};
		return o(B), oe(() => z.modelValue, () => _e(), { immediate: !0 }), se(() => {
			U.search, U.open && H.value?.scrollIntoActive();
		}), (t, o) => (x(), h("div", {
			class: "pl-dropdown-multi__envelope",
			onClick: Q
		}, [g("div", {
			ref_key: "rootRef",
			ref: B,
			tabindex: ge.value,
			class: b(["pl-dropdown-multi", {
				open: U.open,
				error: y.error,
				disabled: Y.value
			}]),
			onKeydown: ye,
			onFocusout: $
		}, [g("div", ue, [
			g("div", de, [
				ce(g("input", {
					ref_key: "input",
					ref: V,
					"onUpdate:modelValue": o[0] ||= (e) => U.search = e,
					type: "text",
					tabindex: "-1",
					disabled: Y.value,
					placeholder: me.value,
					spellcheck: "false",
					autocomplete: "chrome-off",
					onFocus: o[1] ||= (e) => U.open = !0
				}, null, 40, fe), [[ae, U.search]]),
				U.open ? m("", !0) : (x(), h("div", pe, [(x(!0), h(d, null, C(K.value, (e, t) => (x(), p(E(u), {
					key: t,
					closeable: "",
					small: "",
					onClick: o[2] ||= O((e) => U.open = !0, ["stop"]),
					onClose: (t) => Z(e.value)
				}, {
					default: D(() => [_(T(e.label || e.value), 1)]),
					_: 2
				}, 1032, ["onClose"]))), 128))])),
				g("div", k, [
					he.value ? (x(), p(E(a), {
						key: 0,
						name: "loading"
					})) : m("", !0),
					w(t.$slots, "append"),
					g("div", {
						class: "pl-dropdown-multi__arrow-wrapper",
						onClick: O(ve, ["stop"])
					}, [...o[3] ||= [g("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
				])
			]),
			y.label ? (x(), h("label", A, [
				y.required ? (x(), p(E(i), {
					key: 0,
					uri: E(l)
				}, null, 8, ["uri"])) : m("", !0),
				g("span", null, T(y.label), 1),
				E(R).tooltip ? (x(), p(E(n), {
					key: 1,
					class: "info",
					position: "top"
				}, {
					tooltip: D(() => [w(t.$slots, "tooltip")]),
					_: 3
				})) : m("", !0)
			])) : m("", !0),
			U.open ? (x(), p(te, {
				key: 1,
				ref_key: "overlay",
				ref: H,
				root: B.value,
				class: "pl-dropdown-multi__options",
				gap: 5,
				tabindex: "-1",
				onFocusout: $
			}, {
				default: D(() => [
					g("div", j, [(x(!0), h(d, null, C(K.value, (e, t) => (x(), p(E(u), {
						key: t,
						closeable: "",
						small: "",
						onClose: (t) => Z(e.value)
					}, {
						default: D(() => [_(T(e.label || e.value), 1)]),
						_: 2
					}, 1032, ["onClose"]))), 128))]),
					(x(!0), h(d, null, C(q.value, (t, n) => (x(), p(e, {
						key: n,
						option: t,
						"text-item": "text",
						"is-selected": t.selected,
						"is-hovered": U.activeOption == n,
						size: "medium",
						"use-checkbox": "",
						onClick: O((e) => X(t.value), ["stop"])
					}, null, 8, [
						"option",
						"is-selected",
						"is-hovered",
						"onClick"
					]))), 128)),
					q.value.length ? m("", !0) : (x(), h("div", M, "Nothing found"))
				]),
				_: 1
			}, 8, ["root"])) : m("", !0),
			v(ee, {
				class: "pl-dropdown-multi__contour",
				"group-position": y.groupPosition
			}, null, 8, ["group-position"])
		])], 42, le), y.error ? (x(), h("div", N, T(E(r)(y.error)), 1)) : y.helper ? (x(), h("div", P, T(y.helper), 1)) : m("", !0)]));
	}
});
export { F as default };

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