(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('.pl-btn-split{--border-color: var(--border-color-default);height:40px;min-width:160px;border-radius:6px;border:1px solid var(--border-color);cursor:pointer}.pl-btn-split.disabled,.pl-btn-split.loading{pointer-events:none;--border-color: var(--border-color-div-grey)}.pl-btn-split.loading .mask-loading{animation:spin 2.5s linear infinite}.pl-btn-split__title{padding:8px 14px;height:100%;color:var(--border-color);transition:all .1s ease-in-out}.pl-btn-split__title:focus-visible{position:relative;outline:none}.pl-btn-split__title:focus-visible:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid var(--border-color-focus);border-radius:6px;z-index:2}.pl-btn-split__title:hover{border-radius:6px;background-color:var(--btn-sec-hover-grey)}.pl-btn-split__title:active{border-radius:6px;background-color:var(--btn-sec-press-grey)}.pl-btn-split__icon,.pl-btn-split .mask-loading{--icon-color: var(--border-color)}.pl-btn-split__icon-container{width:36px;height:100%;position:relative;transition:all .1s ease-in-out}.pl-btn-split__icon-container:focus-visible{position:relative;outline:none}.pl-btn-split__icon-container:focus-visible:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid var(--border-color-focus);border-radius:6px;z-index:2}.pl-btn-split__icon-container:hover{border-radius:6px;background-color:var(--btn-sec-hover-grey)}.pl-btn-split__icon-container:active{border-radius:6px;background-color:var(--btn-sec-press-grey)}.pl-btn-split__icon-container:before{content:"";background:var(--border-color);height:26px;position:absolute;left:0;width:1px}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as j, mergeModels as C, useModel as q, ref as u, reactive as B, watch as U, computed as r, createElementBlock as M, openBlock as s, normalizeClass as R, createElementVNode as y, createBlock as f, createCommentVNode as G, withKeys as J, withModifiers as S, toDisplayString as Q, unref as k, Teleport as X, normalizeStyle as Y, Fragment as Z, renderList as ee } from "vue";
import { deepEqual as H } from "@milaboratories/helpers";
import { useElementPosition as te } from "../../composition/usePosition.js";
import { normalizeListOptions as oe } from "../../helpers/utils.js";
import ne from "../DropdownListItem.vue.js";
import K from "../PlIcon16/PlIcon16.vue.js";

const ie = ["onKeyup"], ue = /* @__PURE__ */ j({
  __name: "PlBtnSplit",
  props: /* @__PURE__ */ C({
    options: {},
    disabled: { type: Boolean },
    loading: { type: Boolean }
  }, {
    modelValue: { required: !0 },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ C(["click"], ["update:modelValue"]),
  setup(m, { expose: O, emit: V }) {
    const c = m, z = V, v = q(m, "modelValue"), l = u(), x = u(), b = u(), _ = u(), o = B({
      open: !1,
      optionsHeight: 0,
      activeIndex: -1
    });
    O({
      data: o
    });
    const a = B({
      top: "0px",
      left: "0px",
      width: "0px"
    });
    U(
      x,
      (e) => {
        if (e) {
          const t = e.getBoundingClientRect();
          o.optionsHeight = t.height, window.dispatchEvent(new CustomEvent("adjust"));
        }
      },
      { immediate: !0 }
    );
    const D = r(() => o.open ? "chevron-up" : "chevron-down"), N = r(() => (c.options ?? []).findIndex((e) => H(e.value, v.value))), d = r(
      () => oe(c.options ?? []).map((e, t) => ({
        ...e,
        index: t,
        isSelected: t === N.value,
        isActive: t === o.activeIndex
      }))
    ), h = r(() => c.loading || c.options === void 0), T = r(() => {
      var e;
      return ((e = d.value.find((t) => H(t.value, v.value))) == null ? void 0 : e.label) ?? (c.options === void 0 ? "..." : "");
    });
    te(l, (e) => {
      const n = e.top + e.height + 3;
      n + o.optionsHeight > e.clientHeight ? a.top = e.top - o.optionsHeight - 3 + "px" : a.top = n + "px", a.left = e.left + "px", a.width = e.width + "px";
    });
    const E = (e) => {
      var t;
      v.value = e, o.open = !1, (t = l == null ? void 0 : l.value) == null || t.focus();
    };
    function g() {
      z("click");
    }
    const F = (e) => {
      var A, I;
      if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
        e.preventDefault();
      else
        return;
      if (e.target === _.value && e.code === "Enter") {
        g();
        return;
      }
      const { open: t, activeIndex: n } = o;
      if (!t && e.target === b.value) {
        e.code === "Enter" && (o.open = !0);
        return;
      }
      e.code === "Escape" && (o.open = !1, (A = l.value) == null || A.focus());
      const i = k(d), { length: p } = i;
      if (!p)
        return;
      e.code === "Enter" && E((I = i.find((w) => w.index === n)) == null ? void 0 : I.value);
      const P = i.findIndex((w) => w.index === n) ?? -1, W = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, $ = Math.abs(P + W + p) % p;
      o.activeIndex = d.value[$].index ?? -1;
    }, L = (e) => {
      var n, i;
      const t = e.relatedTarget;
      !((n = l.value) != null && n.contains(t)) && !((i = x.value) != null && i.contains(t)) && (o.open = !1);
    };
    return (e, t) => (s(), M("div", {
      ref_key: "root",
      ref: l,
      class: R([{ disabled: m.disabled || h.value, loading: h.value }, "pl-btn-split d-flex"]),
      onFocusout: L,
      onKeydown: F
    }, [
      y("div", {
        ref_key: "buttonAction",
        ref: _,
        class: "pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn",
        tabindex: "0",
        onClick: g,
        onKeyup: J(S(g, ["stop"]), ["enter"])
      }, Q(T.value), 41, ie),
      y("div", {
        ref_key: "menuActivator",
        ref: b,
        class: "pl-btn-split__icon-container d-flex align-center justify-center",
        tabindex: "0",
        onClick: t[0] || (t[0] = (n) => o.open = !o.open)
      }, [
        h.value ? (s(), f(k(K), {
          key: 0,
          name: "loading"
        })) : (s(), f(k(K), {
          key: 1,
          name: D.value,
          class: "pl-btn-split__icon"
        }, null, 8, ["name"]))
      ], 512),
      o.open ? (s(), f(X, {
        key: 0,
        to: "body"
      }, [
        y("div", {
          ref_key: "list",
          ref: x,
          class: "pl-dropdown__options",
          style: Y(a),
          tabindex: "-1"
        }, [
          (s(!0), M(Z, null, ee(d.value, (n, i) => (s(), f(ne, {
            key: i,
            option: n,
            "is-selected": n.isSelected,
            "is-hovered": n.isActive,
            size: "medium",
            onClick: S((p) => E(n.value), ["stop"])
          }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128))
        ], 4)
      ])) : G("", !0)
    ], 34));
  }
});
export {
  ue as default
};
//# sourceMappingURL=PlBtnSplit.vue.js.map
