@useinsider/guido 3.16.0 → 3.17.0-beta.3e9d6e7

package/dist/node_modules/@useinsider/design-system-organisms/node_modules/@useinsider/design-system-vue/dist/InDropDown.js

@@ -0,0 +1,1098 @@
+import { o as d, h as c, l as m, b as v, q as f, d as y } from "./chunks/helpers.CgHNyjAJ.js";
+import { InTextInput as g } from "./InTextInput.js";
+import { InButtonV2 as O } from "./InButtonV2.js";
+import { InBox as C } from "./InBox.js";
+import { InIcons as b } from "./InIcons.js";
+import { InSkeleton as L } from "./InSkeleton.js";
+import { c as x } from "./chunks/clickOutside.qP9M0QCm.js";
+import { InTooltip as S } from "./InTooltip.js";
+import { n as $ } from "./chunks/_plugin-vue2_normalizer.WQT2Fc8L.js";
+/* empty css                        */
+const k = "_in-dropdown-wrapper_v01428_diFx-", I = "_in-dropdown-wrapper_invalid_v01428_xYj-N", T = "_in-dropdown-wrapper_warning_v01428_MCbqg", D = "_in-dropdown-wrapper__error-message_v01428_EKdF2", B = "_in-dropdown-wrapper__warning-message_v01428_vwv9S", V = "_in-dropdown-wrapper__text-type_v01428_Ee5Ij", P = "_in-dropdown-wrapper__item-list-wrapper_top_v01428_S4jF0", W = "_in-dropdown-wrapper__black-item-list_v01428_FVF-r", A = "_in-dropdown-wrapper__item-list_checkbox_v01428_3vB54", K = "_create-new-option_v01428_4NWFy", E = {
+  "in-dropdown-wrapper": "_in-dropdown-wrapper_v01428_diFx-",
+  inDropdownWrapper: k,
+  "in-dropdown-wrapper_invalid": "_in-dropdown-wrapper_invalid_v01428_xYj-N",
+  inDropdownWrapperInvalid: I,
+  "in-dropdown-wrapper_warning": "_in-dropdown-wrapper_warning_v01428_MCbqg",
+  inDropdownWrapperWarning: T,
+  "in-dropdown-wrapper__error-message": "_in-dropdown-wrapper__error-message_v01428_EKdF2",
+  inDropdownWrapperErrorMessage: D,
+  "in-dropdown-wrapper__warning-message": "_in-dropdown-wrapper__warning-message_v01428_vwv9S",
+  inDropdownWrapperWarningMessage: B,
+  "in-dropdown-wrapper__text-type": "_in-dropdown-wrapper__text-type_v01428_Ee5Ij",
+  inDropdownWrapperTextType: V,
+  "in-dropdown-wrapper__item-list-wrapper_top": "_in-dropdown-wrapper__item-list-wrapper_top_v01428_S4jF0",
+  inDropdownWrapperItemListWrapperTop: P,
+  "in-dropdown-wrapper__black-item-list": "_in-dropdown-wrapper__black-item-list_v01428_FVF-r",
+  inDropdownWrapperBlackItemList: W,
+  "in-dropdown-wrapper__item-list_checkbox": "_in-dropdown-wrapper__item-list_checkbox_v01428_3vB54",
+  inDropdownWrapperItemListCheckbox: A,
+  "create-new-option": "_create-new-option_v01428_4NWFy",
+  createNewOption: K
+}, R = 1, w = [38, 40], M = "category", H = ".router-view", r = Object.freeze({ Top: "top", Bottom: "bottom" }), N = [
+  ["primary", "solid|primary"],
+  ["secondary", "solid|subtle-primary"],
+  ["text", "text|primary"],
+  ["dropdown", "solid|primary"]
+], q = {
+  directives: { clickOutside: x },
+  components: {
+    InTextInput: g,
+    InButtonV2: O,
+    InBox: C,
+    InSkeleton: L,
+    InIcons: b,
+    InTooltip: S
+  },
+  props: {
+    /**
+     * @property {string} id
+     */
+    id: {
+      type: String,
+      default: "qa-drop-down"
+    },
+    /**
+     * @property {array} options
+     */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @property {array} customOptionsKey
+     */
+    customOptionsKey: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @property {string|number|boolean} value
+     */
+    value: {
+      type: String | Number | Boolean,
+      default: ""
+    },
+    /**
+     * @property {string} label
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @property {string|boolean} labelTooltip
+     */
+    labelTooltip: {
+      type: String | Boolean,
+      default: !1
+    },
+    /**
+     * @property {boolean} searchStatus
+     */
+    searchStatus: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @property {string} theme
+     */
+    theme: {
+      type: String,
+      default: "grey"
+    },
+    /**
+     * @property {boolean} disable
+     */
+    disable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @property {boolean} skeletonStatus
+     */
+    skeletonStatus: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @property {string} fetchUrl
+     */
+    fetchUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @property {boolean} autoComplete
+     */
+    autoComplete: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @property {boolean} visibleLabel
+     */
+    visibleLabel: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @property {string} queryString
+     */
+    queryString: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @property {boolean} invalid
+     */
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @property {boolean} invalidMessage
+     */
+    invalidMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @property {number} skeletonSizing
+     */
+    skeletonSizing: {
+      type: Object,
+      default: () => ({
+        width: 0,
+        number: 0
+      })
+    },
+    /**
+     * @property {string} overriddenListPosition
+     */
+    overriddenListPosition: {
+      type: String,
+      default: "",
+      validator: (t) => Object.values({ ...r, default: "" }).includes(t)
+    },
+    /**
+     * @property {string} placeholder
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @property {boolean} placeHolderStatus
+     */
+    placeHolderStatus: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @property {boolean} createOptionStatus
+     */
+    createOptionStatus: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @property {boolean} responseHasData
+     */
+    responseHasData: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @property {string} responseKey
+     */
+    responseKey: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @property {boolean} warning
+     */
+    warning: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @property {string} warningMessage
+     */
+    warningMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @property {string} buttonType
+     */
+    buttonType: {
+      type: String,
+      default: "dropdown"
+    },
+    /**
+     * @property {boolean} canRemoveSelectedItem
+     */
+    canRemoveSelectedItem: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @property {string} type
+     */
+    type: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * @property {number|string} childOptionsLeftPosition
+     */
+    childOptionsLeftPosition: {
+      type: String | Number,
+      default: ""
+    },
+    /**
+     * @property {string} noDataText
+     */
+    noDataText: {
+      type: String,
+      default: "No Data to Show"
+    },
+    /**
+     * @property {string} noSearchResultText
+     */
+    noSearchResultText: {
+      type: String,
+      default: "No Search Result"
+    },
+    /**
+     * @property {string} buttonSize
+     */
+    buttonSize: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * @property {boolean} attributeVisible
+     */
+    attributeVisible: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  provide() {
+    return {
+      __disableTriggerButtonMultiline: !0
+    };
+  },
+  data() {
+    return {
+      search: "",
+      selectedText: "",
+      selectedValue: "",
+      statusList: !1,
+      visibleChildOption: !1,
+      focusStatus: !1,
+      searchInFocus: !1,
+      trianglePosition: r.Top,
+      optionListPosition: r.Bottom,
+      childOptions: [],
+      optionList: [],
+      fetchPage: 1,
+      activeItem: 0,
+      activeChild: 0,
+      createdOption: {},
+      childListPosition: "",
+      childMenuRenderCounter: 0
+    };
+  },
+  computed: {
+    /**
+     * @return {boolean}
+     */
+    isCategory() {
+      return this.type === M;
+    },
+    /**
+     * @return {boolean}
+     */
+    emptyOptions() {
+      return this.mappedOptionList.length === 0;
+    },
+    /**
+     * @return boolean
+     */
+    noSearchResult() {
+      return this.emptyOptions && this.hasSearchValue;
+    },
+    /**
+     * @return {string}
+     */
+    emptyOptionsText() {
+      return this.noSearchResult ? this.noSearchResultText : this.noDataText;
+    },
+    /**
+     * @return {string}
+     */
+    emptyOptionsIcon() {
+      return this.noSearchResult ? "line-architect-predefined-segments-channel-actions-40" : "line-dropdown-empty";
+    },
+    /**
+     * @return {array}
+     */
+    mappedOptionList() {
+      var t;
+      let e = 0;
+      return (t = this.optionList) == null ? void 0 : t.map((i) => {
+        const s = this.customOptionsKey[0], o = this.customOptionsKey[1];
+        return i.children ? {
+          ...i,
+          text: o ? i[o] : i.text,
+          optionIndex: this.isCategory ? e++ : "",
+          children: i.children.map((n) => ({
+            ...n,
+            text: o ? n[o] : n.text,
+            value: s ? n[s] : n.value,
+            optionIndex: this.isCategory ? "" : e++,
+            disable: n.disabled || n.disable
+          }))
+        } : {
+          text: o ? i[o] : i.text,
+          value: s ? i[s] : i.value,
+          optionIndex: e++,
+          disable: i.disabled
+        };
+      });
+    },
+    /**
+     * @return {boolean}
+     */
+    isBlackTheme() {
+      return this.theme === "black";
+    },
+    /**
+     * @return {string}
+     */
+    url() {
+      const t = this.fetchUrl.includes("?") ? "&" : "?", e = `${this.fetchUrl}${t}page=${this.fetchPage}${this.queryString}`;
+      return this.hasSearchValue ? `${e}&term=${this.searchTrim}` : (this.selectedValue || this.value) !== "" && this.fetchPage === R ? `${e}&selected=${this.selectedValue || this.value}` : e;
+    },
+    /**
+     * @return {boolean}
+     */
+    hasChildren() {
+      return d(this.optionList) && this.optionList[0].hasOwnProperty("children");
+    },
+    /**
+     * @return {boolean}
+     */
+    hasChildrenInNotMappedOptions() {
+      return d(this.options) && this.options[0].hasOwnProperty("children");
+    },
+    /**
+     * @return {boolean}
+     */
+    activePlaceholder() {
+      return this.placeHolderStatus && this.selectedText === this.placeholder;
+    },
+    /**
+     * @return {string}
+     */
+    icon() {
+      return !this.placeHolderStatus || !this.canRemoveSelectedItem || this.activePlaceholder ? "filled-dropdown-down" : "line-architect-segments-closed";
+    },
+    /**
+     * @return {string}
+     */
+    iconSize() {
+      return this.isBlackTheme ? "20" : "24";
+    },
+    /**
+     * @return {boolean}
+     */
+    hasSearchValue() {
+      return this.searchTrim !== "";
+    },
+    /**
+     * @return {string}
+     */
+    searchTrim() {
+      return this.search.trim();
+    },
+    /**
+     * @return {boolean}
+     */
+    isWarning() {
+      return !this.invalid && this.warning;
+    },
+    /**
+     * @return {string}
+     */
+    message() {
+      return this.isWarning ? this.warningMessage : this.invalidMessage;
+    },
+    /**
+     * @return {string}
+     */
+    messageClass() {
+      return this.isWarning ? "in-dropdown-wrapper__warning-message" : "in-dropdown-wrapper__error-message";
+    },
+    /**
+     * @return {number}
+     */
+    optionLengthWithChildren() {
+      return this.optionList.reduce((t, e) => e.children ? t + e.children.length : t + 1, 0);
+    },
+    /**
+     * @return {object}
+     */
+    activeOption() {
+      let t = null;
+      return this.mappedOptionList.forEach((e) => {
+        e.children && (t = e.children.find((i) => i.optionIndex === this.activeItem) || t);
+      }), t || this.mappedOptionList.find((e) => e.optionIndex === this.activeItem);
+    },
+    /**
+     * @return {boolean}
+     */
+    activeOptionHasChild() {
+      return d(this.activeOption) && this.activeOption.children && this.activeOption.children.length;
+    },
+    /**
+     * @return {boolean}
+     */
+    visibleCategoryList() {
+      return this.statusList && this.visibleChildOption;
+    },
+    /**
+     * @return {array}
+     */
+    categoryOptions() {
+      return this.visibleCategoryList ? this.cloneOptions[this.activeItem].children : this.cloneOptions;
+    },
+    /**
+     * @return {array}
+     */
+    cloneOptions() {
+      if (this.searchTrim) {
+        const t = c(this.optionList).filter((e) => !e.children || e.children.length === 0 ? !1 : e.children.find((i) => i.text ? i.text.toLowerCase().includes(this.searchTrim.toLowerCase()) : !1));
+        return t.forEach((e) => {
+          e.children = e.children.filter(
+            (i) => i.text ? i.text.toLowerCase().includes(this.searchTrim.toLowerCase()) : !1
+          );
+        }), t;
+      }
+      return this.optionList;
+    },
+    /**
+     * @return {boolean}
+     */
+    hasMatchedTag() {
+      return this.optionList.some((t) => t.children ? t.children.some((e) => {
+        var i;
+        return ((i = e.text) == null ? void 0 : i.toLowerCase()) === this.searchTrim.toLowerCase();
+      }) : t.text === this.searchTrim);
+    },
+    /**
+     * @return {boolean}
+     */
+    isCreateButtonVisible() {
+      return this.createOptionStatus && this.hasSearchValue && !this.hasMatchedTag;
+    },
+    /**
+     * @return {array}
+     */
+    filteredOptions() {
+      if (this.searchTrim) {
+        let t = c(this.options);
+        return t = t.filter((e) => this.toLowerCase(e.text).includes(this.toLowerCase(this.searchTrim)) || e.children), t.forEach((e) => {
+          e.children && (e.children = e.children.filter(
+            (i) => this.toLowerCase(i.text).includes(this.toLowerCase(this.searchTrim))
+          ));
+        }), t.filter((e) => !e.children || e.children.length > 0);
+      }
+      return this.options;
+    },
+    /**
+     * @return {object}
+     */
+    buttonStyling() {
+      const t = N.find((e) => e[0] === this.buttonType)[1].split("|");
+      return {
+        styling: t[0],
+        type: t[1]
+      };
+    }
+  },
+  watch: {
+    skeletonStatus() {
+      this.skeletonStatus || this.setScrollEvent();
+    },
+    value() {
+      this.value === "" && this.placeHolderStatus && (this.selectedText = this.placeholder, this.attributeVisible && (this.selectedValue = "")), this.setValue();
+    },
+    options() {
+      this.prepareOptions(), this.setValue();
+    },
+    search: y(function() {
+      this.fetchPage = 1, d(this.createdOption) && this.autoComplete && this.$emit("change", this.convertKey(this.createdOption).value), this.prepareOptions();
+    }, 300),
+    autoComplete() {
+      this.fetchPage = 1, this.prepareOptions(), this.setDefaultValue();
+    },
+    statusList() {
+      var t;
+      (t = this.$refs.dropDownList) == null || t.scrollTo(0, 0), this.$nextTick(() => {
+        var e, i;
+        this.statusList && ((i = (e = this.$refs.dropDownListWrapper) == null ? void 0 : e.$el) == null || i.focus());
+      });
+    },
+    fetchUrl() {
+      this.fetchPage = 1, this.createOptionsWithApi(), this.setDefaultValue();
+    },
+    childOptions: {
+      handler() {
+        this.childMenuRenderCounter++;
+      },
+      deep: !0
+    }
+  },
+  mounted() {
+    if (this.optionList = this.options, this.placeHolderStatus) {
+      this.optionList = this.filteredOptions, this.selectedText = this.placeholder, this.setDefaultValue();
+      return;
+    }
+    this.optionList.length !== 0 && (this.hasChildren && this.optionList[0].children.length > 0 ? (this.selectedValue = this.convertKey(this.optionList[0].children[0]).value, this.selectedText = this.convertKey(this.optionList[0].children[0]).text) : (this.selectedValue = this.convertKey(this.optionList[0]).value, this.selectedText = this.convertKey(this.optionList[0]).text)), this.setDefaultValue(), this.prepareOptions(), this.skeletonStatus || this.setScrollEvent(), this.$el.addEventListener("keydown", (t) => {
+      w.includes(t.keyCode) && t.preventDefault();
+    }, !1);
+  },
+  methods: {
+    /**
+     * @param {object} option
+     * @return {object}
+     */
+    convertKey(t) {
+      const e = this.customOptionsKey[0] || "value", i = this.customOptionsKey[1] || "text";
+      return {
+        text: t[i] || t.text,
+        value: t[e] || t.value
+      };
+    },
+    /**
+     * @return {void}
+     */
+    openList() {
+      this.$emit("openList"), this.overriddenListPosition ? (this.optionListPosition = this.overriddenListPosition, this.trianglePosition = this.overriddenListPosition === r.Top ? r.Bottom : r.Top) : this.calculatePosition(), this.createdOption = {}, this.statusList = !this.statusList, this.search = "", this.focusStatus = this.statusList !== !1, this.visibleChildOption && this.closeChildOption();
+    },
+    /**
+     * @return {void}
+     */
+    calculatePosition() {
+      this.$nextTick(() => {
+        const t = document.querySelector(H), e = window.innerHeight, i = f(this.$el), s = t ? parseInt(window.getComputedStyle(t).paddingBottom) : 0, o = 115, n = 75, l = window.pageYOffset, a = 240;
+        i.top - l + s < a + o ? (this.trianglePosition = r.Top, this.optionListPosition = r.Bottom) : e - (i.top - l + s) < a + n ? (this.trianglePosition = r.Bottom, this.optionListPosition = r.Top) : (this.trianglePosition = r.Top, this.optionListPosition = r.Bottom);
+      });
+    },
+    /**
+     * @return {void}
+     */
+    closeList() {
+      this.statusList && (this.resetScroll(), this.closeChildOption(), this.resetToInitialValues(), this.$emit("closeList"));
+    },
+    /**
+     * @param {string|number|boolean} value
+     * @param {string} text
+     * @return {void}
+     */
+    selectItem(t, e) {
+      this.selectedText = e, this.selectedValue = t, this.$emit("change", t);
+    },
+    /**
+     * @param {string|number|boolean} value
+     * @param {string} text
+     * @return {void}
+     */
+    selectItemAndClose(t, e) {
+      this.selectItem(t, e), this.closeList();
+    },
+    /**
+     * @param {object} option
+     * @return {void}
+     */
+    select(t) {
+      if (d(t)) {
+        if (t.inActive) {
+          this.$emit("selectedInActiveOption", t), this.closeList();
+          return;
+        }
+        t.children || (this.$emit("select", t.value), this.selectItemAndClose(t.value, t.text));
+      }
+    },
+    /**
+     *
+     * @param {object} event
+     * @return {valid}
+     */
+    searchOption(t) {
+      w.includes(t.keyCode) && this.$refs.dropDownListWrapper.$el.focus(), this.search = t.target.value, this.closeChildOption();
+    },
+    /**
+     * @return {void}
+     */
+    setDefaultValue() {
+      this.setValue(), this.selectItemAndClose(this.selectedValue, this.selectedText);
+    },
+    /**
+     * @return {void}
+     */
+    setValue() {
+      var t, e, i, s;
+      let o = { text: this.selectedText, value: this.selectedValue }, n = null, l = null;
+      if (this.autoComplete) {
+        const p = this.optionList[0] || {};
+        o = {
+          text: ((t = this.convertKey(p)) == null ? void 0 : t.text) || (this.placeHolderStatus ? this.placeholder : ""),
+          value: ((e = this.convertKey(p)) == null ? void 0 : e.value) || ""
+        };
+      } else this.fetchUrl && (o = {
+        text: this.placeHolderStatus ? this.placeholder : "",
+        value: ""
+      });
+      this.optionList.forEach((p) => {
+        p.children && (l = p.children.find((h) => {
+          var u;
+          return ((u = this.convertKey(h)) == null ? void 0 : u.value) === this.value;
+        }) || l);
+      }), n = this.optionList.find((p) => {
+        const h = this.convertKey(p) || {};
+        return v(h.value) ? !1 : h.value.toString() === this.value.toString();
+      });
+      const a = l || n || o;
+      this.selectedValue = (i = this.convertKey(a)) == null ? void 0 : i.value, this.selectedText = (s = this.convertKey(a)) == null ? void 0 : s.text;
+    },
+    /**
+     * @return {void}
+     */
+    prepareOptions() {
+      if (this.autoComplete) {
+        this.createOptionsWithApi();
+        return;
+      }
+      this.optionList = this.filteredOptions;
+    },
+    /**
+     * @param {array|null} data
+     * @return {void}
+     */
+    async appendOptionWithApi(t = null) {
+      (t || await this.getResponseData()).forEach((e) => {
+        const i = this.convertKey(e);
+        this.optionList.find(
+          (s) => this.convertKey(s).value === i.value
+        ) || this.optionList.push({
+          text: i.text,
+          value: i.value,
+          disabled: e.disabled
+        });
+      });
+    },
+    /**
+     * @return {void}
+     */
+    async createOptionsWithApi() {
+      this.optionList = await this.getResponseData(), this.appendOptionWithApi(this.optionList.slice()), this.setValue(), this.selectItem(this.selectedValue, this.selectedText), this.addOptionManuelAddedOption();
+    },
+    /**
+     * @param {object} target
+     * @return {boolean}
+     */
+    isEndOfScroll(t) {
+      return t.offsetHeight + t.scrollTop === t.scrollHeight;
+    },
+    /**
+     * @param {string} value
+     * @return {string}
+     */
+    toLowerCase(t) {
+      return String(t).toLowerCase();
+    },
+    /**
+     * @param {string} text
+     * @return {string}
+     */
+    optionNames(t) {
+      return t ? `${m(t.toString())}` : "";
+    },
+    /**
+     * @return {void}
+     */
+    deleteSelectedOption() {
+      !this.placeHolderStatus || !this.canRemoveSelectedItem || (this.$emit("unSelect", this.selectedValue), this.$emit("select", ""), this.$emit("change", ""), this.selectedText = this.placeholder, this.selectedValue = "");
+    },
+    /**
+     * @param {string} value
+     * @return {void}
+     */
+    addNewOption(t) {
+      this.createdOption = {
+        [this.customOptionsKey[1] || "text"]: t,
+        [this.customOptionsKey[0] || "value"]: t
+      }, this.optionExists(this.convertKey(this.createdOption).value) || (this.autoComplete ? this.optionList.push(c(this.createdOption)) : this.options.push(c(this.createdOption)), this.$emit("addNewOption", { value: t, text: t }), this.selectItem(t, t));
+    },
+    /**
+     * @return {Promise<array>}
+     */
+    async getResponseData() {
+      try {
+        this.$emit("loadingDropDownOptions", !0);
+        const t = await fetch(this.url, {
+          headers: {
+            "X-Requested-With": "XMLHttpRequest"
+          }
+        });
+        if (!t.ok)
+          return [];
+        if (this.responseHasData) {
+          const { data: e } = await t.json();
+          return e;
+        }
+        return this.responseKey ? (await t.json())[this.responseKey] : await t.json();
+      } catch {
+        return [];
+      } finally {
+        this.$emit("loadingDropDownOptions", !1);
+      }
+    },
+    /**
+     * This block should run only mounted hook. We want to add options, if the option is not in fetchedData
+     * @return {void}
+     */
+    addOptionManuelAddedOption() {
+      this.createOptionStatus && !this.optionExists(this.value) && this.value !== "" && (this.optionList = this.optionList.concat({
+        [this.customOptionsKey[1] || "text"]: this.value,
+        [this.customOptionsKey[0] || "value"]: this.value
+      }), this.selectItem(this.value, this.value));
+    },
+    /**
+     * @param {string} value
+     * @return {boolean}
+     */
+    optionExists(t) {
+      return this.optionList.some((e) => e.children ? e.children.some((i) => this.convertKey(i).value === t) : this.convertKey(e).value === t);
+    },
+    /**
+     * @return {void}
+     */
+    setScrollEvent() {
+      setTimeout(() => {
+        this.$refs.dropDownList && (this.$refs.dropDownList.removeEventListener("scroll", this.scrollEvent), this.$refs.dropDownList.addEventListener("scroll", this.scrollEvent));
+      }, 5);
+    },
+    /**
+     * @param {object} target
+     * @return {void}
+     */
+    scrollEvent({ target: t }) {
+      this.autoComplete && this.isEndOfScroll(t) && (this.fetchPage++, this.appendOptionWithApi());
+    },
+    /**
+     * @param {object} option
+     * @param {number} index
+     * @return {void}
+     */
+    openChildOption(t, e) {
+      if (this.setActiveItem(e), t.children && t.children.length) {
+        this.childOptions = t.children, this.visibleChildOption = !0, this.calculateChildOptionPosition();
+        return;
+      }
+      this.visibleChildOption = !1;
+    },
+    /**
+     * @return {void}
+     */
+    closeChildOption() {
+      this.visibleChildOption = !1;
+    },
+    /**
+     * @param {array} arr
+     * @param {boolean} children
+     * @return {void}
+     */
+    increaseActiveItem(t, e = !1) {
+      if (!t.length)
+        return;
+      if (e)
+        this.activeChild = this.activeChild < t.length - 1 ? ++this.activeChild : 0;
+      else {
+        const n = this.isCategory ? t.length : this.optionLengthWithChildren;
+        this.activeItem = this.activeItem < n - 1 ? ++this.activeItem : 0;
+      }
+      const i = e ? this.activeChild : this.activeItem, s = this.$el.querySelector(`.in-dropdown-wrapper__item-list${e ? "-child" : ""}`), o = `.option__${i}${e ? "-child" : ""}`;
+      this.scrollDown(i, s, o);
+    },
+    /**
+     * @param {array} arr
+     * @param {boolean} children
+     * @return {void}
+     */
+    decreaseActiveItem(t, e = !1) {
+      if (!t.length)
+        return;
+      let i = 0;
+      e ? this.activeChild = this.activeChild === 0 ? t.length - 1 : --this.activeChild : (i = this.isCategory ? t.length : this.optionLengthWithChildren, this.activeItem = this.activeItem === 0 ? i - 1 : --this.activeItem);
+      const s = e ? this.activeChild : this.activeItem, o = this.$el.querySelector(`.in-dropdown-wrapper__item-list${e ? "-child" : ""}`), n = `.option__${s}${e ? "-child" : ""}`;
+      this.scrollUp(s, o, n, i);
+    },
+    /**
+     * @param {number} activeIndex
+     * @param {HTMLElement} list
+     * @param {string} selector
+     * @return {void}
+     */
+    scrollDown(t, e, i) {
+      const s = this.$el.querySelector(i).getBoundingClientRect().bottom, o = e.getBoundingClientRect().bottom, n = s - o;
+      if (t > 0) {
+        n > 0 && e.scrollBy(0, n);
+        return;
+      }
+      e.scrollTop = 0;
+    },
+    /**
+     * @param {number} activeIndex
+     * @param {HTMLElement} list
+     * @param {string} selector
+     * @param {number} optionsLength
+     * @return {void}
+     */
+    scrollUp(t, e, i, s) {
+      const o = this.$el.querySelector(i).getBoundingClientRect().top, n = e.getBoundingClientRect().top, l = e.scrollHeight, a = n - o;
+      if (t < s - 1) {
+        a > 0 && e.scrollBy(0, -a);
+        return;
+      }
+      e.scrollBy(0, l);
+    },
+    /**
+     * @return {void}
+     */
+    resetToInitialValues() {
+      this.activeItem = 0, this.activeChild = 0, this.statusList = !1, this.focusStatus = !1;
+    },
+    /**
+     * @return {void}
+     */
+    resetScroll() {
+      const t = this.$refs.dropDownList, e = this.$refs.categoryDropdown;
+      t && (t.scrollTop = 0), e && (e.scrollTop = 0);
+    },
+    /**
+     * @param {object} option
+     * @return {array}
+     */
+    createOptionClasses(t) {
+      const e = t.value === this.selectedValue, i = [
+        `option__${t.optionIndex}`,
+        `${this.id}-${this.optionNames(t.text)}`
+      ];
+      return e && i.push("in-dropdown-wrapper__item-list_selected"), t.disable && i.push("in-dropdown-wrapper__item-list_disabled"), this.activeItem === t.optionIndex && (i.push("option_active"), i.push(this.$style.option_active)), i;
+    },
+    /**
+     * @param {object} option
+     * @param {boolean} hovered
+     * @return {void}
+     */
+    openChildInCategory(t, e = !1) {
+      if (this.searchInFocus || !t)
+        return;
+      const i = !t.withoutChildren && t.children && t.children.length > 0;
+      if (!i && !e) {
+        this.$emit("select", t);
+        return;
+      }
+      this.activeChild = 0, this.visibleChildOption = i, this.childOptions = t.children;
+    },
+    /**
+     * @param {number} index
+     * @return {void}
+     */
+    setActiveChild(t) {
+      this.activeChild = t;
+    },
+    /**
+     * @param {number} index
+     * @return {void}
+     */
+    setActiveItem(t) {
+      this.activeItem = t;
+    },
+    /**
+     * @return {void}
+     */
+    selectChildOption() {
+      if (!this.activeOptionHasChild) {
+        this.select(this.activeOption), this.closeList();
+        return;
+      }
+      if (d(this.childOptions) && this.visibleCategoryList) {
+        const t = this.childOptions[this.activeChild];
+        this.$emit("select", t), t.emit || this.select(t), this.closeList();
+      }
+    },
+    /**
+     * @return {void}
+     */
+    focusOnSearch() {
+      this.searchInFocus = !0;
+    },
+    /**
+     * @return {void}
+     */
+    unfocusSearch() {
+      this.searchInFocus = !1;
+    },
+    /**
+     * @return {string}
+     */
+    calculateChildOptionPosition() {
+      const t = this.childOptionsLeftPosition || this.$refs.dropDownListWrapper.$el.clientWidth;
+      let e = 0;
+      this.$nextTick(() => {
+        const i = this.$refs.dropDownListWrapper.$el.offsetTop, s = this.$el.querySelector(".option_active").offsetTop, o = this.$refs.dropDownList.scrollTop, n = window.getComputedStyle(this.$refs.categoryDropdown.$el).paddingTop;
+        e = i + s - o - parseInt(n), this.childListPosition = `left: ${t}px; top: ${e}px;`;
+      });
+    }
+  }
+};
+var F = function() {
+  var t = this, e = t._self._c;
+  return e("div", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: t.closeList, expression: "closeList" }], staticClass: "in-dropdown-wrapper qa-drop-down", class: [
+    t.$style["in-dropdown-wrapper"],
+    {
+      [t.$style["in-dropdown-wrapper_invalid"]]: t.invalid,
+      "in-dropdown-wrapper_invalid": t.invalid,
+      [t.$style["in-dropdown-wrapper_warning"]]: t.isWarning,
+      "in-dropdown-wrapper_warning": t.isWarning,
+      "no-hover-effect": t.buttonType === "dropdown",
+      [t.$style["in-dropdown-wrapper__text-type"]]: t.buttonType === "text",
+      "in-dropdown-wrapper__text-type": t.buttonType === "text"
+    }
+  ], on: { mouseleave: function(i) {
+    return t.$emit("mouseleave");
+  }, mouseover: function(i) {
+    return t.$emit("mouseover");
+  } } }, [!t.skeletonStatus && t.visibleLabel ? e("label", { staticClass: "in-dropdown-wrapper__label mb-2 d-b", class: [
+    t.$style["in-dropdown-wrapper__label"],
+    {
+      [t.$style["in-dropdown-wrapper__label_disable"]]: t.disable,
+      "in-dropdown-wrapper__label_disable": t.disable
+    }
+  ], on: { click: t.closeList } }, [t._v(" " + t._s(t.label) + " "), t.labelTooltip ? e("in-tooltip", { staticClass: "in-dropdown-wrapper__label__tooltip t-2", class: t.$style["in-dropdown-wrapper__label__tooltip"], attrs: { text: t.labelTooltip, align: "center", "with-icon": !1 } }, [e("in-icons", { staticClass: "i-c-3", attrs: { slot: "element", name: "line-tooltip", size: "24" }, slot: "element" })], 1) : t._e()], 1) : t._e(), t.skeletonStatus ? t._e() : e("in-button-v2", { ref: "dropdownButton", staticClass: "dropdown-button w-1 d-f", class: [
+    {
+      "bor-c-7": t.statusList && !t.isBlackTheme,
+      placeholder: t.activePlaceholder,
+      "in-dropdown-button-opened": t.statusList,
+      "in-dropdown-button": t.buttonType === "dropdown",
+      "in-dropdown-button_white": t.buttonType === "dropdown" && t.theme === "white",
+      "in-dropdown-button_grey": t.buttonType === "dropdown" && t.theme === "grey",
+      "in-dropdown-button_black": t.buttonType === "dropdown" && t.theme === "black"
+    }
+  ], attrs: { id: t.id, styling: t.buttonStyling.styling, type: t.buttonStyling.type, "icon-click": t.placeHolderStatus && t.canRemoveSelectedItem, "icon-size": t.iconSize, "label-text": t.selectedText, "disabled-status": t.disable, "right-icon": t.icon, size: t.buttonSize }, on: { clickIcon: t.deleteSelectedOption, click: t.openList } }), (t.invalid || t.isWarning) && !t.skeletonStatus ? e("p", { class: [
+    "m-0 mt-1",
+    t.messageClass,
+    t.isWarning ? t.$style["in-dropdown-wrapper__warning-message"] : t.$style["in-dropdown-wrapper__error-message"]
+  ] }, [t._v(" " + t._s(t.message) + " ")]) : t._e(), !t.skeletonStatus && !t.isCategory ? e("in-box", { directives: [{ name: "show", rawName: "v-show", value: t.statusList, expression: "statusList" }], ref: "dropDownListWrapper", staticClass: "qa-dropdown-list-wrapper w-1", class: [
+    "mt-1",
+    "in-dropdown-wrapper__item-list-wrapper",
+    t.$style["in-dropdown-wrapper__item-list-wrapper"],
+    `in-dropdown-wrapper__item-list-wrapper_${t.optionListPosition}`,
+    t.$style[`in-dropdown-wrapper__item-list-wrapper_${t.optionListPosition}`],
+    {
+      "in-dropdown-wrapper__item-list-wrapper_top_hidden-label": !t.visibleLabel,
+      "in-dropdown-wrapper__item-list-black": t.isBlackTheme,
+      [t.$style["in-dropdown-wrapper__black-item-list"]]: t.isBlackTheme,
+      "in-dropdown-wrapper__item-list-wrapper-tag-status": t.isCreateButtonVisible
+    }
+  ], attrs: { border: "bor-w-0 bor-s-n", tabindex: "0" }, nativeOn: { keyup: [function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "down", 40, i.key, ["Down", "ArrowDown"]) ? null : t.increaseActiveItem(t.mappedOptionList);
+  }, function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "up", 38, i.key, ["Up", "ArrowUp"]) ? null : t.decreaseActiveItem(t.mappedOptionList);
+  }, function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : t.select(t.activeOption);
+  }] } }, [t.searchStatus && (t.options.length !== 0 || t.autoComplete) ? e("in-text-input", { staticClass: "mx-2 mb-2", attrs: { id: `${t.id}-search`, name: "drop-down-search", "icon-name": "line-menu-search", "icon-position": "right", placeholder: "Search", value: t.search, "with-icon": !0, "with-label": !1, "auto-focus": t.focusStatus }, on: { focus: t.focusOnSearch, blur: t.unfocusSearch, keyup: t.searchOption } }) : t._e(), t.emptyOptions ? e("div", { staticClass: "d-f f-d-c a-i-c mt-4" }, [e("in-icons", { staticClass: "i-c-2", attrs: { name: t.emptyOptionsIcon, size: "40" } }), e("p", { staticClass: "in-dropdown-wrapper__no-search-result t-c-2 cur-t", class: t.$style["in-dropdown-wrapper__no-search-result"] }, [t._v(" " + t._s(t.emptyOptionsText) + " ")])], 1) : t._e(), t.isCreateButtonVisible ? e("div", { staticClass: "create-new-option clearfix cur-p d-f px-3 py-2 o-h p-a b-0 bor-t-w-1 bor-t-s-s bor-c-6 w-1 o-h", class: t.$style["create-new-option"], on: { click: function(i) {
+    return t.addNewOption(t.searchTrim);
+  } } }, [e("in-icons", { staticClass: "fl-l i-c-7 min-w-4-s", attrs: { name: "line-plus-netural" } }), e("span", { staticClass: "ml-1 fl-l t-c-7 l-h-2 o-h w-s-n-w t-o-e" }, [t._v(" Create: " + t._s(t.searchTrim) + " ")])], 1) : t._e(), e("div", { ref: "dropDownList", staticClass: "in-dropdown-wrapper__item-list", class: [
+    t.$style["in-dropdown-wrapper__item-list"],
+    {
+      "in-dropdown-wrapper__black-item-list": t.isBlackTheme,
+      [t.$style["in-dropdown-wrapper__black-item-list"]]: t.isBlackTheme
+    }
+  ] }, t._l(t.mappedOptionList, function(i, s) {
+    return e("div", { key: s }, [i.children ? e("div", [e("p", { staticClass: "in-dropdown-wrapper__item-list-title f-s-1 l-h-1 m-0 t-t-u l-s-5 p-e-n", class: t.$style["in-dropdown-wrapper__item-list-title"] }, [t._v(" " + t._s(i.text) + " ")]), t._l(i.children, function(o, n) {
+      return e("a", { key: n, class: t.createOptionClasses(o), on: { click: function(l) {
+        return t.select(o);
+      } } }, [t._v(" " + t._s(o.text) + " ")]);
+    })], 2) : t._e(), i.children ? t._e() : e("a", { class: t.createOptionClasses(i), on: { click: function(o) {
+      return t.select(i);
+    } } }, [t._v(" " + t._s(i.text) + " ")])]);
+  }), 0)], 1) : t._e(), !t.skeletonStatus && t.isCategory ? e("in-box", { directives: [{ name: "show", rawName: "v-show", value: t.statusList, expression: "statusList" }], ref: "dropDownListWrapper", staticClass: "qa-dropdown-list-wrapper-category w-1", class: [
+    "mt-1",
+    "in-dropdown-wrapper__item-list-wrapper",
+    t.$style["in-dropdown-wrapper__item-list-wrapper"],
+    `in-dropdown-wrapper__item-list-wrapper_${t.optionListPosition}`,
+    t.$style[`in-dropdown-wrapper__item-list-wrapper_${t.optionListPosition}`],
+    {
+      "in-dropdown-wrapper__item-list-wrapper_top_hidden-label": !t.visibleLabel
+    }
+  ], attrs: { tabindex: "0", border: "bor-w-0 bor-s-n" }, nativeOn: { keyup: [function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "down", 40, i.key, ["Down", "ArrowDown"]) ? null : t.increaseActiveItem(t.categoryOptions, t.visibleChildOption);
+  }, function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "up", 38, i.key, ["Up", "ArrowUp"]) ? null : t.decreaseActiveItem(t.categoryOptions, t.visibleChildOption);
+  }, function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "right", 39, i.key, ["Right", "ArrowRight"]) || "button" in i && i.button !== 2 ? null : t.openChildInCategory(t.cloneOptions[t.activeItem]);
+  }, function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "left", 37, i.key, ["Left", "ArrowLeft"]) || "button" in i && i.button !== 0 ? null : t.closeChildOption.apply(null, arguments);
+  }, function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : t.selectChildOption.apply(null, arguments);
+  }] } }, [t.searchStatus ? e("in-text-input", { staticClass: "mx-2 mb-2", attrs: { id: `${t.id}-search`, name: "drop-down-search", placeholder: "Search", "icon-name": "line-menu-search", "icon-position": "right", value: t.search, "with-icon": !0, "with-label": !1 }, on: { focus: t.focusOnSearch, blur: t.unfocusSearch, keyup: t.searchOption } }) : t._e(), e("div", { ref: "dropDownList", staticClass: "in-dropdown-wrapper__item-list", class: t.$style["in-dropdown-wrapper__item-list"] }, t._l(t.cloneOptions, function(i, s) {
+    return e("div", { key: s, staticClass: "option option_category-dropdown f-s-2 l-h-2 m-0", class: [
+      `option__${s}`,
+      { option_active: t.activeItem === s },
+      ...t.createOptionClasses(i)
+    ], on: { mouseover: function(o) {
+      return t.openChildOption(i, s);
+    }, click: function(o) {
+      return t.select(i);
+    } } }, [e("span", { staticClass: "f-s-2 l-h-2 m-0" }, [t._v(" " + t._s(i.text) + " ")]), i.children && i.children.length ? e("in-icons", { staticClass: "fl-r mt-1", attrs: { name: "line-chevron-right", size: "18" } }) : t._e()], 1);
+  }), 0)], 1) : t._e(), t.visibleChildOption ? e("in-box", { key: t.childMenuRenderCounter, ref: "categoryDropdown", staticClass: "in-dropdown-wrapper__item-list-wrapper in-dropdown-wrapper__item-list-child p-a max-h-21-s w-22-s o-y-s", class: [
+    t.$style["in-dropdown-wrapper__item-list-wrapper"],
+    t.$style["in-dropdown-wrapper__item-list-child"]
+  ], style: t.childListPosition, attrs: { border: "bor-w-0 bor-s-n" } }, t._l(t.childOptions, function(i, s) {
+    return e("p", { key: s, staticClass: "option option_category-dropdown f-s-2 l-h-2 m-0", class: [
+      { "option_active-child": t.selectedValue === i.value },
+      { option_active: t.activeChild === s },
+      `option__${s}-child`,
+      ...t.createOptionClasses(i)
+    ], on: { mouseenter: function(o) {
+      return t.setActiveChild(s);
+    }, click: t.selectChildOption } }, [t._v(" " + t._s(i.text) + " ")]);
+  }), 0) : t._e(), t.skeletonStatus ? e("in-skeleton", { attrs: { sizing: t.skeletonSizing, name: "InDropDown" } }) : t._e()], 1);
+}, z = [];
+const _ = {
+  $style: E
+};
+function j(t) {
+  for (var e in _)
+    this[e] = _[e];
+}
+var U = /* @__PURE__ */ $(
+  q,
+  F,
+  z,
+  !1,
+  j
+);
+const ot = U.exports;
+export {
+  ot as InDropDown
+};