@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.8 → 7.4.4-EPDM-7260.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.4-EPDM-7260.8",
+  "version": "7.4.4-EPDM-7260.10",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -14,87 +14,42 @@
         textAlign="left"
         :isInteractive="true"
         :interactionStep="1"
-        @on-input="value = $event"
+        @on-input="inputHandler"
         @input-change="changeHandler"
         @input-focus="focusHandler"
         @input-blur="blurHandler"
       >
         <template v-slot:label>
-          <div>Interactive Label</div>
+          <div>Interactive Label 1</div>
         </template>
       </input-number>
 
-      <dropdown-component openingMode="hover" gap="30px">
-        <template #trigger><i>Click Me</i></template>
-        <template #dropdown>
-          <div>
-            <a href="">test1</a>
-            <button href="">test2</button>
-            <br />
-            <p>Text</p>
-          </div>
-        </template>
-      </dropdown-component>
-
-      <videoThumbnail
-        src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-        playIconColor="red"
-        playIconSize="20px"
-        width="400px"
-        height="600px"
-      />
+      <hr>
 
-      <SwitchField
-        @on-switch-change="onInputChange($event)"
-        :options="[
-          { value: 0, content: 'zero' },
-          { value: 1, content: 'one' },
-          { value: 2, content: 'two' }
-        ]"
-        :value="value"
-        label="label"
-        toggleColor="red"
-        size="large"
-        backgroundColor="blue"
-        labelAlign="left"
-        fontColor="black"
-        :disabled="false"
-      />
-      <icon
-        name="opacity"
-        color="red"
-        hoveredColor="blue"
-        size="60px"
-        cursor="default"
-        isStriked="true"
-      />
-      <Select
+      <input-number
         :value="value"
-        selectWidth="100%"
-        optionWidth="50%"
-        label="that is a label"
-        alignItems="vertical"
-        colorMode="dark"
-        isSearchable="true"
-        @input-change="value = $event"
-        @search-change="searchValue = $event"
+        :minNumber="0"
+        unitName="mm"
+        :numberPrecision="0"
+        backgroundColor="transparent"
+        borderColor="eturnityGrey"
+        inputHeight="34px"
+        inputWidth="420px"
+        textAlign="left"
+        :isInteractive="true"
+        :interactionStep="1"
+        @on-input="inputHandler"
+        @input-change="changeHandler"
+        @input-focus="focusHandler"
+        @input-blur="blurHandler"
       >
-        <template #selector="{ selectedValue }">
-          value selected: {{ selectedValue }}
-        </template>
-        <template #dropdown>
-          <Option
-            v-for="opt in filteredOptionList"
-            :key="opt.id"
-            :value="opt.val"
-            >{{ opt.lookFor }}
-          </Option>
+        <template v-slot:label>
+          <div>Interactive Label 2</div>
         </template>
-      </Select>
-
-      {{ filteredOptionList }}
+      </input-number>
 
-      <iconCollection color="red" />
+      <hr>
+      <button @click="value=42">Click to set at 42</button>
     </page-container>
   </ThemeProvider>
 </template>
@@ -104,64 +59,24 @@ import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
-import Select from '@/components/inputs/select'
-import SwitchField from '@/components/inputs/switchField'
-import Option from '@/components/inputs/select/option'
-import iconCollection from '@/components/icon/iconCollection'
-import dropdownComponent from '@/components/dropdown'
-import videoThumbnail from '@/components/videoThumbnail'
-import icon from '@/components/icon'
-// import infoCard from '@/components/infoCard'
-// import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
-// const RowContainer = styled.div`
-//   display: inline-flex;
-//   gap: 10px;
-//   flex-wrap: wrap;
-// `
-
 export default {
   name: 'App',
   components: {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    Option,
-    Select,
-    SwitchField,
-    iconCollection,
-    dropdownComponent,
-    videoThumbnail,
-    icon,
   },
   data() {
     return {
       value: 42,
-      value2: 42,
-      companyName: 'toto',
-      optionList: [
-        { id: 'a', val: 'A', lookFor: 'babababa' },
-        { id: 'b', val: 'B', lookFor: 'abab' },
-        { id: 'c', val: 'C', lookFor: 'ccc' },
-        { id: 'd', val: 'D', lookFor: 'ddd' },
-        { id: 'e', val: 'E', lookFor: 'dddee' },
-        { id: 'f', val: 'F', lookFor: 'ddfff' },
-        { id: 'g', val: 'G', lookFor: 'dggg' },
-        { id: 'h', val: 'H', lookFor: 'dddhhh' }
-      ],
-      searchValue: ''
     }
   },
   computed: {
-    filteredOptionList() {
-      return this.optionList.filter((opt) =>
-        opt.lookFor.includes(this.searchValue)
-      )
-    }
   },
   methods: {
     blurHandler(e) {
@@ -174,64 +89,12 @@ export default {
       console.log('focus', e)
     },
     inputHandler(e) {
-      this.value2 = e
       console.log('input', e)
-    },
-    keydownHandler(e) {
-      console.log('test', e)
+      //this.value = e
+      setTimeout(()=>{this.value = e},1000)
     },
     getTheme() {
       return theme
-    },
-    onInputChange(event) {
-      this.inputValue = event
-    },
-    onInputBlur(event) {
-      console.log(event)
-    },
-    isDropdownOpen() {
-      return this.dropdownOpen
-    },
-    onClickButton() {
-      console.log('Test')
-    },
-    toggleDropdownOpen() {
-      this.dropdownOpen = !this.dropdownOpen
-    },
-    getDropdownValues() {
-      let items = []
-      items = [
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'display_name'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'company_item_number'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'model'
-          })
-        }
-      ]
-      return items
-    },
-    getComponentInfo({ row, value }) {
-      let item
-      if (row.selectedValue && row.selectedValue[value]) {
-        item = row.selectedValue[value]
-      } else if (row[value]) {
-        item = row[value]
-      } else {
-        item = '-'
-      }
-      return item
     }
   }
 }

package/src/assets/svgIcons/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M245.7,232.4c1,7.7-2.4,11.3-10.3,10.8l-62.1-6.9c-4.9-0.5-8-1.9-9.3-4.1c-1.3-2.2-0.6-4.7,2.3-7.5c1.9-1.6,4.1-3.9,6.8-6.8c2.7-2.9,5-5.2,6.8-7c1.9-2,2.4-3.8,1.8-5.4c-0.7-1.6-2-3.5-4-5.7c-4.7-4.4-9-8.5-12.9-12.1c-3.9-3.6-8.2-7.8-12.9-12.6c-1-1-2-2-3-3.2c-1-1.2-1.8-2.4-2.3-3.8c-0.5-1.4-0.6-2.9-0.2-4.4c0.3-1.6,1.4-3.3,3.3-5.1c1-1,1.9-1.9,2.5-2.6c0.7-0.7,1.3-1.4,2-2c0.7-0.6,1.4-1.2,2.1-2c0.7-0.7,1.7-1.8,2.9-3.1c3.4-3.3,6.5-4.7,9.3-4.2c2.9,0.5,6,2.4,9.3,5.7c3.4,3.3,6.8,6.6,10.3,10c3.5,3.4,7.5,7.2,11.8,11.5c3.2,3,5.9,5,8.2,6.2c2.3,1.2,4.5,0.6,6.7-1.5c1.5-1.5,3.4-3.3,5.7-5.3c2.3-2,4.2-3.9,5.9-5.5c2.9-2.8,5.4-3.9,7.7-3.2c2.3,0.7,3.7,3.1,4.2,7.4L245.7,232.4L245.7,232.4L245.7,232.4z M11.1,24c-0.5-4.3,0-7.2,1.6-8.9c1.6-1.6,4.4-2.3,8.5-2L83.2,20c5.1,0.5,8.2,1.9,9.5,4.1c1.3,2.2,0.5,4.7-2.4,7.5c-1.7,1.6-3.7,3.8-6.2,6.4c-2.4,2.6-4.6,4.8-6.4,6.6c-2,2-2.7,3.8-2,5.4c0.7,1.6,2.1,3.5,4.3,5.7c2.2,2.3,4.2,4.3,6.2,6c1.9,1.7,3.8,3.4,5.7,5.2c1.9,1.7,3.8,3.6,5.8,5.5l6.3,6.2c1,1,2,2.1,2.9,3.4c0.9,1.3,1.6,2.7,2,4.2c0.4,1.5,0.4,3-0.1,4.7c-0.5,1.6-1.6,3.3-3.3,4.9l-2.8,2.7c-0.7,0.7-1.3,1.3-1.9,2c-0.6,0.7-1.3,1.3-2.1,2l-2.8,3c-3.4,3.3-6.3,4.5-8.7,3.7c-2.4-0.8-5.3-2.9-8.7-6.2c-3.4-3.3-6.5-6.4-9.6-9.2c-3-2.9-6.7-6.5-11.1-10.7c-3-3-5.7-5-8.1-6.2c-2.4-1.2-4.6-0.7-6.8,1.5c-1.5,1.6-3.6,3.7-6.3,6c-2.7,2.4-4.9,4.4-6.5,6c-2.9,2.8-5.4,3.9-7.6,3.2c-2.2-0.7-3.5-3.1-4-7.4L11.1,24L11.1,24L11.1,24z M234.8,12.9c4.4-0.5,7.4,0,9.1,1.6c1.7,1.6,2.4,4.4,2,8.5l-7.1,60.6c-0.5,4.8-1.9,7.8-4.2,9.1c-2.3,1.3-4.8,0.5-7.7-2.5c-1.7-1.6-3.9-3.7-6.5-6c-2.7-2.4-5-4.5-6.8-6.3c-2-1.8-3.9-2.4-5.5-1.9c-1.7,0.6-3.6,1.9-5.8,4.1c-4.5,4.4-8.5,8.5-12,12.1c-3.4,3.6-7.5,7.7-12.2,12.3c-1,1-2.2,1.9-3.5,2.8c-1.3,0.9-2.8,1.6-4.3,2c-1.5,0.4-3.1,0.4-4.8-0.1s-3.4-1.6-5-3.4c-1-1-1.9-1.8-2.6-2.5s-1.5-1.3-2.1-2c-0.7-0.7-1.4-1.3-2.1-2c-0.7-0.6-1.7-1.6-2.9-3c-3.4-3.3-4.7-6.2-4-8.6c0.7-2.5,2.8-5.3,6.3-8.6l9.6-9.8c3.2-3.3,7-7.1,11.3-11.3c3.2-3,5.4-5.6,6.6-7.9c1.2-2.3,0.6-4.4-1.8-6.4c-1.5-1.5-3.4-3.5-5.8-6c-2.4-2.6-4.4-4.6-6-6.3c-2.9-2.8-3.9-5.2-3.3-7.4c0.7-2.1,3.2-3.4,7.6-3.9L234.8,12.9L234.8,12.9L234.8,12.9z M21.2,241.7c-4.2,0.3-7.2-0.3-9-1.9c-1.8-1.6-2.5-4.3-2.1-8.3l7.1-60.6c0.5-4.9,1.9-8,4.2-9.2c2.3-1.2,4.8-0.5,7.7,2.3c1.7,1.6,4,3.8,6.9,6.4c2.9,2.6,5.3,4.8,7.2,6.6c2,2,3.7,2.8,5,2.6c1.3-0.2,3-1.4,5-3.6c2.2-2.1,4.3-4.2,6.3-6.3c2-2,4-4.1,6-6c2-2,4.1-4,6.2-6.2c2.1-2.1,4.3-4.4,6.7-6.6c1-1,2.1-2,3.3-3c1.2-1,2.5-1.7,3.9-2.2s2.9-0.5,4.5-0.1c1.6,0.4,3.3,1.5,5.2,3.3c1,1,1.9,1.8,2.6,2.5c0.7,0.7,1.5,1.3,2.1,2l2,2.2l3,2.7c3.4,3.3,4.8,6.3,4.4,9c-0.4,2.7-2.4,5.8-5.9,9.2c-3.2,3.1-6.5,6.5-10.1,10c-3.5,3.5-7.5,7.4-11.8,11.7c-3,3-4.9,5.4-5.7,7.3c-0.7,1.9,0,3.9,2.1,6c1.7,1.5,3.6,3.3,5.7,5.5c2.1,2.2,4,4.1,5.7,5.8c2.9,2.8,3.9,5.2,3.2,7.4c-0.7,2.1-3.3,3.4-7.7,3.9L21.2,241.7L21.2,241.7L21.2,241.7z" style="stroke-dasharray: 1461, 1461;stroke-dashoffset: 0;fill-opacity: 1;"></path></svg>

package/src/assets/svgIcons/split.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg438"
+   width="838"
+   height="833"
+   viewBox="0 0 838 833"
+   sodipodi:docname="split.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     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="namedview440"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.95078031"
+     inkscape:cx="466.45896"
+     inkscape:cy="549.02273"
+     inkscape:window-width="1920"
+     inkscape:window-height="1007"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g444" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     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/assets/theme.js

@@ -22,6 +22,8 @@ const theme = {
     grey6: '#555d61',
     green: '#99db0c',
     transparentWhite1: '#ffffff32',
+    transparentWhite2: '#ffffff16',
+    transparentWhite3: '#ffffff48',
     transparentBlack1: '#263238e6',
     disabled: '#dfe1e1',
     eturnityGrey: '#263238'

package/src/components/buttons/mainButton/index.vue

@@ -8,7 +8,10 @@
       :noWrap="noWrap"
       :data-id="dataId"
     >
-      {{ text }}
+      <Label :hasIcon="Boolean(icon)">
+        <icon v-if="icon" :name="icon" size="14px" />
+        {{ text }}
+      </Label>
     </button-container>
   </page-container>
 </template>
@@ -20,12 +23,14 @@
 //   text="Click Me"
 //   customColor="#ab5348"
 //   type="secondary" // primary, secondary, cancel
+//   icon="icon-name" // icon name from icon component
 //   :isDisabled="true"
 //   :minWidth="minWidth"
 //   :data-id="test_data_id"
 // />
 
 import styled from 'vue-styled-components'
+import Icon from '../../icon'
 
 const PageContainer = styled.div``
 
@@ -68,9 +73,22 @@ const ButtonContainer = styled('div', ButtonAttrs)`
   }
 `
 
+const LabelAttrs = {
+  hasIcon: Boolean
+}
+
+const Label = styled('span', LabelAttrs)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${(props) => (props.hasIcon ? '5px' : '0')};
+`
+
 export default {
   name: 'main-button',
   components: {
+    Icon,
+    Label,
     PageContainer,
     ButtonContainer
   },
@@ -83,6 +101,10 @@ export default {
       required: false,
       default: false
     },
+    icon: {
+      required: false,
+      default: null
+    },
     text: {
       required: true
     },

package/src/components/errorMessage/index.vue

@@ -9,9 +9,7 @@
 <script>
 // import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
 //To use:
-// <error-message
-//     alignText="right" // default is left
-// />
+// <error-message />
 
 import styled from 'vue-styled-components'
 

package/src/components/icon/index.vue

@@ -9,7 +9,12 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
-    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
+    <striked-line
+      v-if="isStriked"
+      :color="color"
+      :disabled="disabled"
+      :hoveredColor="hoveredColor"
+    ></striked-line>
   </Wrapper>
 </template>
 
@@ -40,17 +45,22 @@ const Wrapper = styled('div', wrapperAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
-const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
+const strikedAttrs = {
+  isDisabled: Boolean,
+  color: String,
+  hoveredColor: String
+}
 const strikedLine = styled('div', strikedAttrs)`
   display: flex;
   position: absolute;
-  bottom:0;
-  left:0;
+  bottom: 0;
+  left: 0;
   align-content: center;
   justify-content: center;
   width: 143%;
-  height:8%;
-  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  height: 8%;
+  background-color: ${(props) =>
+    props.theme.colors[props.color] || props.color};
   min-height: 0;
   line-height: 0;
   transform-origin: 0% 100%;
@@ -71,7 +81,7 @@ const IconImage = styled('div', IconImageProps)`
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
-    background-color: ${(props)=>props.hoveredColor};
+    background-color: ${(props) => props.hoveredColor};
   }
 `
 

package/src/components/iconWrapper/index.vue

@@ -118,7 +118,7 @@ export default {
     },
     hoveredBackgroundColor: {
       required: false,
-      default: 'transparentWhite1'
+      default: 'transparentWhite2'
     },
     size: {
       required: false,

package/src/components/infoText/index.vue

@@ -10,7 +10,6 @@
       </icon-img>
       <text-overlay
         v-if="showInfo"
-        :borderColor="borderColor"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
@@ -37,7 +36,6 @@ import icon from '../icon'
 
 const textAttrs = {
   iconSize: String,
-  borderColor: String,
   alignArrow: String,
   width: String,
   halfComputedTextInfoWidth: Number
@@ -112,10 +110,6 @@ export default {
     text: {
       required: false
     },
-    borderColor: {
-      required: false,
-      default: null
-    },
     size: {
       required: false,
       default: '14px'
@@ -157,11 +151,7 @@ export default {
   },
   computed: {
     iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
+      return theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

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

@@ -16,12 +16,10 @@
       <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
       </label-text>
-      
+
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
-        borderColor="#ccc"
-        size="14px"
         :alignArrow="labelInfoAlign"
       />
     </label-wrapper>
@@ -38,7 +36,7 @@
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
-        @keyup.enter="$emit('on-enter-click')"
+        @keyup.enter="onEnterPress"
         @input="onInput($event)"
         :disabled="disabled"
         :isDisabled="disabled"
@@ -100,7 +98,9 @@
 //     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
-// />
+// >
+//<template name=label><img>....</template>
+//</inputNumber>
 import styled from 'vue-styled-components'
 import {
   stringToNumber,
@@ -469,6 +469,10 @@ export default {
     }
   },
   methods: {
+    onEnterPress(){
+      this.$emit('on-enter-click')
+      this.$refs.inputField1.$el.blur()
+    },
     onChangeHandler(event) {
       if (isNaN(event) || event === '') {
         event = this.defaultNumber
@@ -545,6 +549,9 @@ export default {
       return array
     },
     onInput(value) {
+      // if(!this.isFocused){
+      //   return
+      // }
       if (this.isBlurred) {
         this.isBlurred = false
         return
@@ -651,7 +658,7 @@ export default {
       e.preventDefault()
       let value = parseFloat(this.value || 0)
       value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-      this.$emit('on-input', value)
+      this.$emit('on-input-drag', value)
 
       this.textInput = numberToString({
         value: value && value.length ? value : this.minNumber,

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

@@ -17,7 +17,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
           :alignArrow="infoTextAlign"
         />
@@ -34,6 +33,7 @@
             :value="value"
             @input="onChangeHandler"
             @blur="onInputBlur"
+            @keyup.enter="onEnterPress"
             :noBorder="noBorder"
             :disabled="disabled"
             :isDisabled="disabled"
@@ -343,6 +343,10 @@ export default {
     }
   },
   methods: {
+    onEnterPress(event){
+      this.$emit('on-enter-click')
+      this.$refs.inputElement.$el.blur()
+    },
     onChangeHandler($event) {
       this.$emit('input-change', $event)
     },

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

@@ -25,9 +25,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="infoTextSize"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
@@ -50,7 +48,7 @@
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
-          :isDraggable="isDraggable"
+          :paddingLeft="paddingLeft"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -72,7 +70,12 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector v-else>
+          <selector
+            v-else
+            :showBorder="showBorder"
+            :selectWidth="selectWidth"
+            :paddingLeft="paddingLeft"
+          >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown" v-if="dropDownArrowVisible">
@@ -154,20 +157,38 @@ 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 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 }
@@ -176,7 +197,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`
@@ -189,13 +210,7 @@ const inputProps = {
   maxWidth: String
 }
 const Container = styled('div', inputProps)`
-  min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
-  width: ${(props) =>
-    props.selectWidth
-      ? props.selectWidth
-      : props.maxWidth
-      ? props.maxWidth
-      : '100%'};
+  width: ${(props) => props.selectWidth};
   position: relative;
   display: inline-block;
 `
@@ -224,18 +239,16 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean,
-  isDraggable: Boolean,
-  fontSize: String
+  paddingLeft: String
 }
 const selectButton = styled('div', selectButtonAttrs)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   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
@@ -250,7 +263,9 @@ 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
@@ -274,7 +289,6 @@ const selectDropdownAttrs = {
   hoveredBgColor: String,
   bgColor: String,
   fontColor: String,
-  selectWidth: String,
   optionWidth: String,
   hoveredIndex: Number,
   hoveredValue: Number | String,
@@ -282,35 +296,34 @@ const selectDropdownAttrs = {
   fontSize: String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
-    box-sizing: border-box;
-    z-index:${(props) => (props.isActive ? '2' : '1')};
-    position:absolute;
-    top:5px;
-    border:1px solid ${(props) => props.theme.colors.grey4}
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-    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%')};
-    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};
-    }
+  box-sizing: border-box;
+  z-index: ${(props) => (props.isActive ? '2' : '1')};
+  position: absolute;
+  top: 5px;
+  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%')};
+  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};
+  }
 `
 const DropdownWrapper = styled('div')`
   position: relative;
@@ -336,7 +349,7 @@ export default {
     },
     fontSize: {
       required: false,
-      default: null
+      default: '13px'
     },
     label: {
       required: false
@@ -352,12 +365,10 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     selectWidth: {
+      type: String,
       required: false,
-      default: null
+      default: '100%'
     },
     minWidth: {
       required: false
@@ -476,6 +487,7 @@ export default {
   data() {
     return {
       selectedValue: null,
+      paddingLeft: this.isDraggable ? '30px' : '15px',
       isDropdownOpen: false,
       isActive: false,
       textSearch: '',
@@ -546,9 +558,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
@@ -594,29 +603,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 &&
-          this.$refs.dropdown &&
-          this.$refs.dropdown.$children &&
-          this.$refs.dropdown.$children.length > 1
-            ? this.$refs.dropdown.$children
-            : this.$refs.dropdown.$children.length &&
-              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/inputs/switchField/index.vue

@@ -17,9 +17,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -51,9 +48,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -207,9 +201,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     colorMode: {
       required: false,
       default: 'light'

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -22,7 +22,6 @@ const Template = (args, { argTypes }) => ({
   //     rowHeight="4" //optional
   //     :isError="false"
   //     :errorText="$gettext('field_required')"
-  //     infoTextAlign="right" // left by default
   //     infoTextMessage="My info message"
   //     label="Question 5"
   //     alignItems="horizontal" // horizontal, vertical
@@ -37,7 +36,6 @@ Default.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -52,7 +50,6 @@ Disabled.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -67,7 +64,6 @@ Error.args = {
   rowHeight: "2",
   isError: true,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -82,7 +78,6 @@ WithLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -97,7 +92,6 @@ HorizontalLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -112,7 +106,6 @@ LargerTextArea.args = {
   rowHeight: "5",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -127,7 +120,6 @@ LargerFontSize.args = {
   fontSize: "24px",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",

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

@@ -11,9 +11,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           size="16px"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-container
@@ -47,7 +45,6 @@
 //     rowHeight="4" //optional
 //     :isError="false"
 //     :errorText="$gettext('field_required')"
-//     infoTextAlign="right" // left by default
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
@@ -167,9 +164,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },

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

@@ -14,9 +14,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -50,9 +47,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -72,7 +66,6 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
-//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
 //   data-id="test_data_id"
 // />
@@ -193,7 +186,7 @@ const ToggleDot = styled('span', toggleProps)`
       : props.size === 'small'
       ? '10px'
       : '14px'};
-  left: 3px
+  left: 3px;
   bottom: ${(props) =>
     props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
@@ -278,9 +271,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     dataId: {
       type: String,
       default: ''

package/src/components/label/index.vue

@@ -13,7 +13,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
           :alignArrow="infoTextAlign"
         />

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/components/navigationTabs/index.vue

@@ -13,8 +13,6 @@
             <info-text
                 v-if="tab['labelInfoText']"
                 :text="tab['labelInfoText']"
-                borderColor="#ccc"
-                size="14px"
                 :alignArrow="tab['labelInfoAlign']"
             />
         </Option>
@@ -57,7 +55,7 @@ const Option = styled('div',TabAttr)`
     justify-content: center;
     flex-direction: row;
     gap: 10px;
-    color: ${props=>props.textColor ? 
+    color: ${props=>props.textColor ?
         props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
         props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `

package/src/components/pageSubtitle/index.vue

@@ -4,11 +4,8 @@
       {{ text }}
     </span>
     <info-text
-      :text="infoText"
       v-if="!!infoText"
-      size="14px"
-      borderColor="#ccc"
-      :alignText="alignInfoText"
+      :text="infoText"
     />
   </subtitle-text>
 </template>
@@ -55,10 +52,6 @@ export default {
       required: false,
       default: null,
     },
-    alignInfoText: {
-      required: false,
-      default: "left",
-    },
     marginBottom: {
       required: false,
       default: "30px",

package/src/components/pageTitle/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <flex>
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+  <title-wrap :hasInfoText="!!infoText">
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
+      {{ text }}
+    </title-text>
     <info-text
-        v-if="infoText"
-        :text="infoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignArrow="infoAlign"
-      />
-  </flex>
+      v-if="!!infoText"
+      :text="infoText"
+      :alignArrow="infoAlign"
+    />
+  </title-wrap>
 </template>
 
 <script>
@@ -19,28 +19,32 @@
 //   color="red"
 // />
 import styled from "vue-styled-components"
-import InfoText from '../infoText'
-const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled("div", textAttrs)`
+import InfoText from "../infoText"
+
+const wrapAttrs = { hasInfoText: Boolean }
+const TitleWrap = styled("div", wrapAttrs)`
+  display: grid;
+  align-items: center;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+  margin-bottom: 20px;
+`
+
+const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
-  
-`
-const flex = styled("div", textAttrs)`
-  display: flex;
-  gap:10px;
-  margin-bottom: 20px;
-  align-items: center;
 `
 
 export default {
   name: "page-title",
   components: {
     TitleText,
-    InfoText,
-    flex
+    TitleWrap,
+    InfoText
   },
   props: {
     text: {
@@ -59,10 +63,11 @@ export default {
     },
     infoText: {
       required: false,
+      default: null,
     },
     infoAlign: {
       required: false,
-    },
+    }
   },
 }
 </script>

package/src/components/rangeSlider/index.vue

@@ -11,7 +11,7 @@
         <VerticalLabel>{{ label.name }}</VerticalLabel>
         <BarSlider>
           <Bar
-            @contextmenu="
+            @click.native.stop="
               onBarRightClick({ event: $event, label, type: 'add' })
             "
           >
@@ -57,12 +57,11 @@
                     label.selectedTariffs
                   )
                 "
-                @contextmenu.native.stop="
-                  onBarRightClick({
-                    event: $event,
-                    label,
+                @click.native.stop="
+                  $emit('on-bar-tariff-click', {
                     type: 'delete',
-                    bar
+                    item: bar,
+                    label: activeLabel
                   })
                 "
                 @activated="onActivateBar({ item: bar })"
@@ -401,6 +400,7 @@ export default {
       document.addEventListener('keydown', this.onKeyDownDelete)
     },
     onDeactivateBar() {
+      this.$emit('deactivate')
       this.activeItem = null
       document.removeEventListener('keydown', this.onKeyDownDelete)
     },

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
   }
@@ -72,6 +74,8 @@ export const datePickerLang = (lang) => {
     return 'it'
   } else if (lang === 'en-us' || lang === 'en-gb') {
     return 'en'
+  } else if (lang === 'es-es' || lang === 'ca-es' || lang === 'pt-pt') {
+    return 'es'
   } else {
     return lang
   }
@@ -97,6 +101,8 @@ export const tinyLanguage = (lang) => {
     return 'fr_FR'
   } else if (lang === 'it' || lang === 'it-it' || lang === 'it-ch') {
     return 'it'
+  } else if (lang === 'es-es' || lang === 'ca-es') {
+    return 'es'
   } else if (lang === 'en-us') {
     return null
   } else {
@@ -114,7 +120,9 @@ export const langForLocaleString = () => {
           ? 'fr-fr'
           : localStorage.getItem('lang') === 'fr-ch'
               ? 'de-ch'
-              : localStorage.getItem('lang')
+              : localStorage.getItem('lang') === 'ca-es'
+                ? 'es-es'
+                : localStorage.getItem('lang')
       : 'en-US'
   return selectedLang !== 'null' ? selectedLang : 'en-US'
 }