@eturnity/eturnity_reusable_components 7.45.5-EPDM-10609.1 → 7.45.5-EPDM-12680.0

package/dist/main.es31.js

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