import { openBlock as s, createElementBlock as o, createElementVNode as c, resolveComponent as q, resolveDirective as C, createBlock as I, normalizeClass as p, withCtx as y, toDisplayString as w, createCommentVNode as h, renderSlot as k, withDirectives as v, createVNode as P, vShow as B, normalizeStyle as S, Fragment as _, renderList as z } from "vue";
import T from "axios";
import { isString as D, isArray as m, isPlainObject as x, isEqual as F, uniqBy as E, isFunction as b, isBoolean as L } from "lodash-es";
import { at as O, a7 as V, ad as M, aa as N, ac as A, b5 as W, b6 as H } from "./index-d46d84f5.js";
import { e as j } from "./externalApi-c841f786.js";
import "@vueuse/core";
import "vue-i18n";
const G = {
  viewBox: "0 0 24 24",
  width: "1em",
  height: "1em"
}, K = /* @__PURE__ */ c("path", {
  fill: "currentColor",
  d: "m7 10l5 5l5-5H7Z"
}, null, -1), R = [
  K
];
function U(e, i) {
  return s(), o("svg", G, [...R]);
}
const Y = { name: "mdi-arrow-drop-down", render: U }, Z = `.kapix-select-input-container{cursor:pointer}.kapix-select-input-container.disabled{-webkit-user-select:none;user-select:none;opacity:.8;cursor:default}.kapix-select-input-container.display-only{cursor:default}.kapix-select-input-container.add-button{text-align:center}.kapix-select-input-container.add-button .kapix-select-input-placeholder{color:inherit}.kapix-select-input-container.icon-mode{border:none}.kapix-select-input-container.icon-mode .icon{margin:0!important;width:auto;cursor:pointer}.kapix-select-input-container.icon-mode .label,.kapix-select-input-container.icon-mode .icon-container{display:none}.kapix-select-input-header{display:flex;flex-direction:row;align-items:center;margin-right:5px}.kapix-select-input-content{width:100%;height:100%;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden;position:relative;align-items:center}.kapix-select-input-content .icon-container{overflow:hidden;width:30px;display:flex;align-items:center}.kapix-select-input-content .arrow-icon{transition:.3s cubic-bezier(.25,.8,.5,1);color:inherit;font-size:22px}.kapix-select-input-content.is-active .arrow-icon{transform:rotate(180deg)}.kapix-select-input-content .selected-item{white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis}.kapix-select-input-content .selected-item .v-icon{color:inherit}.kapix-select-input{width:100%;min-width:0}.showing-progress{position:absolute;width:99%;bottom:0}.kapix-select-input-placeholder{white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;color:#bbb}.kapix-select-input-menu-container{display:flex;flex-direction:column;max-height:450px;border:1px solid rgba(128,128,128,.36);border-radius:5px;background:white;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.kapix-select-input-menu{overflow-x:hidden;overflow-y:auto;max-height:40vh;padding:10px 0;text-align:left;min-width:130px}.kapix-select-input-menu::-webkit-scrollbar-thumb{background-color:currentColor;border-radius:9px;border:solid 6px transparent;background-clip:content-box}.kapix-select-input-menu::-webkit-scrollbar-thumb:hover{border-width:5px}.kapix-select-input-menu::-webkit-scrollbar{height:18px;width:18px}@media (max-width: 599.98px){.kapix-select-input-menu::-webkit-scrollbar{height:0;width:0}}.kapix-select-input-menu::-webkit-scrollbar:disabled{display:none}.kapix-select-input-menu::-webkit-scrollbar-button,.kapix-select-input-menu ::-webkit-scrollbar-corner{cursor:pointer;background:transparent}.kapix-select-input-menu::-webkit-scrollbar-button:horizontal:decrement,.kapix-select-input-menu::-webkit-scrollbar-button:horizontal:increment,.kapix-select-input-menu::-webkit-scrollbar-button:vertical:decrement,.kapix-select-input-menu::-webkit-scrollbar-button:vertical:increment{display:none}.kapix-select-input-menu::-webkit-scrollbar-button:vertical:start:increment,.kapix-select-input-menu::-webkit-scrollbar-button:vertical:end:decrement,.kapix-select-input-menu::-webkit-scrollbar-button:horizontal:start:increment,.kapix-select-input-menu::-webkit-scrollbar-button:horizontal:end:decrement{display:none}.kapix-select-input-menu::-webkit-scrollbar-track{background:transparent}.kapix-select-input-menu::-webkit-scrollbar-thumb:vertical{min-height:50px}.kapix-select-input-menu::-webkit-scrollbar-thumb:horizontal{min-width:50px}.kapix-select-input-menu.no-padding-top{padding-top:0}.kapix-select-input-menu .separator{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:5px;margin-bottom:5px;border-bottom:1px solid lightgrey}.kapix-select-input-menu .separator:last-child,.kapix-select-input-menu .separator:first-child{display:none}.kapix-select-input-menu .separator.header{display:flex;flex-direction:row;text-align:center;margin-top:5px}.kapix-select-input-menu .separator.header:last-child{display:none}.kapix-select-input-menu .separator.header:first-child{margin:0}.kapix-select-input-menu .separator+.separator{display:none}.default-item-template{white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%;align-items:center}.default-item-template .icon{margin-right:5px;width:30px}.default-item-template .label{text-align:left;width:100%}.default-item-template .subtitle{white-space:break-spaces;margin-top:5px;margin-bottom:5px;font-size:11px;opacity:.7}.default-item-template.subtitle{padding:5px 0}.kapix-select-input-item{min-height:35px;display:flex;z-index:5;align-items:center;padding:0 10px;cursor:pointer}.kapix-select-input-item.selected{color:#3899ec;background-color:#d3d3d333;border-right:2px solid}.kapix-select-input-item.disabled{background-color:#d3d3d34d;opacity:.5;cursor:no-drop}.kapix-select-input-item:hover{background-color:#d3d3d34d}.kapix-select-input-item .v-icon{color:inherit}
`;
V("KapixDropDown", Z);
const J = {
  name: "KapixDropDown",
  props: {
    modelValue: {
      type: [String, Number, Boolean, Object, Array, null],
      default: null
    },
    disabled: {
      type: Boolean,
      default: !1,
      required: !1
    },
    zIndex: {
      type: Number,
      default: void 0,
      required: !1
    },
    itemGroupIsElement: {
      type: [Boolean, String, Function],
      default: null,
      required: !1
    },
    itemPrependIcon: {
      type: [String, Function],
      default: null,
      required: !1
    },
    itemIcon: {
      type: [String, Function],
      default: "icon",
      required: !1
    },
    itemColor: {
      type: [String, Function],
      default: "color",
      required: !1
    },
    itemIconClass: {
      type: [String, Function],
      default: "iconClass",
      required: !1
    },
    itemSubtitle: {
      type: [String, Function],
      default: "description",
      required: !1
    },
    itemClass: {
      type: [String, Array, Function],
      default: "className",
      required: !1
    },
    itemText: {
      type: [String, Array, Function],
      default: "label",
      required: !1
    },
    itemValue: {
      type: [String, Function],
      default: "value",
      required: !1
    },
    itemStyle: {
      type: [String, Function],
      default: null,
      required: !1
    },
    itemDisabled: {
      type: [String, Function],
      default: null,
      required: !1
    },
    itemTooltip: {
      type: [String, Function],
      default: null,
      required: !1
    },
    placeholder: {
      type: String,
      default: "Select a value...",
      required: !1
    },
    items: {
      type: Array,
      default: null,
      required: !1
    },
    clearable: {
      type: Boolean,
      default: !1,
      required: !1
    },
    async: {
      type: Boolean,
      default: !1,
      required: !1
    },
    returnObject: {
      type: Boolean,
      default: !1,
      required: !1
    },
    search: {
      type: String,
      default: null,
      required: !1
    },
    recursive: {
      type: [Boolean, Function],
      default: !0,
      required: !1
    },
    showArrow: {
      type: Boolean,
      default: !0,
      required: !1
    },
    showSearch: {
      type: Boolean,
      default: !0,
      required: !1
    },
    addButton: {
      type: Boolean,
      default: !1,
      required: !1
    },
    icon: {
      type: Boolean,
      default: !1,
      required: !1
    },
    boundsLimit: {
      type: Boolean,
      default: !1,
      required: !1
    },
    stopEventOnClick: {
      type: Boolean,
      default: !0,
      required: !1
    },
    menuArrow: {
      type: Boolean,
      default: !1,
      required: !1
    },
    menuDistance: {
      type: Number,
      default: 2,
      required: !1
    },
    menuPlacement: {
      type: String,
      default: "bottom-start",
      required: !1
    },
    menuAnimation: {
      type: [String, Boolean],
      required: !1,
      default: "shift-away",
      validator: (e) => D(e) ? ["shift-away", "shift-toward", "fade", "scale", "perspective"].includes(e) : !0
    },
    menuPlacementUpdate: {
      type: Boolean,
      default: !1,
      required: !1
    },
    inputCy: {
      type: String,
      default: void 0
    },
    displayOnly: {
      type: Boolean,
      default: void 0
    },
    dataSource: {
      type: Object,
      default: void 0
    }
  },
  emits: ["update:modelValue", "update:search", "change", "show", "hidden", "item-mouse-enter", "item-mouse-leave"],
  data() {
    return {
      showMenu: !1,
      showingMenu: !1,
      internalSearch: null,
      maxWidth: null,
      dataSourceItems: null,
      isFetching: !1,
      indexWrapper: {
        index: {}
      }
    };
  },
  computed: {
    dropdownStyle({ maxWidth: e }) {
      return e && {
        minWidth: `${e}px`
      };
    },
    isEmpty() {
      return this.selectedItem == null;
    },
    formattedDataSourceItems({ dataSourceItems: e, dataSource: i }) {
      return m(e) ? e.map((t) => {
        if (i && x(t)) {
          const r = t[i.itemText], a = t[i.itemValue];
          return {
            label: r,
            value: a
          };
        }
      }) : M;
    },
    internalItems({ items: e }) {
      return m(e) ? e : M;
    },
    normalizedValue({ returnObject: e, modelValue: i }) {
      return e && x(i) ? this.getValue(i) : i;
    },
    selectedItem({ normalizedItems: e, normalizedValue: i }) {
      const t = this.findNormalizedItem(e, i);
      return t && {
        ...t,
        label: t.displayPath
      };
    },
    computedSearch: {
      get() {
        return this.search || this.internalSearch;
      },
      set(e) {
        this.internalSearch = e, this.$emit("update:search", e);
      }
    },
    normalizedSearch({ computedSearch: e }) {
      return e && e.toLowerCase();
    },
    normalizedItems() {
      return this.normalizeItems([
        ...this.internalItems,
        ...this.formattedDataSourceItems
      ]);
    },
    filteredItems({ normalizedItems: e, normalizedSearch: i }) {
      return e && (i ? e.filter((t) => t.normalizedLabel ? t.normalizedLabel.includes(i) : !1) : e);
    },
    maxWidthStyle() {
      return this.boundsLimit && this.maxWidth ? `${this.maxWidth}px` : "500px";
    },
    computedDisabled() {
      return this.disabled || this.displayOnly;
    }
  },
  watch: {
    showMenu(e) {
      e ? (this.$nextTick(this.onShowMenuOpened), this.$emit("show", !0)) : this.$emit("hidden", !0);
    },
    "dataSource.getAll": {
      immediate: !0,
      async handler(e, i) {
        if (this.isFetching || F(e, i))
          return;
        let t = !1;
        if (e)
          try {
            this.isFetching = !0;
            const { url: r } = e, a = j(e), n = r && await N(r, () => T.get(r, a));
            if (n && n.data) {
              let u;
              m(n.data) ? u = n.data : x(n.data) && forOwn(n.data, (d, f) => {
                m(d) && (u = n.data);
              }), m(u) && (t = !0, this.dataSourceItems = u);
            }
          } catch (r) {
            console.error(r);
          } finally {
            this.isFetching = !1;
          }
        t || (this.dataSourceItems = null);
      }
    }
  },
  methods: {
    isSeparator: A,
    findNormalizedItem(e, i, t = 0) {
      if (e) {
        let r = e.find((a) => a.value === i);
        return !r && i !== void 0 && e.forEach((a) => {
          !r && (a._children || t === 0 && a.children) && (r = this.findNormalizedItem(a.children(), i, t + 1));
        }), r;
      }
    },
    isSubSelected(e) {
      return e && e.value === this.normalizedValue;
    },
    normalizeItems(e, i) {
      return m(e) && E(e.map((t, r) => {
        if (t) {
          if (this.isSeparator(t)) {
            if (this.isSeparator(e[r - 1]))
              return null;
            const f = `separator-${r}`;
            return {
              ...t,
              separator: !0,
              value: f,
              index: f
            };
          }
          D(t) && (t = {
            label: t,
            value: t
          });
          const a = this.getLabel(t), n = i ? `${i} > ${a}` : a;
          let u, d;
          return t.children && (b(this.recursive) ? this.recursive(t) : this.recursive) && (b(t.children) ? u = () => this.normalizeItems(t.children(), n) : (d = this.normalizeItems(t.children, n), u = () => d)), {
            ...t,
            label: a,
            displayPath: n,
            value: this.getValue(t),
            normalizedLabel: a && a.toString().toLowerCase(),
            isElement: u && this.getGroupIsElement(t),
            prependIcon: this.getPrependIcon(t),
            icon: this.getIcon(t),
            iconClass: this.getIconClass(t),
            className: this.getClass(t),
            subtitle: this.getSubtitle(t),
            disabled: this.getDisabled(t),
            tooltip: this.getTooltip(t),
            style: {
              color: this.getColor(t),
              ...this.getStyle(t)
            },
            _children: d,
            children: u,
            item: t,
            index: r,
            get self() {
              return this;
            }
          };
        }
      }).filter((t) => t != null), "value");
    },
    updateValue(e) {
      this.computedDisabled || (this.$emit("update:modelValue", e), this.$emit("change", e));
    },
    clickItem(e) {
      e && e.disabled || (e && !this.returnObject ? this.updateValue(e.value) : this.updateValue(e && e.item), this.showMenu = !1);
    },
    clickSubItem({ item: e }) {
      this.clickItem(e);
    },
    getLabel(e) {
      if (this.itemText)
        if (m(this.itemText)) {
          let i;
          return this.itemText.forEach((t) => {
            i == null && (i = this.getDescendantProp(e, t));
          }), i;
        } else
          return this.getDescendantProp(e, this.itemText);
      return e;
    },
    getValue(e) {
      return this.itemValue ? this.getDescendantProp(e, this.itemValue) : e;
    },
    getGroupIsElement(e) {
      return this.getDescendantProp(e, this.itemGroupIsElement);
    },
    getPrependIcon(e) {
      return this.getDescendantProp(e, this.itemPrependIcon);
    },
    getColor(e) {
      return this.getDescendantProp(e, this.itemColor);
    },
    getIcon(e) {
      return this.getDescendantProp(e, this.itemIcon);
    },
    getIconClass(e) {
      return this.getDescendantProp(e, this.itemIconClass);
    },
    getClass(e) {
      return this.getDescendantProp(e, this.itemClass);
    },
    getStyle(e) {
      return this.getDescendantProp(e, this.itemStyle);
    },
    getDisabled(e) {
      return this.getDescendantProp(e, this.itemDisabled);
    },
    getTooltip(e) {
      const i = this.getDescendantProp(e, this.itemTooltip);
      return i && (x(i) ? i : { content: i, placement: "left" });
    },
    getSubtitle(e) {
      return this.getDescendantProp(e, this.itemSubtitle);
    },
    getDescendantProp(e, i) {
      return i ? L(i) ? i : b(i) ? i(e) : W(e, i) : null;
    },
    openMenu(e) {
      !this.computedDisabled && this.items && this.items.length && (this.stopEventOnClick && e && e.stopPropagation(), this.maxWidth = this.$el.offsetWidth, this.async ? this.showMenu ? this.showMenu = !1 : (this.showingMenu = !0, setTimeout(() => {
        this.showingMenu = !1, this.showMenu = !0;
      }, 500)) : this.showMenu = !this.showMenu);
    },
    onShowMenuOpened() {
      const e = this.$refs.scrollerMenu;
      e && this.showMenu && this.selectedItem && H({
        el: `item-${this.selectedItem.index}`,
        duration: 0,
        offset: -40,
        container: e
      });
    },
    onItemMouseEnter(e) {
      this.indexWrapper.index = {}, this.$emit("item-mouse-enter", e);
    },
    onItemMouseLeave(e) {
      this.$emit("item-mouse-leave", e);
    }
  }
}, Q = { class: "kapix-select-input" }, X = {
  key: 0,
  class: "kapix-select-input-placeholder"
}, $ = { class: "default-item-template" }, ee = ["innerHTML"], te = { class: "icon-container" }, ie = { key: 0 }, ne = ["data-cy", "onClick", "onMouseenter", "onMouseleave"], le = {
  key: 0,
  class: "text-no-wrap label"
}, ae = ["innerHTML"], re = ["innerHTML"];
function se(e, i, t, r, a, n) {
  const u = Y, d = q("tippy"), f = C("tippy");
  return s(), I(d, {
    class: p(["kapix-select-input-container", {
      disabled: t.disabled,
      "display-only": t.displayOnly,
      "add-button": t.addButton,
      "icon-mode": t.icon
    }]),
    visible: a.showMenu,
    "update-on-change": t.menuPlacementUpdate,
    interactive: "",
    "z-index": t.zIndex,
    distance: t.menuDistance,
    "max-width": n.maxWidthStyle,
    placement: t.menuPlacement,
    animation: t.menuAnimation,
    arrow: t.menuArrow,
    theme: "no",
    trigger: "manual",
    "data-cy": t.inputCy,
    onHidden: i[1] || (i[1] = (l) => a.showMenu = !1),
    onClick: i[2] || (i[2] = (l) => n.openMenu(l))
  }, {
    trigger: y(() => [
      c("div", {
        class: p(["kapix-select-input-content", a.showMenu && "is-active"])
      }, [
        c("div", Q, [
          n.isEmpty ? (s(), o("div", X, w(t.placeholder), 1)) : h("", !0),
          n.selectedItem ? (s(), o("div", {
            key: 1,
            class: p(["selected-item", n.selectedItem.className])
          }, [
            k(e.$slots, "selection", {
              item: n.selectedItem.item,
              formattedItem: n.selectedItem
            }, () => [
              c("div", $, [
                c("div", {
                  class: "text-no-wrap label",
                  innerHTML: n.selectedItem.label
                }, null, 8, ee)
              ])
            ])
          ], 2)) : h("", !0)
        ]),
        v(c("div", te, [
          P(u, { class: "arrow-icon" })
        ], 512), [
          [B, t.showArrow && !n.computedDisabled]
        ])
      ], 2)
    ]),
    default: y(() => [
      a.showMenu && !n.computedDisabled && t.items ? (s(), o("div", {
        key: 0,
        style: S(n.dropdownStyle),
        class: "kapix-select-input-menu-container"
      }, [
        c("div", {
          ref: "scrollerMenu",
          class: p(["kapix-select-input-menu", { "no-padding-top": n.filteredItems[0] && n.filteredItems[0].separator }])
        }, [
          t.clearable && !n.isEmpty ? (s(), o("div", {
            key: 0,
            class: "kapix-select-input-item",
            onClick: i[0] || (i[0] = (l) => n.clickItem(null))
          })) : h("", !0),
          (s(!0), o(_, null, z(n.filteredItems, (l) => (s(), o(_, null, [
            l.separator ? (s(), o("div", {
              key: `separator-${l.index}`,
              class: p(["separator", l.header && ["header", l.className || e.mainColor]])
            }, [
              l.header ? (s(), o("span", ie, w(l.header), 1)) : h("", !0)
            ], 2)) : v((s(), o("div", {
              key: l.index,
              "data-cy": t.inputCy && `${t.inputCy}-item-${l.index}`,
              class: p(["kapix-select-input-item", [
                `item-${l.index}`,
                l.className,
                n.selectedItem && l.item === n.selectedItem.item && "selected",
                l.disabled && "disabled"
              ]]),
              style: S(l.style),
              onClick: (g) => n.clickItem(l),
              onMouseenter: (g) => n.onItemMouseEnter(l),
              onMouseleave: (g) => n.onItemMouseLeave(l)
            }, [
              k(e.$slots, "item", {
                selected: n.selectedItem && l.item === n.selectedItem.item,
                formattedItem: l,
                item: l.item,
                index: l.index
              }, () => [
                c("div", {
                  class: p(["default-item-template", l.subtitle && "subtitle"])
                }, [
                  l.label ? (s(), o("div", le, [
                    c("div", {
                      innerHTML: l.label
                    }, null, 8, ae),
                    l.subtitle ? (s(), o("div", {
                      key: 0,
                      class: "subtitle",
                      innerHTML: l.subtitle
                    }, null, 8, re)) : h("", !0)
                  ])) : h("", !0)
                ], 2)
              ])
            ], 46, ne)), [
              [f, l.tooltip]
            ])
          ], 64))), 256))
        ], 2)
      ], 4)) : h("", !0)
    ]),
    _: 3
  }, 8, ["class", "visible", "update-on-change", "z-index", "distance", "max-width", "placement", "animation", "arrow", "data-cy"]);
}
const fe = /* @__PURE__ */ O(J, [["render", se]]);
export {
  fe as default
};
