@eturnity/eturnity_reusable_components 7.10.0-EPDM-10163.0 → 7.12.0-EPDM-9944.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.10.0-EPDM-10163.0",
+  "version": "7.12.0-EPDM-9944.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/split.svg

@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
+
 <svg
    version="1.1"
-   id="svg854"
+   id="svg438"
    width="838"
    height="833"
    viewBox="0 0 838 833"
@@ -13,9 +14,26 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
   <defs
-     id="defs858" />
+     id="defs442">
+    <linearGradient
+       id="linearGradient7383"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop7381" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient6933"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop6931" />
+    </linearGradient>
+  </defs>
   <sodipodi:namedview
-     id="namedview856"
+     id="namedview440"
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -24,22 +42,53 @@
      inkscape:pagecheckerboard="0"
      showgrid="false"
      inkscape:zoom="0.95078031"
-     inkscape:cx="431.22475"
-     inkscape:cy="326.04798"
+     inkscape:cx="466.45896"
+     inkscape:cy="549.02273"
      inkscape:window-width="1920"
      inkscape:window-height="1007"
-     inkscape:window-x="1"
-     inkscape:window-y="1080"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
-     inkscape:current-layer="g860" />
+     inkscape:current-layer="g444" />
   <g
      inkscape:groupmode="layer"
      inkscape:label="Image"
-     id="g860">
-    <path
-       style="fill:#ffffff"
-       d="m -5.0875843,441.73292 3.3936693,-93.74987 847.237645,-2.85667 -3.71049,95.94711 z m 333.6519143,232.4369 -98.27777,-105.35245 43.34233,-0.60608 c 23.83828,-0.33335 56.95483,-0.67085 73.59233,-0.75 l 30.25,-0.14392 L 376,413.05958 374.48738,213.61969 301.67731,213.3632 228.86724,213.10671 326.58798,107.77384 C 380.33439,49.84076 424.5019,2.3657611 424.73801,2.2738411 425.25724,2.0716911 628.96623,212.59506 628.96623,213.35636 c 0,0.29424 -41.55385,0.25035 -81.97885,0.25035 h -73.5 L 475,413.0466 l 1.47122,154.25779 72.81196,0.25649 72.81196,0.25649 -91.89971,99.5 -103.35334,112.2049 z"
-       id="path980"
-       sodipodi:nodetypes="cccccccsscccccsssscccccccc" />
+     id="g444">
+    <circle
+       id="path5141"
+       style="fill:none;stroke:#fffeff;stroke-opacity:1"
+       cx="0.66903824"
+       cy="263.65976"
+       r="0.52949077" />
+    <circle
+       id="path5143"
+       style="fill:none;stroke:#fffeff;stroke-opacity:1"
+       cx="0.66903824"
+       cy="263.65976"
+       r="0.52949077" />
+    <g
+       id="path5184"
+       style="stroke:#fffeff;stroke-opacity:1;fill:none">
+      <path
+         style="color:#000000;fill:none;stroke-width:154.42;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="m -156.35359,113.32885 348.76355,221.92361 744.6236,-498.85799"
+         id="path6861" />
+      <path
+         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="M 894.06055,-227.75 191.32227,243.04492 -114.9043,48.1875 -197.80273,178.46875 193.49609,427.45898 980.00781,-99.460937 Z"
+         id="path6863" />
+    </g>
+    <g
+       id="path5186"
+       style="stroke:#fffeff;stroke-opacity:1;fill:none">
+      <path
+         style="color:#000000;fill:none;stroke-width:166.34;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="M 816.06617,905.68984 357.97591,628.01443 1035.7943,176.14788"
+         id="path6855" />
+      <path
+         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="M 989.66016,106.94531 203.03125,631.34961 772.95312,976.81445 859.17773,834.56641 512.91992,624.67773 1081.9277,245.34961 Z"
+         id="path6857" />
+    </g>
   </g>
 </svg>

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

@@ -46,8 +46,8 @@
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
-          :isDraggable="isDraggable"
-        > 
+          :paddingLeft="paddingLeft"
+        >
           <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
           <inputText
             v-if="isSearchBarVisible"
@@ -65,7 +65,7 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector v-else>
+          <selector v-else :selectWidth="selectWidth" :paddingLeft="paddingLeft">
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -145,20 +145,26 @@ import icon from '../../icon'
 import inputText from '../inputText'
 import draggableInputHandle from '../../draggableInputHandle'
 
+const CARET_WIDTH = '30px'
+const BORDER_WIDTH = '1px'
+
 const Caret = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  min-width: 30px;
+  width: ${CARET_WIDTH};
+  min-width: ${CARET_WIDTH};
   height: 100%;
-  align-items: stretch
+  align-items: stretch;
   cursor: pointer;
   margin-left: auto;
 `
 
-const Selector = styled.div`
-  width: 100%;
+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;
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -167,7 +173,7 @@ const InputLabel = styled('div', labelAttrs)`
     props.theme.colors[props.fontColor]
       ? props.theme.colors[props.fontColor]
       : props.fontColor};
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-size: ${(props) => props.fontSize};
   font-weight: 700;
 `
 const optionalLabel = styled.span`
@@ -175,7 +181,7 @@ const optionalLabel = styled.span`
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
-  width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+  width: ${(props) => props.selectWidth};
   position: relative;
   display: inline-block;
 `
@@ -204,15 +210,14 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean,
-  isDraggable: Boolean,
+  paddingLeft: String
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding-left:${(props) => (props.isSearchBarVisible ? '0' : props.isDraggable?'30px':'15px')};
+  ${(props) => (props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}` )};
   text-align: left;
-  border-radius: 4px;
   min-height: ${(props) =>
     props.selectHeight
       ? props.selectHeight
@@ -227,7 +232,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
-    border:1px solid ${hasError ? theme.colors.red : theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${hasError ? theme.colors.red : theme.colors.grey4}
   `}
   background-color:${(props) =>
     props.disabled
@@ -249,7 +254,6 @@ const selectDropdownAttrs = {
   hoveredBgColor: String,
   bgColor: String,
   fontColor: String,
-  selectWidth: String,
   optionWidth: String,
   hoveredIndex: Number,
   hoveredValue: Number | String,
@@ -260,7 +264,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
-    border:1px solid ${(props) => props.theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius:4px;
     display: flex;
     flex-direction: column;
@@ -307,7 +311,7 @@ export default {
     },
     fontSize: {
       required: false,
-      default: null
+      default: '13px'
     },
     label: {
       required: false
@@ -327,8 +331,9 @@ export default {
       required: false
     },
     selectWidth: {
+      type: String,
       required: false,
-      default: null
+      default: '100%'
     },
     selectHeight: {
       type: String,
@@ -437,6 +442,7 @@ export default {
   data() {
     return {
       selectedValue: null,
+      paddingLeft: this.isDraggable ? '30px' : '15px',
       isDropdownOpen: false,
       isActive: false,
       textSearch: '',
@@ -511,9 +517,6 @@ export default {
           }
         })
     },
-    onSelectSlotClick() {
-      this.toggleDropdown()
-    },
     clickOutside(event) {
       const dropdownRef = this.$refs.dropdown
       // we need to prevent closing on selecting an option, because in the case of
@@ -559,26 +562,21 @@ export default {
           this.$refs.dropdown.$el.scrollTop = topPos
         }
       }
+    },
+    clearSearch() {
+      this.textSearch = ''
     }
   },
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        // this filterRef is needed to check for the # of children on Filter dropdowns
-        const filterRef =
-          this.$refs.dropdown.$children &&
-          this.$refs.dropdown.$children.length > 1
-            ? this.$refs.dropdown.$children
-            : this.$refs.dropdown.$children[0].$children
-            ? this.$refs.dropdown.$children[0].$children
-            : this.$refs.dropdown.$children
-        return filterRef.length
-      } else {
-        return 0
+        return this.$refs.dropdown.$el.childElementCount
       }
+
+      return 0
     },
     isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
+      return this.isSearchable && this.isDropdownOpen
     }
   },
   watch: {

package/src/components/modals/modal/index.vue

@@ -5,7 +5,7 @@
     :class="{ visible: isOpen, hidden: !isOpen }"
     :backdrop="backdrop"
   >
-    <modal-container @click.stop>
+    <modal-container @click="onClickModalContainer">
       <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
       <content-container :visible="!isLoading">
         <slot />
@@ -26,7 +26,7 @@
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
 //   <div>Data....</div>
 // </modal>
 
@@ -151,6 +151,10 @@ export default {
     position: {
       required: false,
       default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
     }
   },
   beforeDestroy() {
@@ -164,6 +168,11 @@ export default {
       if (key === 'Escape') {
         this.onCloseModal()
       }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
+      }
     }
   },
   watch: {

package/src/helpers/numberConverter.js

@@ -18,6 +18,7 @@ export const stringToNumber = ({
     selectedLang === 'de-lu' ||
     selectedLang === 'de-be' ||
     selectedLang === 'es-es' ||
+    selectedLang === 'ca-es' ||
     selectedLang === 'de' ||
     selectedLang === 'de-at' ||
     selectedLang === 'it' ||

package/src/helpers/translateLang.js

@@ -48,6 +48,8 @@ export const translateLang = (lang) => {
     return 'portuguese'
   } else if (lang === 'es-es') {
     return 'spanish'
+  } else if (lang === 'ca-es') {
+    return 'catalan_es'
   } else {
     return lang
   }