@eturnity/eturnity_reusable_components 1.2.38 → 1.2.39-EPDM-5626.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.38",
+  "version": "1.2.39-EPDM-5626.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/buttons/mainButton/index.vue

@@ -1,8 +1,9 @@
 <template>
   <page-container>
     <button-container
-      :isDisabled="isDisabled"
       :type="type"
+      :minWidth="minWidth"
+      :isDisabled="isDisabled"
       :customColor="customColor"
     >
       {{ text }}
@@ -14,37 +15,39 @@
 // To use:
 // import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
 // <main-button
-//   type="secondary" // primary, secondary, cancel
-//   :isDisabled="true"
 //   text="Click Me"
 //   customColor="#ab5348"
+//   type="secondary" // primary, secondary, cancel
+//   :isDisabled="true"
+//   :minWidth="minWidth"
 // />
 
 import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.type === "primary"
-      ? props.theme.colors.black
-      : props.type === "secondary"
-      ? props.theme.colors.grey3
-      : props.type === "cancel"
-      ? props.theme.colors.red
-      : props.theme.colors.black};
+      props.isDisabled
+          ? props.theme.colors.disabled
+          : props.customColor
+              ? props.customColor
+              : props.type === "primary"
+                  ? props.theme.colors.black
+                  : props.type === "secondary"
+                      ? props.theme.colors.grey3
+                      : props.type === "cancel"
+                          ? props.theme.colors.red
+                          : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
+  ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -77,6 +80,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null
+    }
   },
 }
 </script>

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

@@ -226,7 +226,7 @@ const SlotContainer = styled('span', inputProps)`
   width: ${(props) =>
     props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
   right: 10px;
-  top: 0;
+  top: 10px;
   padding-left: 10px;
   color: ${(props) =>
     props.isError

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

@@ -74,7 +74,7 @@ const InputLabel = styled('div', labelAttrs)`
   };
 
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  font-weight: 700;
+  font-family: 'Lato-Bold',Arial;
 `
 
 const LabelWrapper = styled.div`
@@ -133,15 +133,15 @@ const InputContainer = styled('input', inputProps)`
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
-      
+
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   max-height: ${(props) => props.inputHeight};
   box-sizing: border-box; // to allow width of 100% with padding
-  font-weight: 500;
+  font-weight: 400;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : 
+    props.isDisabled ? props.theme.colors.grey5 :
     props.backgroundColor ? props.backgroundColor+' !important' :
     props.theme.colors.white};
   &::placeholder {