@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.4 → 8.7.4

package/dist/main.es31.js

@@ -1,801 +0,0 @@
-import "./main.es3.js";
-import styled from "./main.es7.js";
-import InfoText from "./main.es23.js";
-import _sfc_main$1 from "./main.es20.js";
-import InputText from "./main.es273.js";
-import DraggableInputHandle from "./main.es274.js";
-import { debounce } from "./main.es275.js";
-import _export_sfc from "./main.es10.js";
-import { Teleport, resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, renderSlot, withDirectives } from "./main.es6.js";
-import { withModifiers, vShow } from "./main.es5.js";
-import { toDisplayString } from "./main.es24.js";
-const CARET_WIDTH = "30px";
-const BORDER_WIDTH = "1px";
-const Caret = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${CARET_WIDTH};
-    min-width: ${CARET_WIDTH};
-    height: 100%;
-    align-items: center;
-    cursor: pointer;
-    margin-left: auto;
-  `;
-const selectorProps = {
-  selectWidth: String,
-  paddingLeft: String,
-  showBorder: Boolean
-};
-const Selector = styled("div", selectorProps)`
-    ${(props) => props.selectWidth === "100%" ? "width: 100%;" : `width: calc(${props.selectWidth} -
-      (
-        ${CARET_WIDTH} +
-        ${props.paddingLeft}
-        ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ""}
-      )
-    );
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;`}
-  `;
-const labelAttrs = {
-  fontSize: String,
-  fontColor: String
-};
-const InputLabel = styled("div", labelAttrs)`
-    color: ${(props) => props.theme.colors[props.fontColor] ? props.theme.colors[props.fontColor] : props.fontColor};
-    font-size: ${(props) => props.fontSize};
-    font-weight: 700;
-  `;
-const OptionalLabel = styled.span`
-    font-weight: 300;
-  `;
-const inputProps = {
-  selectWidth: String,
-  optionWidth: String,
-  noRelative: Boolean
-};
-const Container = styled("div", inputProps)`
-    width: ${(props) => props.selectWidth};
-    position: ${(props) => props.noRelative ? "static" : "relative"};
-    display: inline-block;
-  `;
-const LabelWrapperAttrs = {
-  infoTextMessage: Boolean
-};
-const LabelWrapper = styled("div", LabelWrapperAttrs)`
-    display: inline-grid;
-    grid-template-columns: ${(props) => props.infoTextMessage ? "auto auto" : "auto"};
-    grid-gap: 12px;
-    align-items: center;
-    justify-content: start;
-  `;
-const SelectButtonWrapperAttrs = {
-  disabled: Boolean
-};
-const SelectButtonWrapper = styled("div", SelectButtonWrapperAttrs)`
-    ${(props) => props.disabled ? "cursor: not-allowed" : "cursor: pointer"};
-  `;
-const selectButtonAttrs = {
-  bgColor: String,
-  fontColor: String,
-  hasError: Boolean,
-  disabled: Boolean,
-  selectHeight: String,
-  selectWidth: String,
-  height: String,
-  selectMinHeight: String,
-  hasNoPadding: Boolean,
-  showBorder: Boolean,
-  paddingLeft: String,
-  noRelative: Boolean,
-  tablePaddingLeft: String,
-  showDisabledBackground: Boolean
-};
-const SelectButton = styled("div", selectButtonAttrs)`
-    position: ${(props) => props.noRelative ? "static" : "relative"};
-    box-sizing: border-box;
-    border-radius: 4px;
-    max-width: ${(props) => props.selectWidth ? props.selectWidth : "100%"};
-    ${(props) => props.isSearchBarVisible ? "" : `padding-left: ${props.hasNoPadding ? "0" : props.tablePaddingLeft ? props.tablePaddingLeft : props.paddingLeft}`};
-    text-align: left;
-    min-height: ${(props) => props.selectHeight ? props.selectHeight : props.selectMinHeight ? props.selectMinHeight : props.height ? props.height : "36px"};
-    display: flex;
-    align-items: center;
-    height: ${(props) => props.selectHeight};
-    ${({
-  showBorder,
-  theme,
-  hasError
-}) => showBorder && `
-    border: ${BORDER_WIDTH} solid ${hasError ? theme.colors.red : theme.colors.grey4}
-  `}
-    background-color:${(props) => props.disabled && props.showDisabledBackground ? props.theme.colors.grey5 : props.theme.colors[props.bgColor] ? props.theme.colors[props.bgColor] : props.bgColor};
-    color: ${(props) => props.theme.colors[props.fontColor] ? props.theme.colors[props.fontColor] : props.fontColor};
-    ${(props) => props.disabled ? "pointer-events: none" : ""};
-    overflow: hidden;
-    & > .handle {
-      border-right: ${(props) => props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
-        1px solid;
-    }
-  `;
-const selectDropdownAttrs = {
-  hoveredBgColor: String,
-  bgColor: String,
-  fontColor: String,
-  optionWidth: String,
-  hoveredIndex: Number,
-  fontSize: String,
-  dropdownPosition: Object,
-  hoveredValue: Number | String,
-  selectedValue: Number | String,
-  noRelative: Boolean,
-  minWidth: String
-};
-const SelectDropdown = styled("div", selectDropdownAttrs)`
-    box-sizing: border-box;
-    z-index: ${(props) => props.isActive ? "2" : "99999"};
-    position: absolute;
-    top: ${(props) => {
-  var _a;
-  return props.noRelative ? "auto" : ((_a = props.dropdownPosition) == null ? void 0 : _a.top) + "px";
-}};
-    left: ${(props) => {
-  var _a;
-  return (_a = props.dropdownPosition) == null ? void 0 : _a.left;
-}}px;
-    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0px;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    width: ${(props) => props.optionWidth ? props.optionWidth : "100%"};
-    min-width: ${(props) => props.minWidth ? props.minWidth : props.optionWidth ? props.optionWidth : "100%"};
-    background-color: ${(props) => props.theme.colors[props.bgColor] ? props.theme.colors[props.bgColor] : props.bgColor};
-    color: ${(props) => props.theme.colors[props.fontColor] ? props.theme.colors[props.fontColor] : props.fontColor};
-    max-height: 300px;
-    overflow-y: auto;
-    & > div[data-value='${(props) => props.hoveredValue}'] {
-      background-color: ${(props) => props.theme.colors[props.hoveredBgColor] ? props.theme.colors[props.hoveredBgColor] : props.hoveredBgColor};
-    }
-    font-size: ${(props) => props.fontSize};
-  `;
-SelectDropdown.emits = ["option-hovered", "option-selected"];
-const DropdownAttrs = {
-  noRelative: Boolean
-};
-const DropdownWrapper = styled("div", DropdownAttrs)`
-    position: ${(props) => props.noRelative ? "static" : "relative"};
-  `;
-const inputAttrs = {
-  alignItems: String,
-  hasLabel: Boolean,
-  noRelative: Boolean
-};
-const InputWrapper = styled("div", inputAttrs)`
-    position: ${(props) => props.noRelative ? "static" : "relative"};
-    display: grid;
-    width: 100%;
-    min-width: ${(props) => props.minWidth ? props.minWidth : "150px"};
-    align-items: center;
-    gap: 8px;
-    grid-template-columns: ${(props) => props.alignItems === "vertical" || !props.hasLabel ? "1fr" : "auto 1fr"};
-  `;
-const DROPDOWN_HEIGHT_OFFSET = 4;
-const DROPDOWN_TOP_OFFSET = 21;
-const MIN_OPTION_LENGTH = 5;
-const DROPDOWN_MENU_POSITIONS = {
-  Automatic: "automatic",
-  Bottom: "bottom"
-};
-const _sfc_main = {
-  name: "RCselect",
-  components: {
-    SelectButton,
-    SelectButtonWrapper,
-    SelectDropdown,
-    Container,
-    InputLabel,
-    LabelWrapper,
-    OptionalLabel,
-    InfoText,
-    InputWrapper,
-    DropdownWrapper,
-    Icon: _sfc_main$1,
-    Caret,
-    Selector,
-    InputText,
-    Teleport,
-    DraggableInputHandle
-  },
-  props: {
-    value: {
-      required: false,
-      default: null
-    },
-    fontSize: {
-      required: false,
-      default: "13px"
-    },
-    noRelative: {
-      required: false,
-      default: false
-    },
-    label: {
-      required: false
-    },
-    labelOptional: {
-      required: false,
-      default: false
-    },
-    labelDataId: {
-      required: false,
-      default: ""
-    },
-    infoTextMessage: {
-      required: false
-    },
-    selectWidth: {
-      type: String,
-      required: false,
-      default: "100%"
-    },
-    minWidth: {
-      required: false
-    },
-    maxWidth: {
-      required: false
-    },
-    selectHeight: {
-      type: String,
-      required: false,
-      default: null
-    },
-    height: {
-      required: false,
-      default: null
-    },
-    selectMinHeight: {
-      required: false,
-      default: "36px"
-    },
-    optionWidth: {
-      required: false,
-      default: null
-    },
-    hoverDropdown: {
-      required: false,
-      default: false
-    },
-    dropdownAutoClose: {
-      required: false,
-      default: false
-    },
-    alignItems: {
-      required: false,
-      default: "horizontal"
-    },
-    buttonBgColor: {
-      required: false
-    },
-    buttonFontColor: {
-      required: false
-    },
-    dropdownBgColor: {
-      required: false,
-      default: "grey5"
-    },
-    dropdownFontColor: {
-      required: false
-    },
-    dropDownArrowVisible: {
-      required: false,
-      default: true
-    },
-    caretColor: {
-      required: false
-    },
-    labelFontColor: {
-      required: false
-    },
-    colorMode: {
-      required: false,
-      default: "light"
-    },
-    isSearchable: {
-      required: false,
-      default: true
-    },
-    hasError: {
-      required: false,
-      default: false
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    isAutoSearch: {
-      required: false,
-      default: true
-    },
-    showBorder: {
-      required: false,
-      default: true
-    },
-    infoTextSize: {
-      required: false,
-      default: "14px"
-    },
-    dataId: {
-      type: String,
-      default: ""
-    },
-    dataQaId: {
-      type: String,
-      default: ""
-    },
-    hasSelectButtonPadding: {
-      required: false,
-      type: Boolean,
-      default: true
-    },
-    isDraggable: {
-      type: Boolean,
-      default: false
-    },
-    leftPadding: {
-      type: String,
-      default: "15px"
-    },
-    tablePaddingLeft: {
-      required: false
-    },
-    showDisabledBackground: {
-      required: false,
-      default: true
-    },
-    minOptionLength: {
-      type: Number,
-      default: MIN_OPTION_LENGTH
-    },
-    dropdownMenuPosition: {
-      type: String,
-      default: DROPDOWN_MENU_POSITIONS.Automatic
-      // options: ['automatic', bottom]
-    },
-    infoTextWidth: {
-      type: String,
-      required: false
-    },
-    infoTextAlignArrow: {
-      type: String,
-      required: false
-    }
-  },
-  data() {
-    return {
-      selectedValue: null,
-      paddingLeft: this.isDraggable ? "30px" : this.leftPadding,
-      isDropdownOpen: false,
-      isActive: false,
-      textSearch: "",
-      hoveredIndex: 0,
-      isClickOutsideActive: false,
-      dropdownPosition: {
-        left: null,
-        top: null
-      },
-      dropdownWidth: null,
-      hoveredValue: null
-    };
-  },
-  computed: {
-    optionLength() {
-      if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$el.childElementCount > 1 ? this.$refs.dropdown.$el.childElementCount : this.$refs.dropdown.$el.children[0] ? this.$refs.dropdown.$el.children[0].childElementCount : 0;
-      }
-      return 0;
-    },
-    isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= this.minOptionLength && this.isDropdownOpen;
-    },
-    computedWidth() {
-      function removePX(item) {
-        return Number(item.replace("px", ""));
-      }
-      return this.selectWidth === "100%" ? "100%" : removePX(this.selectWidth) - removePX(CARET_WIDTH) + "px";
-    },
-    getOptionWidth() {
-      if (this.optionWidth)
-        return this.optionWidth;
-      return this.dropdownWidth;
-    },
-    isSelectDropdownShown() {
-      return this.isDropdownOpen && this.dropdownPosition.left !== null && (!this.isSearchable || this.isSearchable);
-    },
-    isMobileDevice() {
-      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
-      const touchCapable = "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-      return /Android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent) || /Macintosh/.test(userAgent) && touchCapable || /windows phone/i.test(userAgent);
-    }
-  },
-  watch: {
-    value(val) {
-      this.selectedValue = val;
-    },
-    async isDropdownOpen(val) {
-      if (val) {
-        this.$emit("on-dropdown-open");
-        setTimeout(() => {
-          this.isClickOutsideActive = true;
-        }, 10);
-        await this.$nextTick();
-        this.handleSetDropdownOffet();
-      } else {
-        this.dropdownPosition.left = null;
-        setTimeout(() => {
-          this.isClickOutsideActive = false;
-        }, 10);
-      }
-      if (val && this.isSearchable) {
-        this.$nextTick(() => {
-          if (this.$refs.searchInput && !this.isMobileDevice) {
-            this.$refs.searchInput.$el.querySelector("input").focus();
-          }
-        });
-      }
-    }
-  },
-  mounted() {
-    this.observeDropdownHeight();
-    this.observeSelectWidth();
-    window.addEventListener("resize", this.handleSetDropdownOffet);
-  },
-  beforeMount() {
-    this.selectedValue = this.value;
-    document.addEventListener("click", this.clickOutside);
-    this.getDropdownPosition();
-    window.removeEventListener("resize", this.handleSetDropdownOffet);
-    if (this.dropdownResizeObserver)
-      this.dropdownResizeObserver.disconnect();
-    if (this.selectResizeObserver)
-      this.selectResizeObserver.disconnect();
-  },
-  unmounted() {
-    document.removeEventListener("click", this.clickOutside);
-  },
-  methods: {
-    focus() {
-      this.isActive = true;
-    },
-    blur(e) {
-      this.isActive = false;
-      this.$emit("blur", e);
-    },
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen;
-    },
-    toggleCaretDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen;
-    },
-    closeDropdown() {
-      this.blur();
-      this.clearSearch();
-      this.isDropdownOpen = false;
-    },
-    clearSearch() {
-      this.textSearch = "";
-      this.searchChange("");
-    },
-    optionSelected(e) {
-      this.selectedValue = e;
-      this.closeDropdown();
-      this.blur();
-      this.$emit("input-change", e);
-    },
-    optionHovered: debounce(function(e) {
-      this.hoveredValue = e;
-    }, 300),
-    mouseEnterHandler() {
-      if (this.hoverDropdown) {
-        this.focus();
-        this.isDropdownOpen = true;
-      }
-    },
-    mouseLeaveHandler() {
-      if (this.hoverDropdown) {
-        this.blur();
-      }
-    },
-    optionLeave() {
-      if (this.dropdownAutoClose) {
-        this.isDropdownOpen = false;
-      }
-    },
-    searchChange(value) {
-      this.textSearch = value;
-      this.$emit("search-change", value);
-      const dropdownChildren = [...this.$refs.dropdown.$el.children];
-      dropdownChildren.forEach((el) => {
-        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-          el.style.display = "none";
-          return;
-        }
-        el.style.display = "inherit";
-      });
-    },
-    clickOutside(event) {
-      const dropdownRef = this.$refs.dropdown;
-      if (!this.isClickOutsideActive)
-        return;
-      if (this.$refs.select.$el == event.target || this.$refs.select.$el.contains(event.target) || event.target.id === "more-button" || event.target.parentNode === dropdownRef.$el) {
-        return;
-      } else {
-        this.closeDropdown();
-      }
-    },
-    onKeyDown(e) {
-      if (e.key == "ArrowDown") {
-        this.onArrowPress(1);
-      } else if (e.key == "ArrowUp") {
-        this.onArrowPress(-1);
-      } else if (e.key == "Enter") {
-        const optionHoveredComponent = [...this.$refs.dropdown.$el.children][(this.hoveredIndex - 1 + this.optionLength) % this.optionLength];
-        this.optionSelected(optionHoveredComponent.$el.dataset.value);
-      }
-    },
-    // If some part of the dropdown menu is outside viewport of the bottom of the screen,
-    // we need to offset it and display it at the top of the select dropdown instead
-    async getDropdownPosition() {
-      if (!this.$refs.dropdownWrapperRef || !this.$refs.select || !this.$refs.dropdown) {
-        return;
-      }
-      await this.$nextTick();
-      const isDisplayedAtBottom = await this.generateDropdownPosition();
-      await this.$nextTick();
-      if (isDisplayedAtBottom)
-        this.generateDropdownPosition();
-    },
-    async generateDropdownPosition() {
-      const isDropdownNotCompletelyVisible = await this.isBottomOfDropdownOutOfViewport();
-      const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el;
-      const selectButtonHeight = this.$refs.select.$el.clientHeight;
-      const dropdownHeight = this.$refs.dropdown.$el.clientHeight;
-      const dropdownWrapperRelativeHeight = dropdownWrapperEl.getBoundingClientRect().top + window.scrollY + DROPDOWN_HEIGHT_OFFSET;
-      const top = isDropdownNotCompletelyVisible || !isDropdownNotCompletelyVisible && this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom ? dropdownWrapperRelativeHeight : dropdownWrapperRelativeHeight - dropdownHeight - selectButtonHeight - DROPDOWN_TOP_OFFSET;
-      const left = this.dropdownPosition.left ? this.dropdownPosition.left : dropdownWrapperEl.getBoundingClientRect().left + window.scrollX;
-      this.dropdownPosition = {
-        left: Math.floor(left),
-        top: Math.floor(top)
-      };
-      return isDropdownNotCompletelyVisible;
-    },
-    async isBottomOfDropdownOutOfViewport() {
-      if (!this.$refs.dropdown || this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom) {
-        return false;
-      }
-      await this.$nextTick();
-      const rect = this.$refs.dropdown.$el.getBoundingClientRect();
-      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
-      if (windowHeight <= 650)
-        return true;
-      return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight;
-    },
-    observeDropdownHeight() {
-      if (!this.$refs.dropdown)
-        return;
-      this.dropdownResizeObserver = new ResizeObserver(() => {
-        this.$nextTick(() => this.getDropdownPosition());
-      });
-      this.dropdownResizeObserver.observe(this.$refs.dropdown.$el);
-    },
-    handleSetDropdownOffet() {
-      if (!this.$refs.select)
-        return;
-      this.dropdownPosition.left = Math.floor(this.$refs.select.$el.getBoundingClientRect().left);
-      this.getDropdownWidth();
-    },
-    observeSelectWidth() {
-      if (!this.$refs.select)
-        return;
-      this.selectResizeObserver = new ResizeObserver(() => (
-        // eslint-disable-next-line vue/valid-next-tick
-        this.$nextTick(() => this.getDropdownWidth())
-      ));
-      this.selectResizeObserver.observe(this.$refs.dropdown.$el);
-    },
-    async getDropdownWidth() {
-      if (!this.$refs.select)
-        return;
-      await this.$nextTick();
-      this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`;
-    },
-    onArrowPress(dir) {
-      let newHoveredElem;
-      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
-      if (currentHoveredElem) {
-        if (dir > 0) {
-          newHoveredElem = currentHoveredElem.nextElementSibling;
-        } else {
-          newHoveredElem = currentHoveredElem.previousElementSibling;
-        }
-        if (newHoveredElem) {
-          this.hoveredValue = newHoveredElem.getAttribute("data-value");
-          const topPos = newHoveredElem.offsetTop;
-          this.$refs.dropdown.$el.scrollTop = topPos;
-        }
-      }
-    }
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OptionalLabel = resolveComponent("OptionalLabel");
-  const _component_InputLabel = resolveComponent("InputLabel");
-  const _component_InfoText = resolveComponent("InfoText");
-  const _component_LabelWrapper = resolveComponent("LabelWrapper");
-  const _component_DraggableInputHandle = resolveComponent("DraggableInputHandle");
-  const _component_InputText = resolveComponent("InputText");
-  const _component_Selector = resolveComponent("Selector");
-  const _component_Icon = resolveComponent("Icon");
-  const _component_Caret = resolveComponent("Caret");
-  const _component_SelectButton = resolveComponent("SelectButton");
-  const _component_SelectDropdown = resolveComponent("SelectDropdown");
-  const _component_DropdownWrapper = resolveComponent("DropdownWrapper");
-  const _component_SelectButtonWrapper = resolveComponent("SelectButtonWrapper");
-  const _component_InputWrapper = resolveComponent("InputWrapper");
-  const _component_Container = resolveComponent("Container");
-  return openBlock(), createBlock(_component_Container, {
-    "no-relative": $props.noRelative,
-    "select-width": $props.selectWidth,
-    onMouseenter: $options.mouseEnterHandler,
-    onMouseleave: $options.mouseLeaveHandler
-  }, {
-    default: withCtx(() => [createVNode(_component_InputWrapper, {
-      "align-items": $props.alignItems,
-      "has-label": !!$props.label && $props.label.length > 0,
-      "no-relative": $props.noRelative
-    }, {
-      default: withCtx(() => [$props.label ? (openBlock(), createBlock(_component_LabelWrapper, {
-        key: 0,
-        "data-id": $props.labelDataId,
-        "data-qa-id": $props.dataQaId,
-        "info-text-message": !!$props.infoTextMessage || !!_ctx.$slots.infoText
-      }, {
-        default: withCtx(() => [createVNode(_component_InputLabel, {
-          "font-color": $props.labelFontColor || $props.colorMode == "dark" ? "white" : "eturnityGrey",
-          "font-size": $props.fontSize
-        }, {
-          default: withCtx(() => [createTextVNode(toDisplayString($props.label) + " ", 1), $props.labelOptional ? (openBlock(), createBlock(_component_OptionalLabel, {
-            key: 0
-          }, {
-            default: withCtx(() => [createTextVNode("\n            (" + toDisplayString(_ctx.$gettext("Optional")) + ")", 1)]),
-            _: 1
-          })) : createCommentVNode("", true)]),
-          _: 1
-        }, 8, ["font-color", "font-size"]), createTextVNode(), $props.infoTextMessage || !!_ctx.$slots.infoText ? (openBlock(), createBlock(_component_InfoText, {
-          key: 0,
-          "align-arrow": $props.infoTextAlignArrow,
-          "max-width": $props.infoTextWidth,
-          size: $props.infoTextSize,
-          text: $props.infoTextMessage,
-          width: $props.infoTextWidth
-        }, {
-          default: withCtx(() => [renderSlot(_ctx.$slots, "infoText")]),
-          _: 3
-        }, 8, ["align-arrow", "max-width", "size", "text", "width"])) : createCommentVNode("", true)]),
-        _: 3
-      }, 8, ["data-id", "data-qa-id", "info-text-message"])) : createCommentVNode("", true), createTextVNode(), createVNode(_component_SelectButtonWrapper, {
-        disabled: $props.disabled
-      }, {
-        default: withCtx(() => [createVNode(_component_SelectButton, {
-          ref: "select",
-          "bg-color": $props.buttonBgColor || $props.colorMode == "dark" ? "transparentBlack1" : "white",
-          class: "select-button",
-          "data-id": $props.dataId,
-          "data-qa-id": $props.dataQaId,
-          disabled: $props.disabled,
-          "font-color": $props.buttonFontColor || $props.colorMode == "dark" ? "white" : "black",
-          "font-size": $props.fontSize,
-          "has-error": $props.hasError,
-          "has-no-padding": $options.isSearchBarVisible || !$props.hasSelectButtonPadding,
-          height: $props.height,
-          "no-relative": $props.noRelative,
-          "padding-left": $data.paddingLeft,
-          "select-height": $props.selectHeight,
-          "select-min-height": $props.selectMinHeight,
-          "select-width": $props.selectWidth,
-          "show-border": $props.showBorder,
-          "show-disabled-background": $props.showDisabledBackground,
-          "table-padding-left": $props.tablePaddingLeft,
-          onClick: $options.toggleDropdown,
-          onKeydown: $options.onKeyDown
-        }, {
-          default: withCtx(() => [$props.isDraggable && !$options.isSearchBarVisible ? (openBlock(), createBlock(_component_DraggableInputHandle, {
-            key: 0,
-            height: $props.selectHeight
-          }, null, 8, ["height"])) : createCommentVNode("", true), createTextVNode(), $options.isSearchBarVisible ? (openBlock(), createBlock(_component_InputText, {
-            key: 1,
-            ref: "searchInput",
-            "background-color": "transparent",
-            "font-color": $props.buttonFontColor || $props.colorMode == "dark" ? "white" : "black",
-            "font-size": $props.fontSize,
-            "input-height": "34px",
-            "input-width": $options.computedWidth,
-            "no-border": true,
-            tabindex: "0",
-            value: $data.textSearch,
-            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-            }, ["stop"])),
-            onInputChange: $options.searchChange,
-            onKeydown: withModifiers($options.onKeyDown, ["stop"])
-          }, null, 8, ["font-color", "font-size", "input-width", "value", "onInputChange", "onKeydown"])) : (openBlock(), createBlock(_component_Selector, {
-            key: 2,
-            "padding-left": $data.paddingLeft,
-            "select-width": $props.selectWidth,
-            "show-border": $props.showBorder
-          }, {
-            default: withCtx(() => [renderSlot(_ctx.$slots, "selector", {
-              selectedValue: $data.selectedValue
-            })]),
-            _: 3
-          }, 8, ["padding-left", "select-width", "show-border"])), createTextVNode(), createVNode(_component_Caret, {
-            class: "caret_dropdown",
-            onClick: withModifiers($options.toggleCaretDropdown, ["stop"])
-          }, {
-            default: withCtx(() => [$data.isDropdownOpen ? (openBlock(), createBlock(_component_Icon, {
-              key: 0,
-              color: $props.caretColor || $props.colorMode == "dark" ? "white" : "transparentBlack1",
-              name: "arrow_up",
-              size: "12px"
-            }, null, 8, ["color"])) : (openBlock(), createBlock(_component_Icon, {
-              key: 1,
-              color: $props.caretColor || $props.colorMode == "dark" ? "white" : "transparentBlack1",
-              name: "arrow_down",
-              size: "12px"
-            }, null, 8, ["color"]))]),
-            _: 1
-          }, 8, ["onClick"])]),
-          _: 3
-        }, 8, ["bg-color", "data-id", "data-qa-id", "disabled", "font-color", "font-size", "has-error", "has-no-padding", "height", "no-relative", "padding-left", "select-height", "select-min-height", "select-width", "show-border", "show-disabled-background", "table-padding-left", "onClick", "onKeydown"]), createTextVNode(), createVNode(_component_DropdownWrapper, {
-          ref: "dropdownWrapperRef",
-          "no-relative": $props.noRelative
-        }, {
-          default: withCtx(() => [(openBlock(), createBlock(Teleport, {
-            to: "#portal-target"
-          }, [withDirectives(createVNode(_component_SelectDropdown, {
-            ref: "dropdown",
-            "bg-color": $props.dropdownBgColor || $props.colorMode == "dark" ? "black" : "white",
-            "dropdown-position": $data.dropdownPosition,
-            "font-color": $props.dropdownFontColor || $props.colorMode == "dark" ? "white" : "black",
-            "font-size": $props.fontSize,
-            "hovered-bg-color": $props.colorMode == "dark" ? "#000000" : $props.dropdownBgColor,
-            "hovered-index": $data.hoveredIndex,
-            "hovered-value": $data.hoveredValue,
-            "is-active": $data.isActive,
-            "min-width": $props.minWidth,
-            "no-relative": $props.noRelative,
-            "option-width": $options.getOptionWidth,
-            "selected-value": $data.selectedValue,
-            onMouseleave: $options.optionLeave,
-            onOptionHovered: $options.optionHovered,
-            onOptionSelected: $options.optionSelected
-          }, {
-            default: withCtx(() => [renderSlot(_ctx.$slots, "dropdown")]),
-            _: 3
-          }, 8, ["bg-color", "dropdown-position", "font-color", "font-size", "hovered-bg-color", "hovered-index", "hovered-value", "is-active", "min-width", "no-relative", "option-width", "selected-value", "onMouseleave", "onOptionHovered", "onOptionSelected"]), [[vShow, $options.isSelectDropdownShown]])]))]),
-          _: 3
-        }, 8, ["no-relative"])]),
-        _: 3
-      }, 8, ["disabled"])]),
-      _: 3
-    }, 8, ["align-items", "has-label", "no-relative"])]),
-    _: 3
-  }, 8, ["no-relative", "select-width", "onMouseenter", "onMouseleave"]);
-}
-const RCSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export {
-  RCSelect as default
-};