import { openBlock as a, createElementBlock as r, createElementVNode as p, resolveComponent as F, resolveDirective as z, createBlock as x, normalizeClass as c, withCtx as g, toDisplayString as v, createCommentVNode as u, normalizeStyle as b, renderSlot as S, resolveDynamicComponent as y, withDirectives as _, createVNode as D, vShow as I, Fragment as B, renderList as O } from "vue";
import E from "axios";
import { isString as q, isArray as h, isPlainObject as k, isEqual as N, uniqBy as A, isFunction as C } from "lodash-es";
import { at as L, a7 as P, ae as M, aa as T, ad as V, b5 as W, b6 as j } from "./index-1e3e8095.js";
import { g as H, e as G, t as K, a as R } from "./itemSelectOptions-01e8c122.js";
import "@vueuse/core";
import "vue-i18n";
const U = {
  viewBox: "0 0 24 24",
  width: "1em",
  height: "1em"
}, Y = /* @__PURE__ */ p("path", {
  fill: "currentColor",
  d: "m7 10l5 5l5-5H7Z"
}, null, -1), Z = [
  Y
];
function J(e, l) {
  return a(), r("svg", U, [...Z]);
}
const Q = { name: "mdi-arrow-drop-down", render: J }, X = `.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}
`;
P("KapixDropDown", X);
const $ = {
  name: "KapixDropDown",
  inject: {
    $entityContext: { default: null }
  },
  props: {
    modelValue: {
      type: [String, Number, Boolean, Object, Array, null],
      default: null
    },
    disabled: {
      type: Boolean,
      default: !1,
      required: !1
    },
    noSelectionStyle: {
      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, Boolean, Function],
      default: null,
      required: !1
    },
    itemPrependComponent: {
      type: [String, Boolean, Function, Object],
      default: null,
      required: !1
    },
    itemIcon: {
      type: [String, Boolean, Function],
      default: "icon",
      required: !1
    },
    itemColor: {
      type: [String, Boolean, Function],
      default: "color",
      required: !1
    },
    itemBackgroundColor: {
      type: [String, Boolean, Function],
      default: "background",
      required: !1
    },
    itemIconClass: {
      type: [String, Boolean, Function],
      default: "iconClass",
      required: !1
    },
    itemSubtitle: {
      type: [String, Boolean, Function],
      default: "description",
      required: !1
    },
    itemClass: {
      type: [String, Array, Boolean, Function],
      default: "className",
      required: !1
    },
    itemText: {
      type: [String, Array, Boolean, Function],
      default: "label",
      required: !1
    },
    itemValue: {
      type: [String, Boolean, Function],
      default: "value",
      required: !1
    },
    itemStyle: {
      type: [String, Boolean, Function],
      default: null,
      required: !1
    },
    itemDisabled: {
      type: [String, Boolean, Function],
      default: null,
      required: !1
    },
    itemTooltip: {
      type: [String, Boolean, 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
    },
    itemCompare: {
      type: [String, Boolean, Function],
      default: null,
      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) => q(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: l }) {
      return h(e) ? e.map((t) => {
        if (l && k(t)) {
          const s = t[l.itemText], o = t[l.itemValue];
          return {
            ...t,
            $$isFromDataSource: !0,
            label: s,
            value: o
          };
        }
      }) : M;
    },
    internalItems({ items: e }) {
      return h(e) ? e : M;
    },
    normalizedValue({ returnObject: e, modelValue: l }) {
      return e && k(l) ? H(l, this) : l;
    },
    selectedItem({ normalizedItems: e, normalizedValue: l }) {
      var s;
      const t = this.findNormalizedItem(e, l);
      return !t && ((s = this.$entityContext) != null && s.showSkeleton) ? {
        label: "•••"
      } : 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: l }) {
      return e && (l ? e.filter((t) => t.normalizedLabel ? t.normalizedLabel.includes(l) : !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, l) {
        if (this.isFetching || N(e, l))
          return;
        let t = !1;
        if (e)
          try {
            this.isFetching = !0;
            const { url: s } = e, o = G(e), i = s && await T(s, () => E.get(s, o));
            if (i && i.data) {
              let d;
              h(i.data) ? d = i.data : k(i.data) && forOwn(i.data, (m, f) => {
                h(m) && (d = i.data);
              }), h(d) && (t = !0, this.dataSourceItems = d);
            }
          } catch (s) {
            console.error(s);
          } finally {
            this.isFetching = !1;
          }
        t || (this.dataSourceItems = null);
      }
    }
  },
  methods: {
    isSeparator: V,
    findNormalizedItem(e, l, t = 0) {
      if (e) {
        const { itemCompare: s } = this;
        let o = e.find((i) => W(i.value, l, s));
        return !o && l !== void 0 && e.forEach((i) => {
          !o && (i._children || t === 0 && i.children) && (o = this.findNormalizedItem(i.children(), l, t + 1));
        }), o;
      }
    },
    isSubSelected(e) {
      return e && e.value === this.normalizedValue;
    },
    normalizeItems(e, l) {
      return h(e) && A(e.map((t, s) => {
        if (t) {
          if (this.isSeparator(t)) {
            if (this.isSeparator(e[s - 1]))
              return null;
            const f = `separator-${s}`;
            return {
              ...t,
              separator: !0,
              value: f,
              index: f
            };
          }
          q(t) && (t = {
            label: t,
            value: t
          });
          const o = K(t, t.$$isFromDataSource ? {
            ...this.$props,
            ...this.dataSource
          } : this.$props), i = l ? `${l} > ${o.label}` : o.label;
          let d, m;
          return t.children && (C(this.recursive) ? this.recursive(t) : this.recursive) && (C(t.children) ? d = () => this.normalizeItems(t.children(), i) : (m = this.normalizeItems(t.children, i), d = () => m)), {
            ...o,
            displayPath: i,
            isElement: d && this.getGroupIsElement(t),
            _children: m,
            children: d,
            item: t,
            index: s,
            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);
    },
    getGroupIsElement(e) {
      return R(e, this.itemGroupIsElement);
    },
    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 && j({
        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);
    }
  }
}, ee = { class: "kapix-select-input" }, te = {
  key: 0,
  class: "kapix-select-input-placeholder"
}, ie = { class: "default-item-template" }, ne = ["innerHTML"], le = { class: "icon-container" }, ae = { key: 2 }, re = ["data-cy", "onClick", "onMouseenter", "onMouseleave"], se = {
  key: 2,
  class: "text-no-wrap label"
}, oe = ["innerHTML"], ue = ["innerHTML"];
function ce(e, l, t, s, o, i) {
  const d = Q, m = F("tippy"), f = z("tippy");
  return a(), x(m, {
    class: c(["kapix-select-input-container", {
      disabled: t.disabled,
      "display-only": t.displayOnly,
      "add-button": t.addButton,
      "icon-mode": t.icon
    }]),
    visible: o.showMenu,
    "update-on-change": t.menuPlacementUpdate,
    interactive: "",
    "z-index": t.zIndex,
    distance: t.menuDistance,
    "max-width": i.maxWidthStyle,
    placement: t.menuPlacement,
    animation: t.menuAnimation,
    arrow: t.menuArrow,
    theme: "no",
    trigger: "manual",
    "data-cy": t.inputCy,
    onHidden: l[1] || (l[1] = (n) => o.showMenu = !1),
    onClick: l[2] || (l[2] = (n) => i.openMenu(n))
  }, {
    trigger: g(() => [
      p("div", {
        class: c(["kapix-select-input-content", o.showMenu && "is-active"])
      }, [
        p("div", ee, [
          i.isEmpty ? (a(), r("div", te, v(t.placeholder), 1)) : u("", !0),
          i.selectedItem ? (a(), r("div", {
            key: 1,
            class: c(["selected-item", i.selectedItem.className]),
            style: b(t.noSelectionStyle ? void 0 : i.selectedItem.style)
          }, [
            S(e.$slots, "selection", {
              item: i.selectedItem.item,
              formattedItem: i.selectedItem
            }, () => [
              p("div", ie, [
                i.selectedItem.prependComponent ? (a(), x(y(i.selectedItem.prependComponent), {
                  key: 0,
                  item: i.selectedItem.item,
                  "formatted-item": i.selectedItem,
                  class: "mr-2"
                }, null, 8, ["item", "formatted-item"])) : u("", !0),
                i.selectedItem.prependIcon ? (a(), r("div", {
                  key: 1,
                  class: c([i.selectedItem.prependIcon, "mr-2"])
                }, null, 2)) : u("", !0),
                p("div", {
                  class: "text-no-wrap label",
                  innerHTML: i.selectedItem.label
                }, null, 8, ne),
                i.selectedItem.icon ? (a(), r("div", {
                  key: 2,
                  class: c([i.selectedItem.icon, "ml-2"])
                }, null, 2)) : u("", !0)
              ])
            ])
          ], 6)) : u("", !0)
        ]),
        _(p("div", le, [
          D(d, { class: "arrow-icon" })
        ], 512), [
          [I, t.showArrow && !i.computedDisabled]
        ])
      ], 2)
    ]),
    default: g(() => [
      o.showMenu && !i.computedDisabled && t.items ? (a(), r("div", {
        key: 0,
        style: b(i.dropdownStyle),
        class: "kapix-select-input-menu-container"
      }, [
        p("div", {
          ref: "scrollerMenu",
          class: c(["kapix-select-input-menu", { "no-padding-top": i.filteredItems[0] && i.filteredItems[0].separator }])
        }, [
          t.clearable && !i.isEmpty ? (a(), r("div", {
            key: 0,
            class: "kapix-select-input-item",
            onClick: l[0] || (l[0] = (n) => i.clickItem(null))
          })) : u("", !0),
          (a(!0), r(B, null, O(i.filteredItems, (n) => (a(), r(B, null, [
            n.separator ? (a(), r("div", {
              key: `separator-${n.index}`,
              class: c(["separator", n.header && ["header", n.className || e.mainColor]])
            }, [
              n.prependComponent ? (a(), x(y(n.prependComponent), {
                key: 0,
                item: n.item,
                "formatted-item": n,
                class: "mr-2"
              }, null, 8, ["item", "formatted-item"])) : u("", !0),
              n.prependIcon ? (a(), r("div", {
                key: 1,
                class: c([n.prependIcon, "mr-2"])
              }, null, 2)) : u("", !0),
              n.header ? (a(), r("span", ae, v(n.header), 1)) : u("", !0),
              n.icon ? (a(), r("div", {
                key: 3,
                class: c([n.icon, "ml-2"])
              }, null, 2)) : u("", !0)
            ], 2)) : _((a(), r("div", {
              key: n.index,
              "data-cy": t.inputCy && `${t.inputCy}-item-${n.index}`,
              class: c(["kapix-select-input-item", [
                `item-${n.index}`,
                n.className,
                i.selectedItem && n.item === i.selectedItem.item && "selected",
                n.disabled && "disabled"
              ]]),
              style: b(n.style),
              onClick: (w) => i.clickItem(n),
              onMouseenter: (w) => i.onItemMouseEnter(n),
              onMouseleave: (w) => i.onItemMouseLeave(n)
            }, [
              S(e.$slots, "item", {
                selected: i.selectedItem && n.item === i.selectedItem.item,
                formattedItem: n,
                item: n.item,
                index: n.index
              }, () => [
                p("div", {
                  class: c(["default-item-template", n.subtitle && "subtitle"])
                }, [
                  n.prependComponent ? (a(), x(y(n.prependComponent), {
                    key: 0,
                    item: n.item,
                    "formatted-item": n,
                    class: "mr-2"
                  }, null, 8, ["item", "formatted-item"])) : u("", !0),
                  n.prependIcon ? (a(), r("div", {
                    key: 1,
                    class: c([n.prependIcon, "mr-2"])
                  }, null, 2)) : u("", !0),
                  n.label ? (a(), r("div", se, [
                    p("div", {
                      innerHTML: n.label
                    }, null, 8, oe),
                    n.subtitle ? (a(), r("div", {
                      key: 0,
                      class: "subtitle",
                      innerHTML: n.subtitle
                    }, null, 8, ue)) : u("", !0)
                  ])) : u("", !0),
                  n.icon ? (a(), r("div", {
                    key: 3,
                    class: c([n.icon, "ml-2"])
                  }, null, 2)) : u("", !0)
                ], 2)
              ])
            ], 46, re)), [
              [f, n.tooltip]
            ])
          ], 64))), 256))
        ], 2)
      ], 4)) : u("", !0)
    ]),
    _: 3
  }, 8, ["class", "visible", "update-on-change", "z-index", "distance", "max-width", "placement", "animation", "arrow", "data-cy"]);
}
const ye = /* @__PURE__ */ L($, [["render", ce]]);
export {
  ye as default
};
