import e from "../DropdownListItem.js";
import { normalizeListOptions as t } from "../../helpers/utils.js";
import n from "../PlIcon16/PlIcon16.js";
import "../PlIcon16/index.js";
import { useElementPosition as r } from "../../composition/usePosition.js";
import './pl-btn-split.css';/* empty css             */
import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, watch as S, withKeys as C, withModifiers as w } from "vue";
import { deepEqual as T } from "@milaboratories/helpers";
var E = ["onKeyup"], D = /* @__PURE__ */ d({
	__name: "PlBtnSplit",
	props: /* @__PURE__ */ f({
		options: {},
		disabled: { type: Boolean },
		loading: { type: Boolean }
	}, {
		modelValue: { required: !0 },
		modelModifiers: {}
	}),
	emits: /* @__PURE__ */ f(["click"], ["update:modelValue"]),
	setup(d, { expose: f, emit: D }) {
		let O = d, k = D, A = x(d, "modelValue"), j = _(), M = _(), N = _(), P = _(), F = g({
			open: !1,
			optionsHeight: 0,
			activeIndex: -1
		});
		f({ data: F });
		let I = g({
			top: "0px",
			left: "0px",
			width: "0px"
		});
		S(M, (e) => {
			e && (F.optionsHeight = e.getBoundingClientRect().height, window.dispatchEvent(new CustomEvent("adjust")));
		}, { immediate: !0 });
		let L = o(() => F.open ? "chevron-up" : "chevron-down"), R = o(() => (O.options ?? []).findIndex((e) => T(e.value, A.value))), z = o(() => t(O.options ?? []).map((e, t) => ({
			...e,
			index: t,
			isSelected: t === R.value,
			isActive: t === F.activeIndex
		}))), B = o(() => O.loading || O.options === void 0), V = o(() => z.value.find((e) => T(e.value, A.value))?.label ?? (O.options === void 0 ? "..." : ""));
		r(j, (e) => {
			let t = e.top + e.height + 3;
			t + F.optionsHeight > e.clientHeight ? I.top = e.top - F.optionsHeight - 3 + "px" : I.top = t + "px", I.left = e.left + "px", I.width = e.width + "px";
		});
		let H = (e) => {
			A.value = e, F.open = !1, j?.value?.focus();
		};
		function U() {
			k("click");
		}
		let W = (e) => {
			if ([
				"ArrowDown",
				"ArrowUp",
				"Enter",
				"Escape"
			].includes(e.code)) e.preventDefault();
			else return;
			if (e.target === P.value && e.code === "Enter") {
				U();
				return;
			}
			let { open: t, activeIndex: n } = F;
			if (!t && e.target === N.value) {
				e.code === "Enter" && (F.open = !0);
				return;
			}
			e.code === "Escape" && (F.open = !1, j.value?.focus());
			let r = b(z), { length: i } = r;
			if (!i) return;
			e.code === "Enter" && H(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, s = Math.abs(a + o + i) % i;
			F.activeIndex = z.value[s].index ?? -1;
		}, G = (e) => {
			let t = e.relatedTarget;
			!j.value?.contains(t) && !M.value?.contains(t) && (F.open = !1);
		};
		return (t, r) => (h(), l("div", {
			ref_key: "root",
			ref: j,
			class: p([{
				disabled: d.disabled || B.value,
				loading: B.value
			}, "pl-btn-split d-flex"]),
			onFocusout: G,
			onKeydown: W
		}, [
			u("div", {
				ref_key: "buttonAction",
				ref: P,
				class: "pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn",
				tabindex: "0",
				onClick: U,
				onKeyup: C(w(U, ["stop"]), ["enter"])
			}, y(V.value), 41, E),
			u("div", {
				ref_key: "menuActivator",
				ref: N,
				class: "pl-btn-split__icon-container d-flex align-center justify-center",
				tabindex: "0",
				onClick: r[0] ||= (e) => F.open = !F.open
			}, [B.value ? (h(), s(b(n), {
				key: 0,
				name: "loading"
			})) : (h(), s(b(n), {
				key: 1,
				name: L.value,
				class: "pl-btn-split__icon"
			}, null, 8, ["name"]))], 512),
			F.open ? (h(), s(a, {
				key: 0,
				to: "body"
			}, [u("div", {
				ref_key: "list",
				ref: M,
				class: "pl-dropdown__options",
				style: m(I),
				tabindex: "-1"
			}, [(h(!0), l(i, null, v(z.value, (t, n) => (h(), s(e, {
				key: n,
				option: t,
				"is-selected": t.isSelected,
				"is-hovered": t.isActive,
				size: "medium",
				onClick: w((e) => H(t.value), ["stop"])
			}, null, 8, [
				"option",
				"is-selected",
				"is-hovered",
				"onClick"
			]))), 128))], 4)])) : c("", !0)
		], 34));
	}
});
export { D as default };

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