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

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

@@ -1,1098 +0,0 @@
-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
-};