@eturnity/eturnity_reusable_components 7.8.6-EPDM-7779.3 → 7.8.6-EPDM-7779.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.6-EPDM-7779.3",
+  "version": "7.8.6-EPDM-7779.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/select/index.vue

@@ -46,6 +46,7 @@
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
+          :paddingLeft="paddingLeft"
         >
           <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
           <inputText
@@ -64,7 +65,7 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector :selectWidth="selectWidth" v-else>
+          <selector v-else :selectWidth="selectWidth" :paddingLeft="paddingLeft">
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -145,7 +146,6 @@ import inputText from '../inputText'
 import draggableInputHandle from '../../draggableInputHandle'
 
 const CARET_WIDTH = '30px'
-const PADDING = this.isDraggable ? '30px' : '15px'
 const BORDER_WIDTH = '1px'
 
 const Caret = styled.div`
@@ -160,8 +160,8 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
-const Selector = styled('div', { selectWidth: String })`
-  max-width: ${(props) => `calc(${props.selectWidth} - (${CARET_WIDTH} + ${PADDING} + (${BORDER_WIDTH} * 2)))`};
+const Selector = styled('div', { selectWidth: String, paddingLeft: String })`
+  max-width: ${(props) => `calc(${props.selectWidth} - (${CARET_WIDTH} + ${props.paddingLeft} + (${BORDER_WIDTH} * 2)))`};
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -209,13 +209,14 @@ const selectButtonAttrs = {
   height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
-  showBorder: Boolean
+  showBorder: Boolean,
+  paddingLeft: String
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  ${(props) => (props.isSearchBarVisible ? '' : `padding-left: ${PADDING}` )};
+  ${(props) => (props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}` )};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -441,6 +442,7 @@ export default {
   data() {
     return {
       selectedValue: null,
+      paddingLeft: this.isDraggable ? '30px' : '15px',
       isDropdownOpen: false,
       isActive: false,
       textSearch: '',