@eturnity/eturnity_reusable_components 1.2.18 → 1.2.19-3d-master.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.18",
+  "version": "1.2.19-3d-master.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,6 +2,9 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
+<<<<<<< HEAD
+=======
+      <iconWrapper name="bell"/>
       <modal backdrop="dark" :isLoading="false" :isOpen="true">
         <main-table titleText="My Table">
           <thead>
@@ -42,32 +45,77 @@
         :disabled="false"
       />
       <br />
+>>>>>>> EPDM-5448
       <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
         :value="inputValue"
-        @input-change="onInputChange($event)"
-      />
+        @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 />
-      <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"
+      
+  <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
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
       />
-      <external-button text="Click me!" minWidth="500px" />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
+<<<<<<< HEAD
+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 { 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 iconWrapper from '@/components/iconWrapper'
 import Toggle from '@/components/inputs/toggle'
 import InputNumber from '@/components/inputs/inputNumber'
 import Checkbox from '@/components/inputs/checkbox'
@@ -75,7 +123,13 @@ import PageSubtitle from '@/components/pageSubtitle'
 import Spinner from '@/components/spinner'
 import ExternalButton from '@/components/buttons/externalButton'
 import Modal from '@/components/modals/modal'
+>>>>>>> EPDM-5448
 // 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;
@@ -86,18 +140,18 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
     InputNumber,
     PageSubtitle,
     Spinner,
     Checkbox,
+    InputText,
     ExternalButton,
+    iconWrapper,
     Modal,
   },
   data() {
     return {
+      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -156,6 +210,9 @@ export default {
     }
   },
   methods: {
+    keydownHandler(e) {
+      console.log('test', e)
+    },
     getTheme() {
       return theme
     },
@@ -205,8 +262,8 @@ export default {
         item = '-'
       }
       return item
-    },
-  },
+    }
+  }
 }
 </script>
 

package/src/assets/svgIcons/base_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/margin_tool.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
+<rect x="4.5" y="4.5" width="5" height="5" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/obstacle_tool.svg

@@ -1,4 +1,4 @@
-<svg fill="none" height="23" viewbox="6 12 34 23" width="34" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
 <mask height="14" id="mask0_6458_86453" maskunits="userSpaceOnUse" style="mask-type:alpha" width="14" x="13" y="13">
 <rect fill="#FF5656" height="14" width="14" x="13" y="13"></rect>
 </mask>

package/src/assets/svgIcons/redo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.51904 2H10.519V4H4.51904V2Z" fill="#555D61"/>
+<path d="M4.51904 8H8.51904V10H4.51904V8Z" fill="#555D61"/>
+<path d="M10.519 5.92321L13.4807 2.96161L10.519 0L10.519 5.92321Z" fill="#555D61"/>
+<path d="M7.98391 8C7.29229 9.1956 5.99961 10 4.51904 10C2.3099 10 0.519043 8.20914 0.519043 6C0.519043 3.79086 2.3099 2 4.51904 2C5.99961 2 7.2923 2.8044 7.98391 4H4.51904C3.41447 4 2.51904 4.89543 2.51904 6C2.51904 7.10457 3.41447 8 4.51904 8H7.98391Z" fill="#555D61"/>
+</svg>

package/src/assets/svgIcons/roof_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 10 L7 0 L14 10" fill="none" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/undo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.48096 2H3.48096V4H9.48096V2Z" fill="white"/>
+<path d="M9.48096 8H5.48096V10H9.48096V8Z" fill="white"/>
+<path d="M3.48096 5.92321L0.519349 2.96161L3.48096 0L3.48096 5.92321Z" fill="white"/>
+<path d="M6.01609 8C6.70771 9.1956 8.00039 10 9.48096 10C11.6901 10 13.481 8.20914 13.481 6C13.481 3.79086 11.6901 2 9.48096 2C8.00039 2 6.7077 2.8044 6.01609 4H9.48096C10.5855 4 11.481 4.89543 11.481 6C11.481 7.10457 10.5855 8 9.48096 8H6.01609Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -19,6 +19,8 @@ const theme = {
     grey4: '#dee2eb',
     grey5: '#fafafa',
     green: '#99db0c',
+    transparentWhite1:'#ffffff32',
+    transparentBlack1:'#263238e6',
     disabled: '#dfe1e1'
   },
   screen: {

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

@@ -1,6 +1,6 @@
 <template>
-  <wrapper :isDisabled="isDisabled" :size="size">
     <icon-image
+      :disabled="disabled"
       :size="size"
       :color="color"
       :hoveredColor="hoveredColor"
@@ -8,7 +8,6 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
-  </wrapper>
 </template>
 
 <script>
@@ -23,18 +22,17 @@
 
 import styled from 'vue-styled-components'
 
-const wrapperAttrs = { isDisabled: Boolean, size: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
+const IconImageProps = { color: String, hoveredColor: String, size: String ,disabled:Boolean}
+const IconImage = styled('div', IconImageProps)`
+  display: inline-flex;
   width: ${(props) => props.size};
   height: ${(props) => props.size};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-`
-const IconImageProps = { color: String, hoveredColor: String, size: String }
-const IconImage = styled('div', IconImageProps)`
+  justify-content:center;
+  align-items:center;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   svg {
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
+    width: 100%;
+    height: 100%;
   }
   svg > path {
     ${(props) =>
@@ -48,11 +46,10 @@ const IconImage = styled('div', IconImageProps)`
 export default {
   name: 'icon',
   components: {
-    Wrapper,
     IconImage
   },
   props: {
-    isDisabled: {
+    disabled: {
       required: false,
       default: false
     },

package/src/components/iconWrapper/index.vue

@@ -0,0 +1,116 @@
+<template>
+    <Wrapper 
+    :disabled="disabled" 
+    :size="size" 
+    :backgroundColor="backgroundColor" 
+    :borderRadius="borderRadius"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    >
+        <icon :disabled="disabled" 
+            :size="iconSize" 
+            :name="name" 
+            :color="iconColor" 
+            :hoveredColor="hoveredIconColor" />
+        <caret v-if="hasCaret">
+          <iconWrapper :disabled="disabled" 
+            size="10px" 
+            name="arrow_down" 
+            :iconColor="iconColor" 
+            :hoveredBackgroundColor="hoveredIconColor"
+            borderRadius="1px"
+            />  
+        </caret>
+    </Wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+  
+  import styled from 'vue-styled-components'
+  import icon from '../icon'
+  const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    position:relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    justify-content:center;
+    align-items:center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
+    &:hover{
+        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
+    }
+  `
+  const caret=styled.div`
+  position:absolute;
+  bottom:3px;
+  right:2px;
+  height:10px;
+  `
+
+  export default {
+    name: 'iconWrapper',
+    components: {
+      Wrapper,
+      icon,
+      caret
+    },
+    props: {
+      disabled: {
+        required: false,
+        default: false
+      },
+      name: {
+        required: true
+      },
+      iconColor: {
+        required: false,
+        default: 'white'
+      },
+      hoveredIconColor: {
+        required: false
+      },
+      backgroundColor: {
+        required: false,
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default:"transparentWhite1"
+      },
+      size: {
+        required: false,
+        default: '32px'
+      },
+      iconSize:{
+        required: false,
+        default:'18px'
+      },
+      hasCaret:{
+        required: false,
+        default: false
+      },
+      borderRadius:{
+        required:false,
+        default:'6px'
+      },
+      isHovered:{
+        required:false,
+        default:false
+      }
+    },
+    data() {
+      return {}
+    }
+  }
+  </script>

package/src/components/infoText/index.vue

@@ -1,34 +1,25 @@
 <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"
-      >
+        :width="width"
+        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
+        :alignArrow="alignArrow"
+        :iconSize="size"
+      ><slot />
         {{ text }}
       </text-overlay>
     </icon-wrapper>
@@ -44,22 +35,23 @@
 //     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,12 +60,13 @@ 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;
@@ -82,18 +75,15 @@ const TextOverlay = styled("div", textAttrs)`
 `
 
 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 +91,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 +143,24 @@ export default {
         return
       }
       this.toggleShowInfo()
-    },
+    }
   },
   data() {
     return {
       showInfo: false,
     }
   },
+  computed: {
+    iconColor() {
+      return this.isActive
+        ? this.borderColor
+          ? this.borderColor
+          : theme.colors.secondary
+        : theme.colors.mediumGray
+    },
+    halfComputedTextInfoWidth() {
+      return parseInt(this.width)/2;
+    }
+  }
 }
-</script>
+</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,15 +8,16 @@
         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"
         :minWidth="minWidth"
@@ -30,13 +31,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 +87,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,8 +99,16 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String
+  fontColor: String,
+  hasSlot: Boolean,
+  slotSize: String
 }
+
+const Container = styled('div', inputProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  position: relative;
+`
+
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
@@ -98,8 +116,15 @@ const InputContainer = styled('input', inputProps)`
       : props.noBorder
       ? 'none'
       : '1px solid ' + props.theme.colors.mediumGray};
-  padding: ${(props) =>
-    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
+  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')};
@@ -125,6 +150,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;
@@ -142,6 +176,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 +185,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`
@@ -178,12 +229,16 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText
+    InfoText,
+    Icon,
+    SlotContainer
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false
+      isFocused: false,
+      warningIcon: warningIcon,
     }
   },
   props: {
@@ -253,7 +308,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: 'right'
+      default: 'left'
     },
     minNumber: {
       required: false,
@@ -266,11 +321,41 @@ export default {
     numberToStringEnabled: {
       required: false,
       default: true
+    },
+    inputIcon: {
+      require: false,
+      type: Boolean,
+      default: false
+    },
+    inputIconImage: {
+      require: false,
+      type: String,
+      default: ''
+    },
+    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
       }
       this.$emit('input-change', event)
@@ -336,6 +421,7 @@ export default {
       this.$nextTick(() => {
         this.$refs.inputField1.$el.select()
       })
+      this.$emit('input-focus')
     },
     formatWithCurrency(value) {
       let adjustedMinValue =
@@ -387,4 +473,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -10,10 +10,11 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          :size="fontSize ? fontSize : '16'"
+          :size="fontSize ? fontSize : '16px'"
           :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/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/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>
@@ -174,7 +175,11 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null
+      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