@eturnity/eturnity_reusable_components 1.2.19-EPDM-5262.4 → 1.2.19-EPDM-3412.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-EPDM-5262.4",
+  "version": "1.2.19-EPDM-3412.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,54 +2,87 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="10" 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 size="15" text="infoText ceci est le text" openTrigger="onClick"></info-text>
-        </InputAnnexContainer>
-      </input-number>
+      <modal backdrop="dark" :isLoading="false" :isOpen="true">
+        <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>
       <br />
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="inputValue"
+        label="My Label Text"
+        infoTextMessage="This is my test message"
+        infoTextAlign="right"
+        labelAlign="right"
+        :disabled="false"
+      />
       <br />
+      
+  <p>InputText</p>
+   <input-text
+     placeholder="Company name"
+     :value="inputValue"
+     :isError="true"
+     errorMessage="This is my error message"
+     infoTextAlign="right" 
+     infoTextMessage="My info message"
+     label="Question 5"
+     alignItems="vertical"
+     inputWidth="250px"
+     minWidth="100px"
+   />
+   <br/>
       <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-        >unit</input-number
-      >
-      <br />
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
+      />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-
-import InputNumber from '@/components/inputs/inputNumber'
-import infoText from '@/components/infoText'
+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 Checkbox from "@/components/inputs/checkbox"
+import PageSubtitle from "@/components/pageSubtitle"
+import Spinner from "@/components/spinner"
+import ExternalButton from "@/components/buttons/externalButton"
+import InputText from "@/components/inputs/inputText"
 // import TableDropdown from "@/components/tableDropdown"
-const InputAnnexContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 10px;
-`
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -60,20 +93,27 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
+    MainTable,
+    ThreeDots,
+    Toggle,
     InputNumber,
-    infoText,
-    InputAnnexContainer
-    // TableDropdown,
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    InputText,
+    ExternalButton,
+    Modal,
   },
   data() {
     return {
+      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
         number_format_precision: 4,
         number_min_allowed: 0,
         number_max_allowed: 10,
-        unit_short_name: 'cm'
+        unit_short_name: 'cm',
       },
       dropdownOpen: false,
       isChecked: false,
@@ -81,50 +121,53 @@ export default {
         {
           name: 'Option 1',
           value: 'option_1',
-          disabled: true
+          disabled: true,
         },
         {
           name: 'Option 2',
-          value: 'option_2'
+          value: 'option_2',
         },
         {
           name: 'Option 3',
-          value: 'option_3'
+          value: 'option_3',
         },
         {
           name: 'Option 4',
-          value: 'option_4'
-        }
+          value: 'option_4',
+        },
       ],
       itemOptions: [
         {
           display_name: 'Test 1',
           company_item_number: '123',
           model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1
+          id: 1,
         },
         {
           display_name: 'Test 2',
           company_item_number: '1234',
           model: 'BTB-123',
-          id: 2
+          id: 2,
         },
         {
           display_name: 'Test 3',
           company_item_number: '12345',
           model: 'BTB-543',
-          id: 3
+          id: 3,
         },
         {
           display_name: 'Test 4',
           company_item_number: '123456',
           model: 'BTB-4930',
-          id: 4
-        }
-      ]
+          id: 4,
+        },
+      ],
     }
   },
   methods: {
+    keydownHandler(e) {
+      console.log('test', e)
+    },
     getTheme() {
       return theme
     },
@@ -146,21 +189,21 @@ export default {
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'display_name'
-          })
+            value: 'display_name',
+          }),
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'company_item_number'
-          })
+            value: 'company_item_number',
+          }),
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'model'
-          })
-        }
+            value: 'model',
+          }),
+        },
       ]
       return items
     },

package/src/assets/theme.js

@@ -1,34 +1,34 @@
 const theme = {
   colors: {
-    primary: "#48a2d0",
-    secondary: "#fdb813",
-    tertiary: "#d5d5d5",
-    black: "#353535",
-    yellow: "#fdb813",
-    darkGray: "#818181",
-    gray1: "#666",
-    mediumGray: "#d5d5d5",
-    lightGray: "#f2f2f2",
-    white: "#fff",
-    blue: "#48a2d0",
-    red: "#ff5656",
-    blue1: "#e4efff",
-    grey1: "#666",
-    grey2: "#c4c4c4",
-    grey3: "#b2b9c5",
-    grey4: "#ebeef4",
-    grey5: "#fafafa",
-    green: "#99db0c",
-    disabled: "#dfe1e1",
+    primary: '#48a2d0',
+    secondary: '#fdb813',
+    tertiary: '#d5d5d5',
+    black: '#353535',
+    yellow: '#fdb813',
+    darkGray: '#818181',
+    gray1: '#666',
+    mediumGray: '#d5d5d5',
+    lightGray: '#f2f2f2',
+    white: '#fff',
+    blue: '#48a2d0',
+    red: '#ff5656',
+    blue1: '#e4efff',
+    grey1: '#666',
+    grey2: '#c4c4c4',
+    grey3: '#b2b9c5',
+    grey4: '#dee2eb',
+    grey5: '#fafafa',
+    green: '#99db0c',
+    disabled: '#dfe1e1'
   },
   screen: {
-    mobileSmall: "345px",
-    mobile: "425px",
-    mobileLarge: "530px",
-    tablet: "768px",
-    tabletLarge: "950px",
+    mobileSmall: '345px',
+    mobile: '425px',
+    mobileLarge: '530px',
+    tablet: '768px',
+    tabletLarge: '950px'
   },
-  borderRadius: "4px",
+  borderRadius: '4px'
 }
 
 export default theme

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//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: 200px;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
+  z-index: 99;
+  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/icon/index.vue

@@ -37,7 +37,8 @@ const IconImage = styled('div', IconImageProps)`
     height: ${(props) => props.size};
   }
   svg > path {
-    ${(props) => props.color && `fill: ${props.color};`}
+    ${(props) =>
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
   }
   &:hover > svg > path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}

package/src/components/infoText/index.vue

@@ -1,21 +1,33 @@
 <template>
   <component-wrapper>
-    <icon-wrapper :size="size">
+    <icon-wrapper>
       <icon-img
         :isActive="showInfo"
         :size="size"
         :borderColor="borderColor"
         @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseenter="toggleShowInfo()"
+        @mouseleave="toggleShowInfo()"
       >
-        <icon :size="size + 'px'" name="info" :color="iconColor" />
+        <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-img>
       <text-overlay
         v-if="showInfo"
         :borderColor="borderColor"
         :alignText="alignText"
-        :width="width"
       >
         {{ text }}
       </text-overlay>
@@ -32,20 +44,22 @@
 //     size="20"
 //     alignText="right" // default is left
 // />
-import theme from '@/assets/theme.js'
-import styled from 'vue-styled-components'
-import icon from '../icon'
 
-const textAttrs = { borderColor: String, alignText: String, width:String }
-const TextOverlay = styled('div', textAttrs)`
+import styled from "vue-styled-components"
+
+const IconWrapper = styled.div`
+  position: relative;
+`
+
+const textAttrs = { borderColor: String, alignText: String }
+const TextOverlay = styled("div", textAttrs)`
   position: absolute;
   top: 26px;
-  right: ${(props) => (props.alignText === 'left' ? '-10px' : 'inherit')};
-  left: ${(props) => (props.alignText === 'left' ? 'inherit' : '-10px')};
-  text-align: ${(props) => props.alignText};
+  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
+  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: ${(props) => props.width ? props.width : "max-content"};
+  width: max-content;
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -54,12 +68,12 @@ 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' ? '-14px' : 'inherit')};
-    left: ${(props) => (props.alignText === 'left' ? 'inherit' : '40px')};
+    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
+    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -68,15 +82,18 @@ const TextOverlay = styled('div', textAttrs)`
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
-
-const IconWrapper = styled('div', iconAttrs)`
-  position: relative;
-  top: 1px;
-  height: ${(props) => props.size}px;
-`
-const IconImg = styled('div', iconAttrs)`
+const IconImg = styled("div", iconAttrs)`
   cursor: pointer;
-  height: ${(props) => props.size}px;
+  height: ${(props) => props.size + "px"};
+
+  .img-icon {
+    fill: ${(props) =>
+      props.isActive
+        ? props.borderColor
+          ? props.borderColor
+          : props.theme.colors.secondary
+        : props.theme.colors.mediumGray};
+  }
 `
 
 const ComponentWrapper = styled.div`
@@ -84,44 +101,38 @@ const ComponentWrapper = styled.div`
 `
 
 export default {
-  name: 'info-text',
+  name: "info-text",
   components: {
     IconWrapper,
     TextOverlay,
     ComponentWrapper,
     IconImg,
-    icon
   },
   props: {
     text: {
-      required: true
+      required: true,
     },
     borderColor: {
       required: false,
-      default: null
+      default: null,
     },
     size: {
       required: false,
-      default: '14'
+      default: "20",
     },
     alignText: {
       required: false,
-      default: 'left' // "left" or "right"
+      default: "left", // "left" or "right"
     },
-    openTrigger:{
-      required:false,
-      default: "onClick"
-    },
-    width:{required:false}
   },
   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) {
@@ -129,21 +140,12 @@ 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
-    }
-  }
 }
-</script>
+</script>

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

@@ -33,7 +33,7 @@
 //     backgroundColor="red"
 //     :isDisabled="true"
 // />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const ComponentWrapper = styled.div`
   min-height: 18px;
@@ -45,34 +45,33 @@ const containerAttrs = {
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean,
+  isDisabled: Boolean
 }
-const Container = styled("label", containerAttrs)`
+const Container = styled('label', containerAttrs)`
   display: grid;
-  grid-template-columns: ${(props) => (props.hasLabel ? "18px auto" : "18px")};
+  grid-template-columns: ${(props) => (props.hasLabel ? '18px auto' : '18px')};
   grid-gap: 16px;
   align-content: center;
-  /* align-items: center; */
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 16px;
   user-select: none;
 
   .checkmark {
     position: absolute;
     height: ${(props) =>
-      props.size === "medium"
-        ? "25px"
-        : props.size === "small"
-        ? "16px"
-        : "25px"};
+      props.size === 'medium'
+        ? '25px'
+        : props.size === 'small'
+        ? '16px'
+        : '25px'};
     width: ${(props) =>
-      props.size === "medium"
-        ? "25px"
-        : props.size === "small"
-        ? "16px"
-        : "25px"};
+      props.size === 'medium'
+        ? '25px'
+        : props.size === 'small'
+        ? '16px'
+        : '25px'};
     background-color: ${(props) =>
       props.isChecked
         ? props.backgroundColor
@@ -80,7 +79,7 @@ const Container = styled("label", containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : "#fff"};
+        : '#fff'};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -91,34 +90,34 @@ const Container = styled("label", containerAttrs)`
           : props.theme.colors.mediumGray};
 
     &:after {
-      content: "";
+      content: '';
       position: absolute;
-      display: ${(props) => (props.isChecked ? "block" : "none")};
+      display: ${(props) => (props.isChecked ? 'block' : 'none')};
     }
   }
 
   .checkmark:after {
     left: ${(props) =>
-      props.size === "medium" ? "9px" : props.size === "small" ? "5px" : "9px"};
+      props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
     top: ${(props) =>
-      props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
+      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
     width: ${(props) =>
-      props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
+      props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
     height: ${(props) =>
-      props.size === "medium"
-        ? "10px"
-        : props.size === "small"
-        ? "6px"
-        : "10px"};
+      props.size === 'medium'
+        ? '10px'
+        : props.size === 'small'
+        ? '6px'
+        : '10px'};
     border: solid
       ${(props) =>
         props.checkColor ? props.checkColor : props.theme.colors.white};
     border-width: ${(props) =>
-      props.size === "medium"
-        ? "0 3px 3px 0"
-        : props.size === "small"
-        ? "0 2px 2px 0"
-        : "0 3px 3px 0"};
+      props.size === 'medium'
+        ? '0 3px 3px 0'
+        : props.size === 'small'
+        ? '0 2px 2px 0'
+        : '0 3px 3px 0'};
     transform: rotate(45deg);
   }
 `
@@ -135,49 +134,49 @@ const InputCheckbox = styled.input`
 const LabelText = styled.div`
   font-size: 13px;
   display: grid;
-  align-items: center;
+  align-items: flex-start;
   min-height: 18px;
 `
 
 export default {
-  name: "checkbox",
+  name: 'checkbox',
   components: {
     ComponentWrapper,
     Container,
     InputCheckbox,
-    LabelText,
+    LabelText
   },
   props: {
     label: {
       required: false,
-      default: "",
+      default: ''
     },
     isChecked: {
       required: true,
-      default: false,
+      default: false
     },
     checkColor: {
-      required: false,
+      required: false
     },
     size: {
       required: false,
-      default: "medium", // small, medium
+      default: 'medium' // small, medium
     },
     backgroundColor: {
-      required: false,
+      required: false
     },
     isDisabled: {
       required: false,
-      default: false,
-    },
+      default: false
+    }
   },
   methods: {
     onChangeHandler(value) {
       if (this.isDisabled) {
         return
       }
-      this.$emit("on-event-handler", value)
-    },
-  },
+      this.$emit('on-event-handler', value)
+    }
+  }
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <container :inputWidth="inputWidth">
+  <container>
     <label-wrapper v-if="labelText">
       <label-text>
         {{ labelText }}
@@ -8,15 +8,16 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="14"
+        size="13"
         :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"
         :minWidth="minWidth"
@@ -30,19 +31,19 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        :hasSlot="hasSlot"
-        :slotSize="slotSize"
+        v-on="$listeners"
       />
-      <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
-        <slot></slot>
-      </slot-container>
-
       <unit-container
-        v-if="unitName && showLinearUnitName && !hasSlot"
+        v-if="unitName && showLinearUnitName"
         :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>
@@ -80,6 +81,12 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
 
 const inputProps = {
   isError: Boolean,
@@ -90,16 +97,8 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String,
-  hasSlot: Boolean,
-  slotSize: String
+  fontColor: String
 }
-
-const Container = styled('div', inputProps)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  position: relative;
-`
-
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
@@ -107,15 +106,8 @@ const InputContainer = styled('input', inputProps)`
       : props.noBorder
       ? 'none'
       : '1px solid ' + props.theme.colors.mediumGray};
-  padding-top: 11px;
-  padding-bottom: 11px;
-  padding-left: 10px;
-  padding-right: ${(props) =>
-    props.slotSize
-      ? 'calc(' + props.slotSize + ' + 10px)'
-      : props.hasUnit
-      ? '40px'
-      : '5px'};
+  padding: ${(props) =>
+    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
@@ -141,6 +133,15 @@ const InputContainer = styled('input', inputProps)`
     outline: none;
   }
 `
+const IconProps = {
+  inputIconHeight: String
+}
+
+const Icon = styled('img', IconProps)`
+  position: absolute;
+  right: 10px;
+  top: 2px;
+`
 
 const InputWrapper = styled.span`
   position: relative;
@@ -158,7 +159,6 @@ const UnitContainer = styled('span', inputProps)`
   right: 10px;
   top: 0;
   padding-left: 10px;
-  text-align: right;
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
@@ -167,34 +167,14 @@ const UnitContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-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;
-  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 ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
+// const ErrorMessage = styled.div`
+//   margin-top: 5px;
+//   line-height: 1;
+//   text-transform: none;
+//   font-size: 10px;
+//   color: ${(props) => props.theme.colors.red};
+//   position: absolute;
+// `
 
 const LabelWrapper = styled.div`
   display: flex;
@@ -217,13 +197,21 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    SlotContainer,
-    InfoText
+    InfoText,
+    Icon
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false
+      isFocused: false,
+      warningIcon: warningIcon
+    }
+  },
+  computed: {
+    displayedPlaceholder() {
+      if (this.placeholder) return this.placeholder
+      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
     }
   },
   props: {
@@ -307,22 +295,25 @@ export default {
       required: false,
       default: true
     },
-    slotSize: {
-      required: false
-    }
-  },
-  computed: {
-    hasSlot() {
-      console.log(this.$slots.default)
-      return !!this.$slots.default
+    inputIcon: {
+      require: false,
+      type: Boolean,
+      default: false
+    },
+    inputIconImage: {
+      require: false,
+      type: String,
+      default: ''
     },
-    computedSlotSize() {
-      return this.slotSize || this.$slots['default'][0].elm.clientWidth
+    inputIconImageClass: {
+      require: false,
+      type: Array,
+      default: () => []
     }
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event)) {
+      if (isNaN(event) || event=="") {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
       this.$emit('input-change', event)
@@ -352,10 +343,12 @@ export default {
         }
       })
       let evaluated = eval(formatted.join(''))
-      evaluated = stringToNumber({
-        value: evaluated,
-        numberPrecision: this.numberPrecision
-      })
+      if (typeof evaluated === 'string') {
+        evaluated = stringToNumber({
+          value: evaluated,
+          numberPrecision: this.numberPrecision
+        })
+      }
       return evaluated
     },
     onInputBlur(e) {
@@ -386,6 +379,7 @@ export default {
       this.$nextTick(() => {
         this.$refs.inputField1.$el.select()
       })
+      this.$emit('input-focus')
     },
     formatWithCurrency(value) {
       let adjustedMinValue =

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

@@ -14,6 +14,7 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
+      <input-error-wrapper>
       <input-container
         :placeholder="placeholder"
         :isError="isError"
@@ -26,20 +27,27 @@
         :isDisabled="disabled"
         :fontSize="fontSize"
       />
+      <error-message v-if="isError">{{ errorMessage }}</error-message>
+      </input-error-wrapper>
     </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
 </template>
 
 <script>
 import styled from "vue-styled-components"
 import InfoText from "../../infoText"
+import ErrorMessage from '../../errorMessage'
 
 const Container = styled.div`
   width: 100%;
   position: relative;
 `
-
+const InputErrorWrapper = styled.div`
+  display: inline-grid;
+  grid-template-row: auto auto;
+  grid-gap: 0px;
+  align-items: center;
+`
 const labelAttrs = { fontSize: String }
 const InputLabel = styled("div", labelAttrs)`
   font-weight: bold;
@@ -104,13 +112,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);
-`
-
 export default {
   // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
   // To use:
@@ -136,6 +137,7 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
+    InputErrorWrapper,
     LabelWrapper,
   },
   props: {

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

@@ -23,6 +23,7 @@
         :disabled="isDisabled"
         :fontSize="fontSize"
         @input="onChangeHandler"
+        :resize="resize"
       />
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
@@ -174,7 +175,11 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null
+      default: null,
+    },
+    resize:{
+      required:false,
+      default: "none"
     }
   },
   methods: {

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

@@ -3,15 +3,18 @@
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
+    :backdrop="backdrop"
   >
     <modal-container @click.stop>
-      <spinner v-if="isLoading" size="50px" :fullWidth="true" />
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
       <close-button
         v-if="!hideClose"
         @click.native="onCloseModal()"
         class="close"
       />
-      <slot />
     </modal-container>
   </page-wrapper>
 </template>
@@ -28,7 +31,12 @@ import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
-const pageAttrs = { isOpen: Boolean }
+const contentAttrs = { visible: Boolean }
+const ContentContainer = styled('div', contentAttrs)`
+  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
+`
+
+const pageAttrs = { isOpen: Boolean, backdrop: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
@@ -36,7 +44,10 @@ const PageWrapper = styled('div', pageAttrs)`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: ${(props) =>
+    props.backdrop == 'dark'
+      ? 'rgba(0, 0, 0, 0.4)'
+      : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
 
@@ -98,7 +109,8 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner
+    Spinner,
+    ContentContainer
   },
   props: {
     isOpen: {
@@ -116,6 +128,10 @@ export default {
     hideClose: {
       required: false,
       default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
     }
   },
   methods: {
@@ -135,4 +151,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/modals/modal/modal.stories.js

@@ -26,5 +26,6 @@ export const Default = Template.bind({
   preventOutsideClose: true,
   isLoading: false,
   hideClose: false,
-});
+  backdrop: 'dark',
+})
 Default.args = {};

package/src/components/spinner/index.vue

@@ -7,7 +7,7 @@
       />
     </container>
   </spinner-container>
-  <container v-else>
+  <container v-else :limitedToModal="limitedToModal">
     <spinner-wrapper
       :size="size"
       :src="require('../../assets/icons/black_spinner.svg')"
@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -32,34 +32,41 @@ const SpinnerContainer = styled.div`
   justify-items: center;
   z-index: 100;
 `
-
-const Container = styled.div`
+const containerAttrs = { limitedToModal: Boolean }
+const Container = styled('div', containerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
+  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
+  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+  width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled("img", spinnerAttrs)`
-  width: ${(props) => (props.size ? props.size : "60px")};
+const SpinnerWrapper = styled('img', spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : '60px')};
 `
 
 export default {
-  name: "spinner",
+  name: 'spinner',
   components: {
     Container,
     SpinnerWrapper,
-    SpinnerContainer,
+    SpinnerContainer
   },
   props: {
     fullWidth: {
       required: false,
-      default: false,
+      default: false
     },
-    size: {
+    limitedToModal: {
       required: false,
-      default: null,
+      default: false
     },
-  },
+    size: {
+      required: false,
+      default: null
+    }
+  }
 }
-</script>
+</script>

package/src/helpers/numberConverter.js

@@ -4,20 +4,21 @@ 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
   if (
     selectedLang === 'de-DE' ||
+    selectedLang === 'de-de' ||
     selectedLang === 'no-no' ||
     selectedLang === 'da-dk' ||
     selectedLang === 'de-lu' ||
     selectedLang === 'de-be' ||
     selectedLang === 'es-es' ||
-    selectedLang === 'de'
+    selectedLang === 'de' ||
+    selectedLang === 'it' ||
+    selectedLang === 'nl-nl' ||
+    selectedLang === 'nl-be'
   ) {
     // replace dots with blank, and commas with a dot: 1.234,56 --> 1234.56
     if (allowNegative) {
@@ -45,9 +46,15 @@ export const stringToNumber = ({
   ) {
     // replace ' with blank: 1'234.56 --> 1234.56
     if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/['\s]/g, '')
+      newVal = newVal
+        .replace(/[^\d-.,']/g, '')
+        .replace(/[,\s]/, '')
+        .replace(/['\s]/g, '')
     } else {
-      newVal = newVal.replace(/[^\d.,']/g, '').replace(/['\s]/g, '')
+      newVal = newVal
+        .replace(/[^\d.,']/g, '')
+        .replace(/[,\s]/, '')
+        .replace(/['\s]/g, '')
     }
   } else if (
     selectedLang === 'fr-fr' ||