@eturnity/eturnity_reusable_components 6.48.2 → 6.50.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.48.2",
+  "version": "6.50.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -63,4 +63,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/assets/svgIcons/erase.svg

@@ -1,4 +1,4 @@
 <svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" fill="white" r="7"></circle>
+<circle cx="20" cy="20" r="7"></circle>
 <path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
 </svg>

package/src/assets/svgIcons/integrations.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11H16C17.1046 0 18 0.895431 18 2V12H12C10.8954 12 10 11.1046 10 10V4L0 4V2C0 0.89543 0.895431 0 2 0H10ZM0 6H6C7.10457 6 8 6.89543 8 8V14H18V16C18 17.1046 17.1046 18 16 18H8H7H2C0.895431 18 0 17.1046 0 16V6Z" fill="white"/>
+</svg>

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

@@ -6,6 +6,7 @@
       :isDisabled="isDisabled"
       :customColor="customColor"
       :noWrap="noWrap"
+      :data-id="dataId"
     >
       {{ text }}
     </button-container>
@@ -21,38 +22,45 @@
 //   type="secondary" // primary, secondary, cancel
 //   :isDisabled="true"
 //   :minWidth="minWidth"
+//   :dataId="test_data_id"
 // />
 
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, noWrap: Boolean }
-const ButtonContainer = styled("div", ButtonAttrs)`
+const ButtonAttrs = {
+  type: String,
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  noWrap: Boolean
+}
+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")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   user-select: none;
   ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
   ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
 
   &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+    opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
   }
 
   &:active {
@@ -61,26 +69,26 @@ const ButtonContainer = styled("div", ButtonAttrs)`
 `
 
 export default {
-  name: "main-button",
+  name: 'main-button',
   components: {
     PageContainer,
-    ButtonContainer,
+    ButtonContainer
   },
   props: {
     type: {
       required: false,
-      default: "primary",
+      default: 'primary'
     },
     isDisabled: {
       required: false,
-      default: false,
+      default: false
     },
     text: {
-      required: true,
+      required: true
     },
     customColor: {
       required: false,
-      default: null,
+      default: null
     },
     noWrap: {
       required: false,
@@ -89,7 +97,11 @@ export default {
     minWidth: {
       required: false,
       default: null
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
-  },
+  }
 }
 </script>

package/src/components/icon/iconCollection.vue

@@ -20,13 +20,13 @@ import styled from 'vue-styled-components'
 
 const Wrapper = styled.div`
   display: block;
-  text-align:center;
-  justify-items:center
-  width:100%;
-  background-color:#ccc;
+  text-align: center;
+  justify-items: center;
+  width: 100%;
+  background-color: #ccc;
 `
 const IconWrapper = styled.div`
-  display:inline-flex
+  display: inline-flex;
   flex-direction: column;
   background-color: white;
   border-radius: 6px;

package/src/components/icon/index.vue

@@ -30,7 +30,7 @@ import styled from 'vue-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
-  position:relative
+  position: relative;
   align-content: center;
   justify-content: center;
   width: ${(props) => props.size};
@@ -58,6 +58,7 @@ const strikedLine = styled('div', strikedAttrs)`
 `
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
+  width: 100%;
   svg {
     width: 100%;
     height: 100%;

package/src/components/iconWrapper/index.vue

@@ -8,63 +8,85 @@
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
-    >
-        <icon :disabled="disabled" 
-            :size="iconSize" 
-            :name="name" 
-            :color="iconColor" 
-            :hoveredColor="hoveredIconColor" 
-            :isStriked="isStriked"
-            />
-            
-        <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 = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
-  const Wrapper = styled('div', wrapperAttrs)`
-    position:relative;
-    display: inline-flex;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
-    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;
-  `
-  
+  >
+    <icon
+      :disabled="disabled"
+      :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+    />
+
+    <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 = {
+  color: String,
+  isHovered: Boolean,
+  borderRadius: String,
+  disabled: Boolean,
+  size: String,
+  backgroundColor: String,
+  hoveredBackgroundColor: String,
+  hasBorder: Boolean
+}
+const Wrapper = styled('div', wrapperAttrs)`
+  position: relative;
+  display: inline-flex;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  border: ${(props) =>
+    props.hasBorder
+      ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+      : ''};
+  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: {

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

@@ -11,6 +11,7 @@
       <input-checkbox
         type="checkbox"
         :checked="isChecked"
+        :data-id="dataId"
         @change="onChangeHandler(!isChecked)"
       />
       <div>
@@ -168,6 +169,10 @@ export default {
     isDisabled: {
       required: false,
       default: false
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
   },
   methods: {

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

@@ -84,6 +84,7 @@
 //     inputWidth="150px" //by default, this is 100%
 //     minWidth="100px"
 //     :numberPrecision="3"
+//     minDecimals="2"
 //     unitName="pc"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
@@ -358,6 +359,10 @@ export default {
       required: false,
       default: 0
     },
+    minDecimals: {
+      required: false,
+      default: 0
+    },
     unitName: {
       required: false,
       default: ''
@@ -498,7 +503,8 @@ export default {
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false
+            numberPrecision: false,
+            minDecimals: this.minDecimals
           })
           return num
         }
@@ -509,7 +515,8 @@ export default {
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       } else if (typeof evaluated === 'number') {
         evaluated = evaluated.toFixed(this.numberPrecision)
@@ -569,7 +576,8 @@ export default {
               : this.defaultNumber
               ? this.defaultNumber
               : this.minNumber,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       }
       let adjustedMinValue =
@@ -614,7 +622,8 @@ export default {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
@@ -626,7 +635,8 @@ export default {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
       }
@@ -645,7 +655,8 @@ export default {
 
       this.textInput = numberToString({
         value: value && value.length ? value : this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
       //this.value=value
     },
@@ -660,17 +671,20 @@ export default {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.defaultNumber !== null) {
       this.textInput = numberToString({
         value: this.defaultNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     }
   },

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

@@ -1,7 +1,12 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value" :checkmarkColor="checkmarkColor">
+      <label-container
+        :size="size"
+        :isDisabled="item.disabled"
+        :isChecked="selectedOption === item.value"
+        :checkmarkColor="checkmarkColor"
+      >
         <radio
           type="radio"
           :value="selectedOption"
@@ -9,6 +14,7 @@
           :name="'radioButtons_' + radioName"
           :checked="selectedOption === item.value"
           :disabled="item.disabled"
+          :data-id="`radio_button_${dataId}_option_${item.value}`"
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
@@ -54,17 +60,17 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-import styled from "vue-styled-components"
-import Modal from "../../modals/modal"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import Modal from '../../modals/modal'
+import InfoText from '../../infoText'
 
 const wrapperProps = {
-  layout: String,
+  layout: String
 }
-const ComponentWrapper = styled("div", wrapperProps)`
+const ComponentWrapper = styled('div', wrapperProps)`
   display: flex;
   flex-direction: ${(props) =>
-    props.layout === "vertical" ? "column" : "row"};
+    props.layout === 'vertical' ? 'column' : 'row'};
   grid-gap: 10px 5px;
   flex-wrap: wrap;
 `
@@ -83,8 +89,13 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean, checkmarkColor: String }
-const LabelContainer = styled("label", containerProps)`
+const containerProps = {
+  size: String,
+  isDisabled: Boolean,
+  isChecked: Boolean,
+  checkmarkColor: String
+}
+const LabelContainer = styled('label', containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 15px;
@@ -92,30 +103,30 @@ const LabelContainer = styled("label", containerProps)`
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: ${(props) =>
-    props.size === "large"
-      ? "16px"
-      : props.size === "medium"
-        ? "13px"
-        : "10px"};
+    props.size === 'large'
+      ? '16px'
+      : props.size === 'medium'
+      ? '13px'
+      : '10px'};
   user-select: none;
   flex: auto;
   align-self: baseline;
 
   .checkmark {
     height: ${(props) =>
-      props.size === "large"
-        ? "23px"
-        : props.size === "medium"
-          ? "16px"
-          : "12px"};
+      props.size === 'large'
+        ? '23px'
+        : props.size === 'medium'
+        ? '16px'
+        : '12px'};
     width: ${(props) =>
-      props.size === "large"
-        ? "23px"
-        : props.size === "medium"
-          ? "16px"
-          : "12px"};
+      props.size === 'large'
+        ? '23px'
+        : props.size === 'medium'
+        ? '16px'
+        : '12px'};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -124,28 +135,29 @@ const LabelContainer = styled("label", containerProps)`
     justify-content: center;
 
     &:after {
-      content: "";
-      display: ${(props) => props.isChecked ? 'block' : 'none'};
+      content: '';
+      display: ${(props) => (props.isChecked ? 'block' : 'none')};
       width: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
+        props.size === 'large'
+          ? '10px'
+          : props.size === 'medium'
+          ? '8px'
+          : '6px'};
       height: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
+        props.size === 'large'
+          ? '10px'
+          : props.size === 'medium'
+          ? '8px'
+          : '6px'};
       border-radius: 100%;
-      background: ${(props) => props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
+      background: ${(props) =>
+        props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
   }
 `
 
 const textAttrs = { isDisabled: Boolean }
-const LabelText = styled("div", textAttrs)`
+const LabelText = styled('div', textAttrs)`
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
@@ -186,7 +198,7 @@ const ModalImageContainer = styled.div`
 `
 
 export default {
-  name: "radio-button",
+  name: 'radio-button',
   components: {
     Radio,
     ComponentWrapper,
@@ -198,24 +210,24 @@ export default {
     ModalImage,
     ModalImageContainer,
     InfoText,
-    LabelText,
+    LabelText
   },
   props: {
     selectedOption: {
       required: true,
-      default: false,
+      default: false
     },
     options: {
       required: true,
-      default: [],
+      default: []
     },
     layout: {
       required: false,
-      default: "horizontal", //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+      default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
     },
     size: {
       required: false,
-      default: "medium", // small, medium, large
+      default: 'medium' // small, medium, large
     },
     name: {
       required: false,
@@ -224,6 +236,10 @@ export default {
     checkmarkColor: {
       required: false,
       default: ''
+    },
+    dataId: {
+      type: String,
+      default: 'key'
     }
   },
   data() {
@@ -234,17 +250,18 @@ export default {
   },
   methods: {
     onInputHandler(value) {
-      this.$emit("on-radio-change", value)
+      this.$emit('on-radio-change', value)
     },
     isImageOpen(index) {
       return this.selectedImage === index
     },
     toggleImageModal(value) {
       this.selectedImage = value
-    },
+    }
   },
   created() {
-    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
-  },
+    this.radioName =
+      this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+  }
 }
 </script>

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

@@ -492,10 +492,14 @@ export default {
       this.toggleDropdown()
     },
     clickOutside(event) {
+      const dropdownRef = this.$refs.dropdown
+      // we need to prevent closing on selecting an option, because in the case of
+      // a disabled option, we don't want to close the dropdown
       if (!this.isClickOutsideActive) return
       if (
         this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target)
+        this.$refs.select.$el.contains(event.target) ||
+        event.target.parentNode === dropdownRef.$el
       ) {
         return
       } else {

package/src/components/inputs/select/option/index.vue

@@ -1,10 +1,18 @@
 <template>
   <optionContainer
     :data-value="value"
-    :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
-    :backgroundColor="colorMode == 'dark' ? 'eturnityGrey' : '#fff'"
+    :hoveredBgColor="
+      colorMode == 'dark'
+        ? '#000000'
+        : hoveredBgColor
+        ? hoveredBgColor
+        : 'grey5'
+    "
     @click="clickHandler"
     @mouseover="hoverHandler"
+    :cursorType="cursorType"
+    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :title="hoverText"
   >
     <slot></slot>
   </optionContainer>
@@ -14,18 +22,29 @@
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
 import styled from 'vue-styled-components'
-const optionProps = { hoveredBgColor: String, backgroundColor: String }
+const optionProps = {
+  hoveredBgColor: String,
+  cursorType: String,
+  backgroundColor: String
+}
 const optionContainer = styled('div', optionProps)`
   display: flex;
-  cursor: pointer;
+  cursor: ${(props) => props.cursorType};
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 12px 10px;
   gap: 14px;
   width: 100%;
-  background-color: ${(props) => props.theme.colors[props.backgroundColor]?props.theme.colors[props.backgroundColor]:props.backgroundColor};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   box-sizing: inherit;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
@@ -47,6 +66,21 @@ export default {
     colorMode: {
       required: false,
       default: 'light'
+    },
+    cursorType: {
+      required: false,
+      default: 'cursor'
+    },
+    backgroundColor: {
+      required: false,
+      default: 'white'
+    },
+    hoverText: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
     }
   },
 
@@ -57,7 +91,12 @@ export default {
   },
   methods: {
     clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)

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

@@ -1,6 +1,11 @@
 <template>
   <container>
-    <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
+    <flex-wrapper
+      :size="size"
+      :disabled="disabled"
+      @click="onToggleChange"
+      :data-id="dataId"
+    >
       <label-container
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
@@ -69,27 +74,28 @@
 //   :disabled="true"
 //   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
+//   dataId="test_data_id"
 // />
 
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
 
 const Container = styled.div`
   display: inline-block;
 `
 
 const flexAttrs = { size: String, disabled: Boolean }
-const FlexWrapper = styled("div", flexAttrs)`
+const FlexWrapper = styled('div', flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${(props) =>
-    props.size === "medium"
-      ? "20px"
-      : props.size === "small"
-      ? "10px"
-      : "20px"};
+    props.size === 'medium'
+      ? '20px'
+      : props.size === 'small'
+      ? '10px'
+      : '20px'};
   align-items: center;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
 `
 
 const toggleAttrs = {
@@ -97,43 +103,43 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean,
+  isChecked: Boolean
 }
-const LabelText = styled("div", toggleAttrs)`
+const LabelText = styled('div', toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
   font-size: ${(props) =>
-    props.size === "medium"
-      ? "16px"
-      : props.size === "small"
-      ? "13px"
-      : "16px"};
+    props.size === 'medium'
+      ? '16px'
+      : props.size === 'small'
+      ? '13px'
+      : '16px'};
 `
 
-const ToggleWrapper = styled("span", toggleAttrs)`
+const ToggleWrapper = styled('span', toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
     props.disabled
-      ? "1px solid " + props.theme.colors.disabled
+      ? '1px solid ' + props.theme.colors.disabled
       : props.isChecked
       ? props.backgroundColor
-        ? "1px solid " + props.backgroundColor
-        : "1px solid " + props.theme.colors.green
-      : "1px solid " + props.theme.colors.grey3}
+        ? '1px solid ' + props.backgroundColor
+        : '1px solid ' + props.theme.colors.green
+      : '1px solid ' + props.theme.colors.grey3}
   position: relative;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   width: ${(props) =>
-    props.size === "medium"
-      ? "50px"
-      : props.size === "small"
-      ? "29px"
-      : "50px"};
+    props.size === 'medium'
+      ? '50px'
+      : props.size === 'small'
+      ? '29px'
+      : '50px'};
   height: ${(props) =>
-    props.size === "medium"
-      ? "24px"
-      : props.size === "small"
-      ? "16px"
-      : "24px"};
+    props.size === 'medium'
+      ? '24px'
+      : props.size === 'small'
+      ? '16px'
+      : '24px'};
   border-radius: 100px;
 
   &:focus {
@@ -149,9 +155,9 @@ const ToggleWrapper = styled("span", toggleAttrs)`
 const backgroundAttrs = {
   backgroundColor: String,
   isChecked: Boolean,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleBackground = styled("span", backgroundAttrs)`
+const ToggleBackground = styled('span', backgroundAttrs)`
   display: block;
   border-radius: 100px;
   height: 100%;
@@ -171,25 +177,25 @@ const toggleProps = {
   isChecked: Boolean,
   toggleColor: String,
   size: String,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleDot = styled("span", toggleProps)`
+const ToggleDot = styled('span', toggleProps)`
   position: absolute;
   height: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
   width: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
   left: 3px
   bottom: ${(props) =>
-    props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
+    props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
     props.disabled
       ? props.theme.colors.disabled
@@ -202,33 +208,33 @@ const ToggleDot = styled("span", toggleProps)`
   transition: transform 0.4s ease;
   transform: ${(props) =>
     props.isChecked
-      ? props.size === "medium"
-        ? "translateX(25px)"
-        : props.size === "small"
-        ? "translateX(12px)"
-        : "translateX(25px)"
-      : "translateX(0)"};
+      ? props.size === 'medium'
+        ? 'translateX(25px)'
+        : props.size === 'small'
+        ? 'translateX(12px)'
+        : 'translateX(25px)'
+      : 'translateX(0)'};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
     width: 24px;
     transform: ${(props) =>
-      props.isChecked ? "translateX(25px)" : "translateX(0)"};
+      props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
     bottom: 8px;
   }
 `
 
 const labelAttrs = { hasInfoMessage: Boolean }
-const LabelContainer = styled("div", labelAttrs)`
+const LabelContainer = styled('div', labelAttrs)`
   display: inline-grid;
   grid-template-columns: ${(props) =>
-    props.hasInfoMessage ? "auto 1fr" : "auto"};
+    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
   grid-gap: 12px;
   align-items: center;
 `
 
 export default {
-  name: "toggle",
+  name: 'toggle',
   components: {
     Container,
     ToggleBackground,
@@ -237,52 +243,56 @@ export default {
     FlexWrapper,
     LabelText,
     InfoText,
-    LabelContainer,
+    LabelContainer
   },
   props: {
     label: {
       required: false,
-      default: "",
+      default: ''
     },
     isChecked: {
       required: true,
-      default: false,
+      default: false
     },
     toggleColor: {
-      required: false,
+      required: false
     },
     backgroundColor: {
-      required: false,
+      required: false
     },
     size: {
       required: false,
-      default: "small",
+      default: 'small'
     },
     labelAlign: {
       required: false,
-      default: "right",
+      default: 'right'
     },
     fontColor: {
-      required: false,
+      required: false
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     infoTextMessage: {
-      required: false,
+      required: false
     },
     infoTextAlign: {
-      required: false,
+      required: false
     },
+    dataId: {
+      type: String,
+      default: ''
+    }
   },
   methods: {
     onToggleChange() {
       if (this.disabled) {
         return
       }
-      this.$emit("on-toggle-change", !this.isChecked)
-    },
-  },
+      this.$emit('on-toggle-change', !this.isChecked)
+    }
+  }
 }
 </script>

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

@@ -37,7 +37,7 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/sideMenu/index.vue

@@ -8,6 +8,7 @@
         <list-item
           v-if="!item.children"
           :key="idx"
+          :data-id="`sub_menu_settings_${item.key}`"
           :isActive="activeTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
@@ -57,6 +58,7 @@
       <icon-container
         :isActive="false"
         :isButton="true"
+        data-id="button_settings_logout"
         @click="$emit('on-logout')"
       >
         <rotate-icon

package/src/components/tableDropdown/index.vue

@@ -134,11 +134,13 @@
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
+                  :key="idx"
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
+                  :key="idx"
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}

package/src/helpers/numberConverter.js

@@ -91,19 +91,12 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision = 0 }) => {
+export const numberToString = ({ value, numberPrecision, minDecimals }) => {
+  const minimumRounding = minDecimals ? minDecimals : 0
   value = parseFloat(value)
-  let minNumberPrecision
-  let maxNumberPrecision
-  if (typeof numberPrecision === 'number') {
-    minNumberPrecision = numberPrecision
-    maxNumberPrecision = numberPrecision
-  } else {
-    minNumberPrecision = numberPrecision[0]
-    maxNumberPrecision = numberPrecision[1]
-  }
   return value.toLocaleString(langForLocaleString(), {
-    minimumFractionDigits: minNumberPrecision,
-    maximumFractionDigits: maxNumberPrecision
+    minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
+    maximumFractionDigits:
+      numberPrecision < minimumRounding ? minimumRounding : numberPrecision
   })
 }