@eturnity/eturnity_reusable_components 1.2.26-EPDM-3412.0 → 1.2.26-EPDM-3412.2

package/package.json

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

package/src/components/errorMessage/index.vue

@@ -22,7 +22,7 @@ const TextOverlay = styled.div`
   padding: 10px;
   width: max-content;
   max-width: 100%;
-  min-width: 200px;
+  min-width: min-content;
   font-size: 11px;
   font-weight: 400;
   border-radius: 4px;

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

@@ -10,38 +10,42 @@
           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"
-          :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"
+            :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>
 
@@ -49,6 +53,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%;
@@ -69,6 +74,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,
@@ -97,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.red
+      : 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
@@ -126,13 +142,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;
@@ -175,7 +184,8 @@ export default {
     LabelWrapper,
     Icon,
     IconWrapper,
-    IconContainer
+    IconContainer,
+    InputErrorWrapper
   },
   data() {
     return {