@eturnity/eturnity_reusable_components 1.2.18 → 1.2.19-EPDM-5262.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.18",
+  "version": "1.2.19-EPDM-5262.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,62 +2,37 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-      <modal backdrop="dark" :isLoading="false" :isOpen="true">
-        <main-table titleText="My Table">
-          <thead>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-              <div />
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <!-- <table-dropdown
-              :colSpan="3"
-              :tableItems="getDropdownValues()"
-              @toggle-dropdown-open="toggleDropdownOpen()"
-              @item-selected="onItemSelected({ item: $event, index })"
-              :isOpen="isDropdownOpen()"
-              :optionItems="itemOptions"
-              :optionsDisplay="['display_name', 'company_item_number', 'model']"
-            /> -->
-              <td>Test</td>
-              <div class="icons-container">
-                <three-dots :options="listOptions" :isLoading="false" />
-              </div>
-            </tr>
-          </tbody>
-        </main-table>
-      </modal>
+      <input-number
+        :value="inputValue"
+        @input-change="inputValue = $event"
+        inputWidth="250px"
+        slotSize="50%"
+        ><InputAnnexContainer>
+          <span>123m2</span>
+          <info-text size="10" 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 size="15" text="infoText ceci est le text"></info-text>
+        </InputAnnexContainer>
+      </input-number>
       <br />
-      <toggle
-        @on-toggle-change="onInputChange($event)"
-        :isChecked="inputValue"
-        label="My Label Text"
-        infoTextMessage="This is my test message"
-        infoTextAlign="right"
-        labelAlign="right"
-        :disabled="false"
-      />
       <br />
       <input-number
         placeholder="Enter distance"
         :numberPrecision="2"
         :value="inputValue"
         @input-change="onInputChange($event)"
-      />
+        >unit</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"
-      />
-      <external-button text="Click me!" minWidth="500px" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -66,16 +41,15 @@
 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 Modal from '@/components/modals/modal'
+import infoText from '@/components/infoText'
 // 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,15 +60,10 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
     InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    ExternalButton,
-    Modal,
+    infoText,
+    InputAnnexContainer
+    // TableDropdown,
   },
   data() {
     return {
@@ -104,7 +73,7 @@ export default {
         number_format_precision: 4,
         number_min_allowed: 0,
         number_max_allowed: 10,
-        unit_short_name: 'cm',
+        unit_short_name: 'cm'
       },
       dropdownOpen: false,
       isChecked: false,
@@ -112,47 +81,47 @@ export default {
         {
           name: 'Option 1',
           value: 'option_1',
-          disabled: true,
+          disabled: true
         },
         {
           name: 'Option 2',
-          value: 'option_2',
+          value: 'option_2'
         },
         {
           name: 'Option 3',
-          value: 'option_3',
+          value: 'option_3'
         },
         {
           name: 'Option 4',
-          value: 'option_4',
-        },
+          value: 'option_4'
+        }
       ],
       itemOptions: [
         {
           display_name: 'Test 1',
           company_item_number: '123',
           model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1,
+          id: 1
         },
         {
           display_name: 'Test 2',
           company_item_number: '1234',
           model: 'BTB-123',
-          id: 2,
+          id: 2
         },
         {
           display_name: 'Test 3',
           company_item_number: '12345',
           model: 'BTB-543',
-          id: 3,
+          id: 3
         },
         {
           display_name: 'Test 4',
           company_item_number: '123456',
           model: 'BTB-4930',
-          id: 4,
-        },
-      ],
+          id: 4
+        }
+      ]
     }
   },
   methods: {
@@ -177,21 +146,21 @@ export default {
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'display_name',
-          }),
+            value: 'display_name'
+          })
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'company_item_number',
-          }),
+            value: 'company_item_number'
+          })
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'model',
-          }),
-        },
+            value: 'model'
+          })
+        }
       ]
       return items
     },
@@ -205,8 +174,8 @@ export default {
         item = '-'
       }
       return item
-    },
-  },
+    }
+  }
 }
 </script>
 

package/src/assets/theme.js

@@ -1,34 +1,34 @@
 const theme = {
   colors: {
-    primary: '#48a2d0',
-    secondary: '#fdb813',
-    tertiary: '#d5d5d5',
-    black: '#353535',
-    yellow: '#fdb813',
-    darkGray: '#818181',
-    gray1: '#666',
-    mediumGray: '#d5d5d5',
-    lightGray: '#f2f2f2',
-    white: '#fff',
-    blue: '#48a2d0',
-    red: '#ff5656',
-    blue1: '#e4efff',
-    grey1: '#666',
-    grey2: '#c4c4c4',
-    grey3: '#b2b9c5',
-    grey4: '#dee2eb',
-    grey5: '#fafafa',
-    green: '#99db0c',
-    disabled: '#dfe1e1'
+    primary: "#48a2d0",
+    secondary: "#fdb813",
+    tertiary: "#d5d5d5",
+    black: "#353535",
+    yellow: "#fdb813",
+    darkGray: "#818181",
+    gray1: "#666",
+    mediumGray: "#d5d5d5",
+    lightGray: "#f2f2f2",
+    white: "#fff",
+    blue: "#48a2d0",
+    red: "#ff5656",
+    blue1: "#e4efff",
+    grey1: "#666",
+    grey2: "#c4c4c4",
+    grey3: "#b2b9c5",
+    grey4: "#ebeef4",
+    grey5: "#fafafa",
+    green: "#99db0c",
+    disabled: "#dfe1e1",
   },
   screen: {
-    mobileSmall: '345px',
-    mobile: '425px',
-    mobileLarge: '530px',
-    tablet: '768px',
-    tabletLarge: '950px'
+    mobileSmall: "345px",
+    mobile: "425px",
+    mobileLarge: "530px",
+    tablet: "768px",
+    tabletLarge: "950px",
   },
-  borderRadius: '4px'
+  borderRadius: "4px",
 }
 
 export default theme

package/src/components/icon/index.vue

@@ -37,8 +37,7 @@ const IconImage = styled('div', IconImageProps)`
     height: ${(props) => props.size};
   }
   svg > path {
-    ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+    ${(props) => props.color && `fill: ${props.color};`}
   }
   &:hover > svg > path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}

package/src/components/infoText/index.vue

@@ -1,6 +1,6 @@
 <template>
   <component-wrapper>
-    <icon-wrapper>
+    <icon-wrapper :size="size">
       <icon-img
         :isActive="showInfo"
         :size="size"
@@ -9,20 +9,7 @@
         @mouseenter="toggleShowInfo()"
         @mouseleave="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 + 'px'" name="info" :color="iconColor" />
       </icon-img>
       <text-overlay
         v-if="showInfo"
@@ -44,19 +31,16 @@
 //     size="20"
 //     alignText="right" // default is left
 // />
-
-import styled from "vue-styled-components"
-
-const IconWrapper = styled.div`
-  position: relative;
-`
+import theme from '@/assets/theme.js'
+import styled from 'vue-styled-components'
+import icon from '../icon'
 
 const textAttrs = { borderColor: String, alignText: String }
-const TextOverlay = styled("div", textAttrs)`
+const TextOverlay = styled('div', textAttrs)`
   position: absolute;
   top: 26px;
-  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
-  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
+  right: ${(props) => (props.alignText === 'left' ? '-10px' : 'inherit')};
+  left: ${(props) => (props.alignText === 'left' ? 'inherit' : '-10px')};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
   width: max-content;
@@ -68,12 +52,12 @@ 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")};
+    right: ${(props) => (props.alignText === 'left' ? '-12px' : 'inherit')};
+    left: ${(props) => (props.alignText === 'left' ? 'inherit' : '40px')};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -82,18 +66,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}px;
+`
+const IconImg = styled('div', iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size}px;
 `
 
 const ComponentWrapper = styled.div`
@@ -101,38 +82,39 @@ const ComponentWrapper = styled.div`
 `
 
 export default {
-  name: "info-text",
+  name: 'info-text',
   components: {
     IconWrapper,
     TextOverlay,
     ComponentWrapper,
     IconImg,
+    icon
   },
   props: {
     text: {
-      required: true,
+      required: true
     },
     borderColor: {
       required: false,
-      default: null,
+      default: null
     },
     size: {
       required: false,
-      default: "20",
+      default: '14'
     },
     alignText: {
       required: false,
-      default: "left", // "left" or "right"
-    },
+      default: 'left' // "left" or "right"
+    }
   },
   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 +122,21 @@ export default {
         return
       }
       this.toggleShowInfo()
-    },
+    }
   },
   data() {
     return {
-      showInfo: false,
+      showInfo: false
     }
   },
+  computed: {
+    iconColor() {
+      return this.isActive
+        ? this.borderColor
+          ? this.borderColor
+          : theme.colors.secondary
+        : theme.colors.mediumGray
+    }
+  }
 }
-</script>
+</script>

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

@@ -33,7 +33,7 @@
 //     backgroundColor="red"
 //     :isDisabled="true"
 // />
-import styled from 'vue-styled-components'
+import styled from "vue-styled-components"
 
 const ComponentWrapper = styled.div`
   min-height: 18px;
@@ -45,33 +45,34 @@ const containerAttrs = {
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean
+  isDisabled: Boolean,
 }
-const Container = styled('label', containerAttrs)`
+const Container = styled("label", containerAttrs)`
   display: grid;
-  grid-template-columns: ${(props) => (props.hasLabel ? '18px auto' : '18px')};
+  grid-template-columns: ${(props) => (props.hasLabel ? "18px auto" : "18px")};
   grid-gap: 16px;
   align-content: center;
+  /* align-items: center; */
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 16px;
   user-select: none;
 
   .checkmark {
     position: absolute;
     height: ${(props) =>
-      props.size === 'medium'
-        ? '25px'
-        : props.size === 'small'
-        ? '16px'
-        : '25px'};
+      props.size === "medium"
+        ? "25px"
+        : props.size === "small"
+        ? "16px"
+        : "25px"};
     width: ${(props) =>
-      props.size === 'medium'
-        ? '25px'
-        : props.size === 'small'
-        ? '16px'
-        : '25px'};
+      props.size === "medium"
+        ? "25px"
+        : props.size === "small"
+        ? "16px"
+        : "25px"};
     background-color: ${(props) =>
       props.isChecked
         ? props.backgroundColor
@@ -79,7 +80,7 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : '#fff'};
+        : "#fff"};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -90,34 +91,34 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.mediumGray};
 
     &:after {
-      content: '';
+      content: "";
       position: absolute;
-      display: ${(props) => (props.isChecked ? 'block' : 'none')};
+      display: ${(props) => (props.isChecked ? "block" : "none")};
     }
   }
 
   .checkmark:after {
     left: ${(props) =>
-      props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
+      props.size === "medium" ? "9px" : props.size === "small" ? "5px" : "9px"};
     top: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
+      props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
     width: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
+      props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
     height: ${(props) =>
-      props.size === 'medium'
-        ? '10px'
-        : props.size === 'small'
-        ? '6px'
-        : '10px'};
+      props.size === "medium"
+        ? "10px"
+        : props.size === "small"
+        ? "6px"
+        : "10px"};
     border: solid
       ${(props) =>
         props.checkColor ? props.checkColor : props.theme.colors.white};
     border-width: ${(props) =>
-      props.size === 'medium'
-        ? '0 3px 3px 0'
-        : props.size === 'small'
-        ? '0 2px 2px 0'
-        : '0 3px 3px 0'};
+      props.size === "medium"
+        ? "0 3px 3px 0"
+        : props.size === "small"
+        ? "0 2px 2px 0"
+        : "0 3px 3px 0"};
     transform: rotate(45deg);
   }
 `
@@ -134,49 +135,49 @@ const InputCheckbox = styled.input`
 const LabelText = styled.div`
   font-size: 13px;
   display: grid;
-  align-items: flex-start;
+  align-items: center;
   min-height: 18px;
 `
 
 export default {
-  name: 'checkbox',
+  name: "checkbox",
   components: {
     ComponentWrapper,
     Container,
     InputCheckbox,
-    LabelText
+    LabelText,
   },
   props: {
     label: {
       required: false,
-      default: ''
+      default: "",
     },
     isChecked: {
       required: true,
-      default: false
+      default: false,
     },
     checkColor: {
-      required: false
+      required: false,
     },
     size: {
       required: false,
-      default: 'medium' // small, medium
+      default: "medium", // small, medium
     },
     backgroundColor: {
-      required: false
+      required: false,
     },
     isDisabled: {
       required: false,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     onChangeHandler(value) {
       if (this.isDisabled) {
         return
       }
-      this.$emit('on-event-handler', value)
-    }
-  }
+      this.$emit("on-event-handler", value)
+    },
+  },
 }
 </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,7 +8,7 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="13"
+        size="14"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>
@@ -30,9 +30,15 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        :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
@@ -75,11 +81,6 @@ import {
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
 
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
-
 const inputProps = {
   isError: Boolean,
   hasUnit: Boolean,
@@ -89,8 +90,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 +107,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')};
@@ -142,6 +158,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,6 +167,28 @@ const UnitContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
+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;
+  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 ErrorMessage = styled.div`
   font-size: 14px;
   color: ${(props) => props.theme.colors.red};
@@ -178,6 +217,7 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
+    SlotContainer,
     InfoText
   },
   data() {
@@ -266,6 +306,18 @@ export default {
     numberToStringEnabled: {
       required: false,
       default: true
+    },
+    slotSize: {
+      required: false
+    }
+  },
+  computed: {
+    hasSlot() {
+      console.log(this.$slots.default)
+      return !!this.$slots.default
+    },
+    computedSlotSize() {
+      return this.slotSize || this.$slots['default'][0].elm.clientWidth
     }
   },
   methods: {
@@ -300,12 +352,10 @@ export default {
         }
       })
       let evaluated = eval(formatted.join(''))
-      if (typeof evaluated === 'string') {
-        evaluated = stringToNumber({
-          value: evaluated,
-          numberPrecision: this.numberPrecision
-        })
-      }
+      evaluated = stringToNumber({
+        value: evaluated,
+        numberPrecision: this.numberPrecision
+      })
       return evaluated
     },
     onInputBlur(e) {
@@ -387,4 +437,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -3,18 +3,15 @@
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
-    :backdrop="backdrop"
   >
     <modal-container @click.stop>
-      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
-      <content-container :visible="!isLoading">
-        <slot />
-      </content-container>
+      <spinner v-if="isLoading" size="50px" :fullWidth="true" />
       <close-button
         v-if="!hideClose"
         @click.native="onCloseModal()"
         class="close"
       />
+      <slot />
     </modal-container>
   </page-wrapper>
 </template>
@@ -31,12 +28,7 @@ import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
-const contentAttrs = { visible: Boolean }
-const ContentContainer = styled('div', contentAttrs)`
-  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
-`
-
-const pageAttrs = { isOpen: Boolean, backdrop: String }
+const pageAttrs = { isOpen: Boolean }
 const PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
@@ -44,10 +36,7 @@ const PageWrapper = styled('div', pageAttrs)`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: ${(props) =>
-    props.backdrop == 'dark'
-      ? 'rgba(0, 0, 0, 0.4)'
-      : 'rgba(255, 255, 255, 0.9)'};
+  background-color: rgba(255, 255, 255, 0.9);
   z-index: 99999;
   overflow: auto;
 
@@ -109,8 +98,7 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner,
-    ContentContainer
+    Spinner
   },
   props: {
     isOpen: {
@@ -128,10 +116,6 @@ export default {
     hideClose: {
       required: false,
       default: false
-    },
-    backdrop: {
-      required: false,
-      default: 'white'
     }
   },
   methods: {
@@ -151,4 +135,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/modals/modal/modal.stories.js

@@ -26,6 +26,5 @@ export const Default = Template.bind({
   preventOutsideClose: true,
   isLoading: false,
   hideClose: false,
-  backdrop: 'dark',
-})
+});
 Default.args = {};

package/src/components/spinner/index.vue

@@ -7,7 +7,7 @@
       />
     </container>
   </spinner-container>
-  <container v-else :limitedToModal="limitedToModal">
+  <container v-else>
     <spinner-wrapper
       :size="size"
       :src="require('../../assets/icons/black_spinner.svg')"
@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue-styled-components'
+import styled from "vue-styled-components"
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -32,41 +32,34 @@ const SpinnerContainer = styled.div`
   justify-items: center;
   z-index: 100;
 `
-const containerAttrs = { limitedToModal: Boolean }
-const Container = styled('div', containerAttrs)`
+
+const Container = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
-  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-  width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled('img', spinnerAttrs)`
-  width: ${(props) => (props.size ? props.size : '60px')};
+const SpinnerWrapper = styled("img", spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : "60px")};
 `
 
 export default {
-  name: 'spinner',
+  name: "spinner",
   components: {
     Container,
     SpinnerWrapper,
-    SpinnerContainer
+    SpinnerContainer,
   },
   props: {
     fullWidth: {
       required: false,
-      default: false
-    },
-    limitedToModal: {
-      required: false,
-      default: false
+      default: false,
     },
     size: {
       required: false,
-      default: null
-    }
-  }
+      default: null,
+    },
+  },
 }
-</script>
+</script>

package/src/helpers/numberConverter.js

@@ -4,21 +4,20 @@ 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
   if (
     selectedLang === 'de-DE' ||
-    selectedLang === 'de-de' ||
     selectedLang === 'no-no' ||
     selectedLang === 'da-dk' ||
     selectedLang === 'de-lu' ||
     selectedLang === 'de-be' ||
     selectedLang === 'es-es' ||
-    selectedLang === 'de' ||
-    selectedLang === 'it' ||
-    selectedLang === 'nl-nl' ||
-    selectedLang === 'nl-be'
+    selectedLang === 'de'
   ) {
     // replace dots with blank, and commas with a dot: 1.234,56 --> 1234.56
     if (allowNegative) {
@@ -46,15 +45,9 @@ export const stringToNumber = ({
   ) {
     // replace ' with blank: 1'234.56 --> 1234.56
     if (allowNegative) {
-      newVal = newVal
-        .replace(/[^\d-.,']/g, '')
-        .replace(/[,\s]/, '')
-        .replace(/['\s]/g, '')
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/['\s]/g, '')
     } else {
-      newVal = newVal
-        .replace(/[^\d.,']/g, '')
-        .replace(/[,\s]/, '')
-        .replace(/['\s]/g, '')
+      newVal = newVal.replace(/[^\d.,']/g, '').replace(/['\s]/g, '')
     }
   } else if (
     selectedLang === 'fr-fr' ||