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 o from "../../utils/DoubleContour.js";
import { useLabelNotch as s } from "../../utils/useLabelNotch.js";
import { deepEqual as c, deepIncludes as l } from "../../helpers/objects.js";
import u from "../../utils/DropdownOverlay/DropdownOverlay.js";
import ee from "../../assets/images/required.js";
import d from "../PlChip/PlChip.js";
import "../PlChip/index.js";
import './pl-dropdown-multi.css';/* empty css                  */
import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as te, defineComponent as y, normalizeClass as b, openBlock as x, reactive as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useSlots as ne, useTemplateRef as re, vModelText as ie, watch as ae, watchPostEffect as oe, withCtx as O, withDirectives as se, withModifiers as k } from "vue";
//#region src/components/PlDropdownMulti/PlDropdownMulti.vue?vue&type=script&setup=true&lang.ts
var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { class: "pl-dropdown-multi__field" }, de = ["disabled", "placeholder"], fe = {
	key: 0,
	class: "chips-container"
}, pe = { 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: "..." },
		missingValueLabel: { default: "Value not available" },
		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 = ne(), z = y, B = C(), V = C(), H = re("overlay"), U = S({
			search: "",
			activeOption: -1,
			open: !1,
			optionsHeight: 0
		}), W = p(() => Array.isArray(z.modelValue) ? z.modelValue : []), me = p(() => U.open && z.modelValue.length > 0 ? z.placeholder : z.modelValue.length > 0 ? "" : z.placeholder), G = p(() => t(z.options ?? [])), K = p(() => {
			let e = z.options !== void 0;
			return W.value.map((t) => {
				let n = G.value.find((e) => c(e.value, t));
				if (n) return {
					...n,
					isMissing: !1
				};
				if (e) return {
					value: t,
					label: z.missingValueLabel,
					isMissing: !0
				};
			}).filter((e) => e !== void 0);
		}), q = p(() => {
			let e = D(W), t = D(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: l(e, t.value)
			}));
		}), J = p(() => z.options === void 0), he = p(() => !z.disabled && J.value), Y = p(() => J.value ? !0 : z.disabled), ge = p(() => Y.value ? void 0 : "0"), _e = () => {
			U.activeOption = 0;
		}, X = (e) => {
			let t = D(W);
			L(l(t, e) ? t.filter((t) => !c(t, e)) : [...t, e]), U.search = "", B?.value?.focus();
		}, Z = (e) => L(D(W).filter((t) => !c(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 = D(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 s(B), ae(() => z.modelValue, () => _e(), { immediate: !0 }), oe(() => {
			U.search, U.open && H.value?.scrollIntoActive();
		}), (t, s) => (x(), g("div", {
			class: "pl-dropdown-multi__envelope",
			onClick: Q
		}, [_("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: $
		}, [_("div", le, [
			_("div", ue, [
				se(_("input", {
					ref_key: "input",
					ref: V,
					"onUpdate:modelValue": s[0] ||= (e) => U.search = e,
					type: "text",
					tabindex: "-1",
					disabled: Y.value,
					placeholder: me.value,
					spellcheck: "false",
					autocomplete: "chrome-off",
					onFocus: s[1] ||= (e) => U.open = !0
				}, null, 40, de), [[ie, U.search]]),
				U.open ? h("", !0) : (x(), g("div", fe, [(x(!0), g(f, null, w(K.value, (e, t) => (x(), m(D(d), {
					key: t,
					class: b({ "pl-dropdown-multi__chip--missing": e.isMissing }),
					closeable: "",
					small: "",
					onClick: s[2] ||= k((e) => U.open = !0, ["stop"]),
					onClose: (t) => Z(e.value)
				}, {
					default: O(() => [v(E(e.label), 1)]),
					_: 2
				}, 1032, ["class", "onClose"]))), 128))])),
				_("div", pe, [
					he.value ? (x(), m(D(a), {
						key: 0,
						name: "loading"
					})) : h("", !0),
					T(t.$slots, "append"),
					_("div", {
						class: "pl-dropdown-multi__arrow-wrapper",
						onClick: k(ve, ["stop"])
					}, [...s[3] ||= [_("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
				])
			]),
			y.label ? (x(), g("label", A, [
				y.required ? (x(), m(D(i), {
					key: 0,
					uri: D(ee)
				}, null, 8, ["uri"])) : h("", !0),
				_("span", null, E(y.label), 1),
				D(R).tooltip ? (x(), m(D(n), {
					key: 1,
					class: "info",
					position: "top"
				}, {
					tooltip: O(() => [T(t.$slots, "tooltip")]),
					_: 3
				})) : h("", !0)
			])) : h("", !0),
			U.open ? (x(), m(u, {
				key: 1,
				ref_key: "overlay",
				ref: H,
				root: B.value,
				class: "pl-dropdown-multi__options",
				gap: 5,
				tabindex: "-1",
				onFocusout: $
			}, {
				default: O(() => [
					_("div", j, [(x(!0), g(f, null, w(K.value, (e, t) => (x(), m(D(d), {
						key: t,
						class: b({ "pl-dropdown-multi__chip--missing": e.isMissing }),
						closeable: "",
						small: "",
						onClose: (t) => Z(e.value)
					}, {
						default: O(() => [v(E(e.label), 1)]),
						_: 2
					}, 1032, ["class", "onClose"]))), 128))]),
					(x(!0), g(f, null, w(q.value, (t, n) => (x(), m(e, {
						key: n,
						option: t,
						"text-item": "text",
						"is-selected": t.selected,
						"is-hovered": U.activeOption == n,
						size: "medium",
						"use-checkbox": "",
						onClick: k((e) => X(t.value), ["stop"])
					}, null, 8, [
						"option",
						"is-selected",
						"is-hovered",
						"onClick"
					]))), 128)),
					q.value.length ? h("", !0) : (x(), g("div", M, "Nothing found"))
				]),
				_: 1
			}, 8, ["root"])) : h("", !0),
			te(o, {
				class: "pl-dropdown-multi__contour",
				"group-position": y.groupPosition
			}, null, 8, ["group-position"])
		])], 42, ce), y.error ? (x(), g("div", N, E(D(r)(y.error)), 1)) : y.helper ? (x(), g("div", P, E(y.helper), 1)) : h("", !0)]));
	}
});
//#endregion
export { F as default };

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