@eturnity/eturnity_reusable_components 1.2.30 → 1.2.31-3d-master.1

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

@@ -14,38 +14,33 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <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>
+      <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-wrapper>
   </container>
 </template>
@@ -54,18 +49,21 @@
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
-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)`
-  color: ${(props) => props.theme.colors.eturnityGrey};
+  font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  font-weight: 700;
 `
 
 const LabelWrapper = styled.div`
@@ -76,13 +74,6 @@ 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,
@@ -98,7 +89,9 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : '1px solid ' + props.theme.colors.grey4};
+      : props.hasLength
+      ? '1px solid ' + props.theme.colors.black
+      : '1px solid ' + props.theme.colors.mediumGray};
   padding: ${(props) =>
     props.isError
       ? '11px 25px 11px 10px'
@@ -109,11 +102,7 @@ const InputContainer = styled('input', inputProps)`
   position: relative;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) =>
-    props.isError
-      ? props.theme.colors.grey6
-      : props.isDisabled
-      ? props.theme.colors.grey2
-      : props.theme.colors.black};
+    props.isError ? props.theme.colors.red : 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
@@ -123,7 +112,8 @@ const InputContainer = styled('input', inputProps)`
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
 
   &::placeholder {
-    color: ${(props) => props.theme.colors.grey2};
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
   }
 
   &:focus {
@@ -141,6 +131,13 @@ 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;
@@ -181,11 +178,11 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
+    InputErrorWrapper,
     LabelWrapper,
     Icon,
     IconWrapper,
-    IconContainer,
-    InputErrorWrapper
+    IconContainer
   },
   data() {
     return {

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

@@ -25,9 +25,8 @@
 //   :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%;
@@ -35,15 +34,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: 13px;
+  font-size: 16px;
   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};
@@ -66,33 +65,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

@@ -45,11 +45,9 @@
 //     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)`
@@ -75,7 +73,7 @@ const InputContainer = styled('textarea', inputProps)`
   border: ${(props) =>
     props.isError
       ? '1px solid ' + props.theme.colors.red
-      : '1px solid ' + props.theme.colors.grey4};
+      : '1px solid ' + props.theme.colors.mediumGray};
   padding: ${(props) =>
     props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
@@ -87,7 +85,8 @@ const InputContainer = styled('textarea', inputProps)`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
   &::placeholder {
-    color: ${(props) => props.theme.colors.grey2};
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
   }
 
   &:focus {
@@ -109,6 +108,13 @@ 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;
@@ -169,11 +175,11 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null
+      default: null,
     },
-    resize: {
-      required: false,
-      default: 'none'
+    resize:{
+      required:false,
+      default: "none"
     }
   },
   methods: {

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

@@ -1,5 +1,6 @@
 <template>
   <page-wrapper
+    :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
@@ -36,9 +37,9 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String }
+const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
 const PageWrapper = styled('div', pageAttrs)`
-  position: fixed;
+  position: ${(props) => props.position}
   display: grid;
   top: 0;
   left: 0;
@@ -132,6 +133,10 @@ export default {
     backdrop: {
       required: false,
       default: 'white'
+    },
+    position: {
+      required: false,
+      default: 'fixed'
     }
   },
   methods: {

package/src/helpers/numberConverter.js

@@ -94,6 +94,7 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : 'en-US'
+  if(selectedLang=="null"){selectedLang='en-US'}
   value=parseFloat(value)
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,