@eturnity/eturnity_reusable_components 1.2.28 → 1.2.29

package/babel.config.js

@@ -2,4 +2,4 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.28",
+  "version": "1.2.29",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,52 +2,37 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-      <!-- <modal backdrop="dark" :isLoading="false" :isOpen="false"> -->
-      <!-- <main-table titleText="My Table">
-          <thead>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-              <div />
-            </tr>
-          </thead>
-          <tbody>
-            <tr> -->
-      <!-- <table-dropdown
-              :colSpan="3"
-              :tableItems="getDropdownValues()"
-              @toggle-dropdown-open="toggleDropdownOpen()"
-              @item-selected="onItemSelected({ item: $event, index })"
-              :isOpen="isDropdownOpen()"
-              :optionItems="itemOptions"
-              :optionsDisplay="['display_name', 'company_item_number', 'model']"
-            /> -->
-      <!-- <td>Test</td>
-              <div class="icons-container">
-                <three-dots :options="listOptions" :isLoading="false" />
-              </div>
-            </tr>
-          </tbody>
-        </main-table>
-      </modal>
-      <row-container>
-        <div v-for="(item, index) in markersArray" :key="item.index">
-          <project-marker
-            :activeLanguage="'en-us'"
-            :markerData="item"
-            :isLimitedPartner="false"
-            :isGroupSupport="false"
-            :isEditable="true"
-            :gettext="gettext"
-            :date="'23.07.2022'"
-            @editHandler="consoleLog('edit index ' + index)"
-            @deleteHandler="consoleLog('delete id ' + item.id)"
-          />
-        </div>
-      </row-container>
-      <br />
-      <iconCollection />
+      <input-number
+        :value="inputValue"
+        @input-change="inputValue = $event"
+        inputWidth="250px"
+        slotSize="50%"
+        ><InputAnnexContainer>
+          <span>123m2</span>
+          <info-text
+            size="10px"
+            alignArrow="right"
+            text="infoText ceci est le text"
+          ></info-text>
+        </InputAnnexContainer>
+      </input-number>
+      <input-number
+        :value="inputValue"
+        @input-change="inputValue = $event"
+        inputWidth="250px"
+        slotSize="50%"
+        :isError="true"
+        ><InputAnnexContainer>
+          <span>123m2</span>
+          <info-text
+            :style="{ 'justify-self': 'end' }"
+            size="12px"
+            alignArrow="center"
+            text="infoText ceci est le text"
+            >This is the tooltip text</info-text
+          >
+        </InputAnnexContainer>
+      </input-number>
       <br />
       <toggle
         @on-toggle-change="onInputChange($event)"
@@ -61,22 +46,21 @@
       <br /> -->
       <!-- <iconCollection /> -->
       <input-text
-        placeholder="Enter distance"
+        placeholder="Company name"
         :value="inputValue"
         @input-change="onInputChange($event)"
         @input-blur="onInputBlur($event)"
         type="password"
       />
       <br />
-      <!-- <page-subtitle text="My Subtitle" infoText="My info Text" />
-      <spinner size="30px" />
-      <checkbox
-        label="Do you accept the Terms?"
-        :isChecked="true"
-        size="small"
-        :isDisabled="false"
-      /> -->
-      <!-- <external-button text="Click me!" minWidth="500px" /> -->
+      <input-number
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -85,9 +69,7 @@
 import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
-// import MainTable from '@/components/tables/mainTable'
-// import ThreeDots from '@/components/threeDots'
-// import Toggle from '@/components/inputs/toggle'
+import InputNumber from '@/components/inputs/inputNumber'
 import InputText from '@/components/inputs/inputText'
 // import Checkbox from '@/components/inputs/checkbox'
 // import PageSubtitle from '@/components/pageSubtitle'
@@ -128,6 +110,7 @@ export default {
   },
   data() {
     return {
+      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -253,11 +236,8 @@ export default {
     }
   },
   methods: {
-    consoleLog(data) {
-      console.log(data)
-    },
-    gettext(string) {
-      return string.toUpperCase()
+    keydownHandler(e) {
+      console.log('test', e)
     },
     getTheme() {
       return theme

package/src/assets/theme.js

@@ -18,8 +18,10 @@ const theme = {
     grey3: '#b2b9c5',
     grey4: '#dee2eb',
     grey5: '#fafafa',
+    grey6: '#555d61',
     green: '#99db0c',
-    disabled: '#dfe1e1'
+    disabled: '#dfe1e1',
+    eturnityGrey: '#263238'
   },
   screen: {
     mobileSmall: '345px',

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
+//To use:
+// <error-message
+//     alignText="right" // default is left
+// />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: min-content;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
+  z-index: 999;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/infoText/index.vue

@@ -1,35 +1,26 @@
 <template>
   <component-wrapper>
-    <icon-wrapper>
+    <icon-wrapper :size="size">
       <icon-img
         :isActive="showInfo"
         :size="size"
         :borderColor="borderColor"
         @click.prevent="toggleShowInfo()"
-        @mouseenter="toggleShowInfo()"
-        @mouseleave="toggleShowInfo()"
+        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <svg
-          class="img-icon"
-          :width="size"
-          :height="size"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            class="img-icon"
-            d="M20.4853 3.51469C18.2188 1.24823 15.2053 0 12 0C8.79469 0 5.78123 1.24823 3.51469 3.51469C1.24823 5.78123 0 8.79469 0 12C0 15.2053 1.24823 18.2188 3.51469 20.4853C5.78123 22.7518 8.79469 24 12 24C15.2053 24 18.2188 22.7518 20.4853 20.4853C22.7518 18.2188 24 15.2053 24 12C24 8.79469 22.7518 5.78123 20.4853 3.51469ZM12 3.28125C13.4216 3.28125 14.5781 4.4378 14.5781 5.85938C14.5781 7.28095 13.4216 8.4375 12 8.4375C10.5784 8.4375 9.42188 7.28095 9.42188 5.85938C9.42188 4.4378 10.5784 3.28125 12 3.28125ZM15.2812 19.6875H8.71875V18.2812H10.125V11.9167H8.71875V10.5104H13.875V18.2812H15.2812V19.6875Z"
-            fill="#D5D5D5"
-          />
-        </svg>
+        <icon :size="size" name="info" :color="iconColor" />
       </icon-img>
       <text-overlay
         v-if="showInfo"
         :borderColor="borderColor"
         :alignText="alignText"
-      >
-        {{ text }}
+        :width="width"
+        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
+        :alignArrow="alignArrow"
+        :iconSize="size"
+        ><slot />
+        <span v-html="text"></span>
       </text-overlay>
     </icon-wrapper>
   </component-wrapper>
@@ -44,22 +35,31 @@
 //     size="20"
 //     alignText="right" // default is left
 // />
+import theme from '../../assets/theme.js'
+import styled from 'vue-styled-components'
+import icon from '../icon'
 
-import styled from "vue-styled-components"
-
-const IconWrapper = styled.div`
-  position: relative;
-`
-
-const textAttrs = { borderColor: String, alignText: String }
-const TextOverlay = styled("div", textAttrs)`
+const textAttrs = {
+  iconSize: String,
+  borderColor: String,
+  alignArrow: String,
+  alignText: String,
+  width: String,
+  halfComputedTextInfoWidth: Number
+}
+const TextOverlay = styled('div', textAttrs)`
   position: absolute;
-  top: 26px;
-  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
-  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
+  top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
+  ${(props) =>
+    props.alignArrow === 'left'
+      ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
+      : props.alignArrow === 'center'
+      ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
+      : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
+  text-align: ${(props) => props.alignText};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: max-content;
+  width: ${(props) => props.width};
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -68,32 +68,37 @@ const TextOverlay = styled("div", textAttrs)`
   color: ${(props) => props.theme.colors.white};
 
   :before {
-    content: "";
+    content: '';
     background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
-    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
-    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
+    ${(props) =>
+      props.alignArrow === 'left'
+        ? 'left:40px;'
+        : props.alignArrow == 'center'
+        ? 'left: calc(50% + 19px);'
+        : 'right:-13px;'};
     height: 8px;
     width: 8px;
     transform-origin: center center;
     transform: translate(-2em, -0.5em) rotate(45deg);
   }
+
+  span a {
+    color: #2cc0eb;
+  }
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
-const IconImg = styled("div", iconAttrs)`
-  cursor: pointer;
-  height: ${(props) => props.size + "px"};
 
-  .img-icon {
-    fill: ${(props) =>
-      props.isActive
-        ? props.borderColor
-          ? props.borderColor
-          : props.theme.colors.secondary
-        : props.theme.colors.mediumGray};
-  }
+const IconWrapper = styled('div', iconAttrs)`
+  position: relative;
+  top: 1px;
+  height: ${(props) => props.size};
+`
+const IconImg = styled('div', iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size};
 `
 
 const ComponentWrapper = styled.div`
@@ -101,38 +106,51 @@ const ComponentWrapper = styled.div`
 `
 
 export default {
-  name: "info-text",
+  name: 'info-text',
   components: {
     IconWrapper,
     TextOverlay,
     ComponentWrapper,
     IconImg,
+    icon
   },
   props: {
     text: {
-      required: true,
+      required: false
     },
     borderColor: {
       required: false,
-      default: null,
+      default: null
     },
     size: {
       required: false,
-      default: "20",
+      default: '14px'
     },
     alignText: {
       required: false,
-      default: "left", // "left" or "right"
+      default: 'left' // "left" or "right"
+    },
+    alignArrow: {
+      required: false,
+      default: 'center'
     },
+    openTrigger: {
+      required: false,
+      default: 'onClick'
+    },
+    width: {
+      required: false,
+      default: '165px'
+    }
   },
   methods: {
     toggleShowInfo() {
       this.showInfo = !this.showInfo
 
       if (this.showInfo) {
-        document.addEventListener("click", this.clickOutside)
+        document.addEventListener('click', this.clickOutside)
       } else {
-        document.removeEventListener("click", this.clickOutside)
+        document.removeEventListener('click', this.clickOutside)
       }
     },
     clickOutside(event) {
@@ -140,12 +158,24 @@ export default {
         return
       }
       this.toggleShowInfo()
-    },
+    }
   },
   data() {
     return {
-      showInfo: false,
+      showInfo: false
     }
   },
+  computed: {
+    iconColor() {
+      return this.isActive
+        ? this.borderColor
+          ? this.borderColor
+          : theme.colors.secondary
+        : theme.colors.mediumGray
+    },
+    halfComputedTextInfoWidth() {
+      return parseInt(this.width) / 2
+    }
+  }
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <container>
+  <container :inputWidth="inputWidth">
     <label-wrapper v-if="labelText">
       <label-text>
         {{ labelText }}
@@ -8,17 +8,19 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="13"
+        size="14px"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
       <input-container
+        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="placeholder"
+        :placeholder="displayedPlaceholder"
         :isError="isError"
         :inputWidth="inputWidth"
+        :inputHeight="inputHeight"
         :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
@@ -30,13 +32,25 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        v-on="$listeners"
+        :hasSlot="hasSlot"
+        :slotSize="slotSize"
       />
+      <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
+        <slot></slot>
+      </slot-container>
+
       <unit-container
-        v-if="unitName && showLinearUnitName"
+        v-if="unitName && showLinearUnitName && !hasSlot"
         :hasLength="!!textInput.length"
         :isError="isError"
         >{{ unitName }}</unit-container
       >
+      <icon
+        v-if="(isError || inputIcon) && !showLinearUnitName"
+        :class="inputIconImageClass"
+        :src="isError ? warningIcon : inputIconImage"
+      />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -74,11 +88,8 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
-
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
 
 const inputProps = {
   isError: Boolean,
@@ -89,24 +100,42 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String
+  fontColor: String,
+  hasSlot: Boolean,
+  slotSize: String,
+  inputHeight: String
 }
+
+const Container = styled('div', inputProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  position: relative;
+`
+
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : '1px solid ' + props.theme.colors.mediumGray};
-  padding: ${(props) =>
-    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
+      : '1px solid ' + props.theme.colors.grey4};
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-left: 10px;
+  padding-right: ${(props) =>
+    props.slotSize
+      ? 'calc(' + props.slotSize + ' + 10px)'
+      : props.hasUnit
+      ? '40px'
+      : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   color: ${(props) =>
     props.isError
-      ? props.theme.colors.red
+      ? props.theme.colors.grey6
+      : props.isDisabled
+      ? props.theme.colors.grey2
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
@@ -115,16 +144,24 @@ const InputContainer = styled('input', inputProps)`
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
-
+  max-height: ${(props) => props.inputHeight};
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
     outline: none;
   }
 `
+const IconProps = {
+  inputIconHeight: String
+}
+
+const Icon = styled('img', IconProps)`
+  position: absolute;
+  right: 10px;
+  top: 2px;
+`
 
 const InputWrapper = styled.span`
   position: relative;
@@ -142,6 +179,7 @@ const UnitContainer = styled('span', inputProps)`
   right: 10px;
   top: 0;
   padding-left: 10px;
+  text-align: right;
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
@@ -150,11 +188,27 @@ const UnitContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
+const SlotContainer = styled('span', inputProps)`
+  text-align: right;
+  border-left: 1px solid
+    ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.black
+        : props.theme.colors.mediumGray};
   position: absolute;
-  top: calc(100% + 1px);
+  width: ${(props) =>
+    props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
+  right: 10px;
+  top: 0;
+  padding-left: 10px;
+  color: ${(props) =>
+    props.isError
+      ? props.theme.colors.red
+      : props.hasLength
+      ? props.theme.colors.black
+      : props.theme.colors.mediumGray};
 `
 
 const LabelWrapper = styled.div`
@@ -164,8 +218,9 @@ const LabelWrapper = styled.div`
 `
 
 const LabelText = styled.div`
-  font-weight: bold;
   font-size: 13px;
+  color: ${(props) => props.theme.colors.eturnityGrey};
+  font-weight: 700;
 `
 
 export default {
@@ -178,12 +233,16 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText
+    InfoText,
+    Icon,
+    SlotContainer
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false
+      isFocused: false,
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -203,6 +262,10 @@ export default {
       required: false,
       default: null
     },
+    inputHeight: {
+      required: false,
+      default: null
+    },
     value: {
       required: true,
       default: null
@@ -253,7 +316,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: 'right'
+      default: 'left'
     },
     minNumber: {
       required: false,
@@ -266,13 +329,50 @@ export default {
     numberToStringEnabled: {
       required: false,
       default: true
+    },
+    inputIcon: {
+      require: false,
+      type: Boolean,
+      default: false
+    },
+    inputIconImage: {
+      require: false,
+      type: String,
+      default: ''
+    },
+    allowNegative: {
+      required: false,
+      default: true
+    },
+    inputIconImageClass: {
+      require: false,
+      type: Array,
+      default: () => []
+    },
+    slotSize: {
+      required: false
+    }
+  },
+  computed: {
+    displayedPlaceholder() {
+      if (this.placeholder) return this.placeholder
+      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
+    },
+    hasSlot() {
+      return !!this.$slots.default
+    },
+    computedSlotSize() {
+      return this.slotSize || this.$slots['default'][0].elm.clientWidth
     }
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event)) {
+      if (isNaN(event) || event == '') {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
+      if (!this.allowNegative) {
+        event = Math.abs(event)
+      }
       this.$emit('input-change', event)
     },
     onEvaluateCode(val) {
@@ -305,6 +405,8 @@ export default {
           value: evaluated,
           numberPrecision: this.numberPrecision
         })
+      } else if (typeof evaluated === 'number') {
+        evaluated = evaluated.toFixed(this.numberPrecision)
       }
       return evaluated
     },
@@ -321,8 +423,8 @@ export default {
         })
       }
       let adjustedMinValue =
-        value && value.length
-          ? value
+        evaluatedInput && evaluatedInput.length
+          ? evaluatedInput
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
           : ''
@@ -336,6 +438,7 @@ export default {
       this.$nextTick(() => {
         this.$refs.inputField1.$el.select()
       })
+      this.$emit('input-focus')
     },
     formatWithCurrency(value) {
       let adjustedMinValue =
@@ -352,6 +455,7 @@ export default {
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
+        //return input + ' ' + unit
         return input + ' ' + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
         return ''

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

@@ -10,39 +10,43 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          :size="fontSize ? fontSize : '16'"
+          :size="fontSize ? fontSize : '16px'"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <icon-container>
-        <input-container
-          :placeholder="placeholder"
-          :isError="isError"
-          :inputWidth="inputWidth"
-          :minWidth="minWidth"
-          :value="value"
-          @input="onChangeHandler"
-          @blur="onInputBlur"
-          :noBorder="noBorder"
-          :disabled="disabled"
-          :isDisabled="disabled"
-          :fontSize="fontSize"
-          :inputType="inputType"
-          :type="inputTypeData"
-        />
-        <icon-wrapper
-          v-if="inputType === 'password' && !isError"
-          @click="toggleShowPassword()"
-          size="20px"
-        >
-          <icon name="current_variant" size="20px" />
-        </icon-wrapper>
-        <icon-wrapper v-if="isError" size="16px">
-          <icon name="warning" size="16px" cursor="default" />
-        </icon-wrapper>
-      </icon-container>
+      <input-error-wrapper>
+        <icon-container>
+          <input-container
+            :placeholder="placeholder"
+            :isError="isError"
+            :inputWidth="inputWidth"
+            :minWidth="minWidth"
+            :value="value"
+            @input="onChangeHandler"
+            @blur="onInputBlur"
+            :noBorder="noBorder"
+            :disabled="disabled"
+            :isDisabled="disabled"
+            :fontSize="fontSize"
+            :inputType="inputType"
+            :type="inputTypeData"
+          />
+          <icon-wrapper
+            v-if="inputType === 'password' && !isError"
+            @click="toggleShowPassword()"
+            size="20px"
+          >
+            <icon name="current_variant" size="20px" />
+          </icon-wrapper>
+          <icon-wrapper v-if="isError" size="16px">
+            <icon name="warning" size="16px" cursor="default" />
+          </icon-wrapper>
+        </icon-container>
+        <error-message v-if="isError && errorMessage">{{
+          errorMessage
+        }}</error-message>
+      </input-error-wrapper>
     </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
 </template>
 
@@ -50,6 +54,7 @@
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
+import ErrorMessage from '../../errorMessage'
 
 const Container = styled.div`
   width: 100%;
@@ -58,8 +63,9 @@ const Container = styled.div`
 
 const labelAttrs = { fontSize: String }
 const InputLabel = styled('div', labelAttrs)`
-  font-weight: bold;
+  color: ${(props) => props.theme.colors.eturnityGrey};
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
 `
 
 const LabelWrapper = styled.div`
@@ -70,6 +76,13 @@ const LabelWrapper = styled.div`
   justify-content: start;
 `
 
+const InputErrorWrapper = styled.div`
+  display: inline-grid;
+  grid-template-row: auto auto;
+  grid-gap: 0px;
+  align-items: center;
+`
+
 const inputProps = {
   isError: Boolean,
   inputWidth: String,
@@ -85,9 +98,7 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : props.hasLength
-      ? '1px solid ' + props.theme.colors.black
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.isError
       ? '11px 25px 11px 10px'
@@ -98,7 +109,11 @@ const InputContainer = styled('input', inputProps)`
   position: relative;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) =>
-    props.isError ? props.theme.colors.red : props.theme.colors.black};
+    props.isError
+      ? props.theme.colors.grey6
+      : props.isDisabled
+      ? props.theme.colors.grey2
+      : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   box-sizing: border-box; // to allow width of 100% with padding
@@ -108,8 +123,7 @@ const InputContainer = styled('input', inputProps)`
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
 
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -127,13 +141,6 @@ const InputWrapper = styled('div', inputAttrs)`
     props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
 const IconAttrs = { size: String }
 const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
@@ -177,7 +184,8 @@ export default {
     LabelWrapper,
     Icon,
     IconWrapper,
-    IconContainer
+    IconContainer,
+    InputErrorWrapper
   },
   data() {
     return {

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

@@ -12,7 +12,7 @@
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
-        <info-text v-if="item.infoText" :text="item.infoText" size="16" />
+        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
       </label-container>
       <image-container v-if="item.img">
         <radio-image :src="item.img" />

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

@@ -25,8 +25,9 @@
 //   :value="companyName"
 //   :disabled="true"
 //   inputWidth="250px"
+//   @on-change="function($event)"
 // />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const Container = styled.div`
   width: 100%;
@@ -34,15 +35,15 @@ const Container = styled.div`
 `
 
 const inputAttrs = { isDisabled: Boolean, inputWidth: String }
-const InputContainer = styled("input", inputAttrs)`
+const InputContainer = styled('input', inputAttrs)`
   border: 1px solid ${(props) => props.theme.colors.mediumGray};
   padding: 11px 30px 11px 10px;
   border-radius: 4px;
-  font-size: 16px;
+  font-size: 13px;
   color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   box-sizing: border-box;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background: ${(props) => props.theme.colors.white} !important;
   &::placeholder {
     color: ${(props) => props.theme.colors.darkGray};
@@ -65,33 +66,33 @@ const InputWrapper = styled.span`
 `
 
 export default {
-  name: "search-input",
+  name: 'search-input',
   components: {
     InputContainer,
     InputWrapper,
-    Container,
+    Container
   },
   props: {
     value: {
-      required: true,
+      required: true
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     placeholder: {
       required: false,
-      default: "",
+      default: ''
     },
     inputWidth: {
       required: false,
-      default: null,
-    },
+      default: null
+    }
   },
   methods: {
     onChangeHandler(event) {
-      this.$emit("on-change", event)
-    },
-  },
+      this.$emit('on-change', event)
+    }
+  }
 }
 </script>

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="16"
+          size="16px"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
@@ -23,6 +23,7 @@
         :disabled="isDisabled"
         :fontSize="fontSize"
         @input="onChangeHandler"
+        :resize="resize"
       />
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
@@ -44,9 +45,11 @@
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
+// .   fontSize="13px"
 // />
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
 
 const containerProps = { inputWidth: String }
 const Container = styled('div', containerProps)`
@@ -72,7 +75,7 @@ const InputContainer = styled('textarea', inputProps)`
   border: ${(props) =>
     props.isError
       ? '1px solid ' + props.theme.colors.red
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
@@ -84,8 +87,7 @@ const InputContainer = styled('textarea', inputProps)`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -107,13 +109,6 @@ const InputWrapper = styled('div', inputAttrs)`
       : 'auto 1fr'};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
 const labelAttrs = { fontSize: String }
 const InputLabel = styled('div', labelAttrs)`
   font-weight: bold;
@@ -175,6 +170,10 @@ export default {
     inputWidth: {
       required: false,
       default: null
+    },
+    resize: {
+      required: false,
+      default: 'none'
     }
   },
   methods: {

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14"
+          size="14px"
           :alignText="infoTextAlign"
         />
       </label-container>
@@ -46,7 +46,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14"
+          size="14px"
           :alignText="infoTextAlign"
         />
       </label-container>

package/src/components/pageSubtitle/index.vue

@@ -6,7 +6,7 @@
     <info-text
       :text="infoText"
       v-if="!!infoText"
-      size="14"
+      size="14px"
       borderColor="#ccc"
       :alignText="alignInfoText"
     />

package/src/helpers/numberConverter.js

@@ -4,6 +4,9 @@ export const stringToNumber = ({
   allowNegative
 }) => {
   // This is for saving. It converts our input string to a readable number
+  if (value === undefined) {
+    value = ''
+  }
   let newVal = value.toString()
   const selectedLang = localStorage.getItem('lang')
   // The first replace will replace not allowed characters with a blank
@@ -91,6 +94,7 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : 'en-US'
+  value=parseFloat(value)
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,
     maximumFractionDigits: numberPrecision