@eturnity/eturnity_reusable_components 1.2.19-EPDM-3412.9 → 1.2.19-EPDM-5295.3

package/babel.config.js

@@ -2,4 +2,4 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-EPDM-3412.9",
+  "version": "1.2.19-EPDM-5295.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -14,7 +14,8 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-styled-components": "^1.6.0",
-    "html-loader": "^0.5.5"
+    "html-loader": "^0.5.5",
+    "v-click-outside": "^2.1.4"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.2.8",

package/src/App.vue

@@ -1,97 +1,131 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
+      <br />
+      <modal backdrop="dark" :isLoading="false" :isOpen="false">
+        <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>
+      <row-container>
+        <div v-for='(item, index) in markersArray' :key="item.index">
+          <project-marker
+            :activeLanguage="'en-us'"
+            :markerData="item"
+            :isLimitedPartner="false"
+            :isGroupSupport="false"
+            :isEditable="true"
+            :gettext="gettext"
+            :date="'23.07.2022'"
+            @editHandler="consoleLog('edit index ' + index)"
+            @deleteHandler="consoleLog('delete id ' + item.id)"
+          />
+        </div>
+      </row-container>
+      <br />
+      <iconCollection />
+      <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="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="10px" alignArrow="right" 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 :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
-        </InputAnnexContainer>
-      </input-number>
+        @input-change="onInputChange($event)"
+      />
       <br />
-      
-  <p>InputText</p>
-   <input-text
-     placeholder="Company name"
-     :value="inputValue"
-     :isError="true"
-     errorMessage="This is my error message"
-     infoTextAlign="right" 
-     infoTextMessage="My info message"
-     label="Question 5"
-     alignItems="vertical"
-     inputWidth="250px"
-     minWidth="100px"
-   />
-   <br/>
-      <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
+      <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>
 
 <script>
-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 InputText from "@/components/inputs/inputText"
+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 ProjectMarker from '@/components/projectMarker'
+import iconCollection from '@/components/icon/iconCollection'
+import Modal from '@/components/modals/modal'
 // 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;
 `
 
+const RowContainer = styled.div`
+  display: inline-flex;
+  gap: 10px;
+  flex-wrap: wrap;
+`
+
 export default {
   name: 'App',
   components: {
     ThemeProvider,
     PageContainer,
+    MainTable,
+    ThreeDots,
+    Toggle,
     InputNumber,
     PageSubtitle,
     Spinner,
     Checkbox,
-    InputText,
     ExternalButton,
-    iconWrapper,
     Modal,
+    ProjectMarker,
+    iconCollection,
+    RowContainer
   },
   data() {
     return {
-      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -147,11 +181,15 @@ export default {
           id: 4,
         },
       ],
+      markersArray: [{"id":1180,"choice":"project-on-hold","translations":{"fr":{"name":"fr - Project on hold"},"en-us":{"name":"Project on hold"},"it-ch":{"name":"it-ch - Project on hold"},"de-ch":{"name":"de-ch - Project on hold"},"fr-be":{"name":"fr-be - Project on hold"}},"color":"#D27CCA","can_be_deleted":true}, {"id":266,"choice":"transferred","translations":{"en-us":{"name":"Transferred"},"fr":{"name":"fr - Transferred"},"de-ch":{"name":"de-ch - Transferred"},"it-ch":{"name":"it-ch - Transferred"},"fr-be":{"name":"fr-be - Transferred"}},"color":"#20A4CA","can_be_deleted":false},{"id":267,"choice":"sold","translations":{"en-us":{"name":"Sold"},"fr":{"name":"Vendu"},"de-ch":{"name":"Verkauft"},"it-ch":{"name":"Venduto"},"fr-be":{"name":"Vendu"}},"color":"#008351","can_be_deleted":false},{"id":268,"choice":"lost","translations":{"en-us":{"name":"Lost"},"fr":{"name":"Perdu"},"de-ch":{"name":"Verloren"},"it-ch":{"name":"Perso"},"fr-be":{"name":"Perdu"}},"color":"#A52019","can_be_deleted":false},{"id":1181,"choice":"project-created","translations":{"fr":{"name":"Project created"},"en-us":{"name":"Project created"},"it-ch":{"name":"Project created"},"de-ch":{"name":"Project created"},"fr-be":{"name":"Project created"}},"color":"#FDB813","can_be_deleted":true}]
     }
   },
   methods: {
-    keydownHandler(e) {
-      console.log('test', e)
+    consoleLog(data) {
+      console.log(data)
+    },
+    gettext(string) {
+      return string.toUpperCase()
     },
     getTheme() {
       return theme
@@ -202,8 +240,8 @@ export default {
         item = '-'
       }
       return item
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -213,4 +251,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

package/src/assets/svgIcons/cross.svg

@@ -0,0 +1,4 @@
+<svg fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.87865 8.47868L8.47865 9.87868L0.121287 1.52132L1.52129 0.121318L5.69997 4.3L9.87865 8.47868Z" fill="black"/>
+    <path d="M1.5213 9.87868L0.121302 8.47868L8.47866 0.12132L9.87866 1.52132L1.5213 9.87868Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/transfer.svg

@@ -0,0 +1,4 @@
+<svg fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9.98993L3.47934e-07 6.01003L10 6.01003V7.98993L3 7.98993L3 9.98993Z" fill="black"/>
+    <path d="M7 0.0100708L10 3.98997H0L1.19209e-07 2.01007L7 2.01007V0.0100708Z" fill="black"/>
+</svg>

package/src/components/icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <wrapper :isDisabled="isDisabled" :size="size">
+  <wrapper :isDisabled="isDisabled" :size="size" :cursor="cursor">
     <icon-image
       :size="size"
       :color="color"
@@ -23,12 +23,13 @@
 
 import styled from 'vue-styled-components'
 
-const wrapperAttrs = { isDisabled: Boolean, size: String }
+const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: inline-block;
   width: ${(props) => props.size};
   height: ${(props) => props.size};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
+  line-height: 0;
 `
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
@@ -68,10 +69,14 @@ export default {
     size: {
       required: false,
       default: '30px'
+    },
+    cursor: {
+      required: false,
+      default: 'pointer'
     }
   },
   data() {
     return {}
   }
 }
-</script>
+</script>

package/src/components/infoText/index.vue

@@ -1,25 +1,34 @@
 <template>
   <component-wrapper>
-    <icon-wrapper :size="size">
+    <icon-wrapper>
       <icon-img
         :isActive="showInfo"
         :size="size"
         :borderColor="borderColor"
         @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseenter="toggleShowInfo()"
+        @mouseleave="toggleShowInfo()"
       >
-        <icon :size="size" name="info" :color="iconColor" />
+        <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-img>
       <text-overlay
         v-if="showInfo"
         :borderColor="borderColor"
         :alignText="alignText"
-        :width="width"
-        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
-        :alignArrow="alignArrow"
-        :iconSize="size"
-      ><slot />
+      >
         {{ text }}
       </text-overlay>
     </icon-wrapper>
@@ -35,23 +44,22 @@
 //     size="20"
 //     alignText="right" // default is left
 // />
-import theme from '../../assets/theme.js'
-import styled from 'vue-styled-components'
-import icon from '../icon'
 
-const textAttrs = { iconSize:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
-const TextOverlay = styled('div', textAttrs)`
+import styled from "vue-styled-components"
+
+const IconWrapper = styled.div`
+  position: relative;
+`
+
+const textAttrs = { borderColor: String, alignText: String }
+const TextOverlay = styled("div", textAttrs)`
   position: absolute;
-  top: ${(props) => 'calc('+props.iconSize+' + 15px)'};
-  ${(props) => (props.alignArrow === 'left' 
-    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
-    : props.alignArrow === 'center' 
-    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
-    : 'right: calc('+props.iconSize+' /2 - 17px)')};
-  text-align: ${(props) => props.alignText};
+  top: 26px;
+  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
+  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: ${(props) => props.width };
+  width: max-content;
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -60,13 +68,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;
-    ${(props) => (props.alignArrow === 'left' ? 'left:40px;' : 
-    props.alignArrow=='center' ? 'left: calc(50% + 19px);' : 
-    'right:-13px;')};
+    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
+    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -75,15 +82,18 @@ const TextOverlay = styled('div', textAttrs)`
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
-
-const IconWrapper = styled('div', iconAttrs)`
-  position: relative;
-  top: 1px;
-  height: ${(props) => props.size};
-`
-const IconImg = styled('div', iconAttrs)`
+const IconImg = styled("div", iconAttrs)`
   cursor: pointer;
-  height: ${(props) => props.size};
+  height: ${(props) => props.size + "px"};
+
+  .img-icon {
+    fill: ${(props) =>
+      props.isActive
+        ? props.borderColor
+          ? props.borderColor
+          : props.theme.colors.secondary
+        : props.theme.colors.mediumGray};
+  }
 `
 
 const ComponentWrapper = styled.div`
@@ -91,51 +101,38 @@ const ComponentWrapper = styled.div`
 `
 
 export default {
-  name: 'info-text',
+  name: "info-text",
   components: {
     IconWrapper,
     TextOverlay,
     ComponentWrapper,
     IconImg,
-    icon
   },
   props: {
     text: {
-      required: false,
+      required: true,
     },
     borderColor: {
       required: false,
-      default: null
+      default: null,
     },
     size: {
       required: false,
-      default: '14px'
+      default: "20",
     },
     alignText: {
       required: false,
-      default: 'left' // "left" or "right"
-    },
-    alignArrow:{
-      required:false,
-      default:'center'
-    },
-    openTrigger:{
-      required:false,
-      default: 'onClick'
+      default: "left", // "left" or "right"
     },
-    width:{
-      required:false,
-      default:'165px'
-    }
   },
   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) {
@@ -143,24 +140,12 @@ export default {
         return
       }
       this.toggleShowInfo()
-    }
+    },
   },
   data() {
     return {
       showInfo: false,
     }
   },
-  computed: {
-    iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
-    },
-    halfComputedTextInfoWidth() {
-      return parseInt(this.width)/2;
-    }
-  }
 }
-</script>
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <container :inputWidth="inputWidth">
+  <container>
     <label-wrapper v-if="labelText">
       <label-text>
         {{ labelText }}
@@ -8,19 +8,17 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="14px"
+        size="13"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
       <input-container
-        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="displayedPlaceholder"
+        :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
-        :inputHeight="inputHeight"
         :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
@@ -32,25 +30,13 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        v-on="$listeners"
-        :hasSlot="hasSlot"
-        :slotSize="slotSize"
       />
-      <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
-        <slot></slot>
-      </slot-container>
-
       <unit-container
-        v-if="unitName && showLinearUnitName && !hasSlot"
+        v-if="unitName && showLinearUnitName"
         :hasLength="!!textInput.length"
         :isError="isError"
         >{{ unitName }}</unit-container
       >
-      <icon
-        v-if="(isError || inputIcon) && !showLinearUnitName"
-        :class="inputIconImageClass"
-        :src="isError ? warningIcon : inputIconImage"
-      />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -88,8 +74,11 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
-import ErrorMessage from '../../errorMessage'
-import warningIcon from '../../../assets/icons/error_icon.png'
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
 
 const inputProps = {
   isError: Boolean,
@@ -100,17 +89,8 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String,
-  hasSlot: Boolean,
-  slotSize: String,
-  inputHeight:String
+  fontColor: String
 }
-
-const Container = styled('div', inputProps)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  position: relative;
-`
-
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
@@ -118,15 +98,8 @@ const InputContainer = styled('input', inputProps)`
       : props.noBorder
       ? 'none'
       : '1px solid ' + props.theme.colors.mediumGray};
-  padding-top: 11px;
-  padding-bottom: 11px;
-  padding-left: 10px;
-  padding-right: ${(props) =>
-    props.slotSize
-      ? 'calc(' + props.slotSize + ' + 10px)'
-      : props.hasUnit
-      ? '40px'
-      : '5px'};
+  padding: ${(props) =>
+    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
@@ -142,7 +115,7 @@ const InputContainer = styled('input', inputProps)`
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
-  max-height: ${(props) => (props.inputHeight)};
+
   &::placeholder {
     color: ${(props) =>
       props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
@@ -152,15 +125,6 @@ const InputContainer = styled('input', inputProps)`
     outline: none;
   }
 `
-const IconProps = {
-  inputIconHeight: String
-}
-
-const Icon = styled('img', IconProps)`
-  position: absolute;
-  right: 10px;
-  top: 2px;
-`
 
 const InputWrapper = styled.span`
   position: relative;
@@ -178,7 +142,6 @@ const UnitContainer = styled('span', inputProps)`
   right: 10px;
   top: 0;
   padding-left: 10px;
-  text-align: right;
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
@@ -187,27 +150,11 @@ 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};
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
   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};
+  top: calc(100% + 1px);
 `
 
 const LabelWrapper = styled.div`
@@ -231,16 +178,12 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText,
-    Icon,
-    SlotContainer
+    InfoText
   },
-  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false,
-      warningIcon: warningIcon,
+      isFocused: false
     }
   },
   props: {
@@ -260,10 +203,6 @@ export default {
       required: false,
       default: null
     },
-    inputHeight:{
-      required:false,
-      default:null
-    },
     value: {
       required: true,
       default: null
@@ -314,7 +253,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: 'left'
+      default: 'right'
     },
     minNumber: {
       required: false,
@@ -327,41 +266,11 @@ export default {
     numberToStringEnabled: {
       required: false,
       default: true
-    },
-    inputIcon: {
-      require: false,
-      type: Boolean,
-      default: false
-    },
-    inputIconImage: {
-      require: false,
-      type: String,
-      default: ''
-    },
-    inputIconImageClass: {
-      require: false,
-      type: Array,
-      default: () => []
-    },
-    slotSize: {
-      required: false
-    }
-  },
-  computed: {
-    displayedPlaceholder() {
-      if (this.placeholder) return this.placeholder
-      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
-    },
-    hasSlot() {
-      return !!this.$slots.default
-    },
-    computedSlotSize() {
-      return this.slotSize || this.$slots['default'][0].elm.clientWidth
     }
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event) || event=="") {
+      if (isNaN(event)) {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
       this.$emit('input-change', event)
@@ -396,8 +305,6 @@ export default {
           value: evaluated,
           numberPrecision: this.numberPrecision
         })
-      }else if(typeof evaluated === 'number'){
-        evaluated=evaluated.toFixed(this.numberPrecision)
       }
       return evaluated
     },
@@ -414,11 +321,11 @@ export default {
         })
       }
       let adjustedMinValue =
-      evaluatedInput && evaluatedInput.length
-          ? evaluatedInput
+        value && value.length
+          ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''  
+          : ''
       this.$emit('input-blur', adjustedMinValue)
     },
     focusInput() {
@@ -429,7 +336,6 @@ export default {
       this.$nextTick(() => {
         this.$refs.inputField1.$el.select()
       })
-      this.$emit('input-focus')
     },
     formatWithCurrency(value) {
       let adjustedMinValue =
@@ -446,7 +352,6 @@ export default {
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
-        //return input + ' ' + unit
         return input + ' ' + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
         return ''
@@ -482,4 +387,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -10,11 +10,10 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          :size="fontSize ? fontSize : '16px'"
+          :size="fontSize ? fontSize : '16'"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <input-error-wrapper>
       <input-container
         :placeholder="placeholder"
         :isError="isError"
@@ -27,27 +26,20 @@
         :isDisabled="disabled"
         :fontSize="fontSize"
       />
-      <error-message v-if="isError">{{ errorMessage }}</error-message>
-      </input-error-wrapper>
     </input-wrapper>
+    <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
 </template>
 
 <script>
 import styled from "vue-styled-components"
 import InfoText from "../../infoText"
-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)`
   font-weight: bold;
@@ -112,6 +104,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);
+`
+
 export default {
   // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
   // To use:
@@ -137,7 +136,6 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
-    InputErrorWrapper,
     LabelWrapper,
   },
   props: {

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

@@ -12,7 +12,7 @@
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
-        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
+        <info-text v-if="item.infoText" :text="item.infoText" size="16" />
       </label-container>
       <image-container v-if="item.img">
         <radio-image :src="item.img" />

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="16px"
+          size="16"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
@@ -23,7 +23,6 @@
         :disabled="isDisabled"
         :fontSize="fontSize"
         @input="onChangeHandler"
-        :resize="resize"
       />
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
@@ -175,11 +174,7 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null,
-    },
-    resize:{
-      required:false,
-      default: "none"
+      default: null
     }
   },
   methods: {

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14px"
+          size="14"
           :alignText="infoTextAlign"
         />
       </label-container>
@@ -46,7 +46,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14px"
+          size="14"
           :alignText="infoTextAlign"
         />
       </label-container>

package/src/components/pageSubtitle/index.vue

@@ -6,7 +6,7 @@
     <info-text
       :text="infoText"
       v-if="!!infoText"
-      size="14px"
+      size="14"
       borderColor="#ccc"
       :alignText="alignInfoText"
     />

package/src/components/projectMarker/index.vue

@@ -0,0 +1,279 @@
+<template>
+  <page-container :withDate="!!date">
+    <marker-container
+      :backgroundColor="markerData.color"
+      :hasIcon="!!iconName"
+      :isEditionAllowed="editionAllowed"
+      :isActive="activated"
+      @click.native="editionAllowed
+        ? activated = !activated
+        : ''
+      "
+    >
+      <icon
+        v-if="!!iconName"
+        :name="iconName"
+        color="white"
+        size="10px"
+        cursor="default"
+      />
+      <span>{{ markerData.translations[activeLanguage].name }}</span>
+      <dot-wrapper
+        v-if="editionAllowed"
+        class="dotContainer"
+      >
+        <dot-icon />
+        <dot-icon />
+        <dot-icon />
+      </dot-wrapper>
+      <edit-container
+        v-if="activated"
+        v-click-outside="clickOutsideActionHandler"
+      >
+        <edit-item @click.native="deleteModalOpened = !deleteModalOpened">
+          <delete-icon />
+          <div>{{ $gettext('Delete') }}</div>
+        </edit-item>
+        <edit-item @click.native="onEditClick">
+          <icon-container>
+            <icon
+              name="edit_button"
+              size="14px"
+            />
+          </icon-container>
+          <div>{{ $gettext('Edit') }}</div>
+        </edit-item>
+      </edit-container>
+    </marker-container>
+    <date v-if="!!date">
+      {{ date }}
+    </date>
+    <modal
+      :isOpen="deleteModalOpened"
+      @on-close="closeDeleteModal"
+      :preventOutsideClose="true"
+    >
+      <modal-container>
+        <page-title :text="$gettext('delete_confirm_text')" />
+        <page-subtitle :text="$gettext('delete_confirm_subtext')" />
+        <cta-container>
+          <main-button
+            @click.native="onDelete"
+            :text="$gettext('Delete')"
+          />
+          <main-button
+            type="cancel"
+            @click.native="closeDeleteModal"
+            :text="$gettext('Cancel')"
+          />
+        </cta-container>
+      </modal-container>
+    </modal>
+  </page-container>
+</template>
+
+<script>
+// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
+// To use:
+// <project-marker
+//   :activeLanguage="'en-us'"
+//   :markerData="{"choice":"sold","translations":{"en-us":{"name":"Sold"}}","color":"#000"}"
+//   :isLimitedPartner="false"
+//   :isGroupSupport="false"
+//   :isEditable='false'
+//   :date="'23.07.2022'"
+//   @editHandler="onMarkerEdit($event)"
+//   @deleteHandler="onMarkerDelete($event)"
+// />
+
+import styled from "vue-styled-components"
+import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+import Modal from '@eturnity/eturnity_reusable_components/src/components/modals/modal'
+import PageTitle from '@eturnity/eturnity_reusable_components/src/components/pageTitle'
+import DeleteIcon from '@eturnity/eturnity_reusable_components/src/components/deleteIcon'
+import PageSubtitle from '@eturnity/eturnity_reusable_components/src/components/pageSubtitle'
+import MainButton from '@eturnity/eturnity_reusable_components/src/components/buttons/mainButton'
+
+const PageContainerAttrs = {
+  withDate: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  line-height: 14px;
+`
+
+const ModalContainer = styled.div`
+  padding: 40px;
+  min-width: 500px;
+`
+
+const CtaContainer = styled.div`
+  display: flex;
+  gap: 20px;
+  margin-top: 30px;
+`
+
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  isEditionAllowed: Boolean,
+  isActive: Boolean
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) =>
+  props.hasIcon || props.isEditionAllowed ? 'auto 1fr' : '1fr'};
+  grid-gap: 5px;
+  position: relative;
+  align-items: center;
+  padding: 2px 7px;
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) =>
+  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) =>
+  props.isEditionAllowed? 'pointer' : 'default'};
+
+  .dotContainer {
+    display: ${(props) => (props.isActive ? 'flex' : 'none')};
+  }
+
+  &:hover {
+    .dotContainer {
+      display: flex;
+    }
+  }
+`
+
+const DotWrapper = styled.div`
+  display: flex;
+  gap: 2px;
+  cursor: pointer;
+`
+
+const DotIcon = styled.div`
+  width: 4px;
+  height: 4px;
+  border-radius: 100%;
+  background-color: ${(props) => props.theme.colors.white};
+`
+
+const EditContainer = styled.div`
+  position: absolute;
+  z-index: 99;
+  top: 22px;
+  display: grid;
+  background-color: ${(props) => props.theme.colors.white};
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+`
+
+const EditItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: ${(props) => props.theme.colors.black};
+  font-size: 13px;
+  padding: 4px 18px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const IconContainer = styled.div`
+  padding: 8px;
+  line-height: 0;
+`
+
+const Date = styled.div``
+
+export default {
+  name: "project-marker",
+  components: {
+    PageContainer,
+    MarkerContainer,
+    DotWrapper,
+    DotIcon,
+    EditContainer,
+    EditItem,
+    DeleteIcon,
+    IconContainer,
+    Icon,
+    Modal,
+    ModalContainer,
+    CtaContainer,
+    PageTitle,
+    PageSubtitle,
+    MainButton,
+    Date
+  },
+  props: {
+    markerData: {
+      required: true
+    },
+    activeLanguage: {
+      required: true
+    },
+    date: {
+      required: false,
+      default: null
+    },
+    isEditable: {
+      required: false,
+      default: false
+    },
+    isGroupSupport: {
+      required: false,
+      default: false
+    },
+    isLimitedPartner: {
+      required: false,
+      default: false
+    },
+  },
+  data() {
+    return {
+      activated: false,
+      deleteModalOpened: false
+    }
+  },
+  computed: {
+    editionAllowed() {
+      return (this.markerData.can_be_deleted && (!this.isLimitedPartner || this.isGroupSupport)) && this.isEditable
+    },
+    iconName() {
+      if (this.markerData.choice === 'sold') {
+        return 'all_good'
+      } else if (this.markerData.choice === 'lost') {
+        return 'cross'
+      } else if (this.markerData.choice === 'transferred') {
+        return 'transfer'
+      } else {
+        return ''
+      }
+    }
+  },
+  methods: {
+    clickOutsideActionHandler() {
+      this.activated = false
+    },
+    closeDeleteModal() {
+      this.deleteModalOpened = false
+    },
+    onEditClick() {
+      this.$emit("editHandler")
+    },
+    onDelete() {
+      this.closeDeleteModal()
+      this.$emit("deleteHandler")
+    }
+  }
+}
+</script>

package/src/components/tables/mainTable/index.vue

@@ -8,7 +8,7 @@
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
-        <table-container v-else>
+        <table-container v-else :cellPaddings="cellPaddings">
           <slot />
         </table-container>
       </table-wrapper>
@@ -63,7 +63,8 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const TableContainer = styled.table`
+const containerAttrs = { cellPaddings: String }
+const TableContainer = styled("table", containerAttrs)`
   width: 100%;
   border-collapse: collapse;
   border: none;
@@ -114,7 +115,7 @@ const TableContainer = styled.table`
   }
 
   td {
-    padding: 6px 6px 7px 4px;
+    padding: ${(props) => props.cellPaddings ? props.cellPaddings : "6px 6px 7px 4px" };
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {
@@ -352,6 +353,10 @@ export default {
       required: false,
       default: true,
     },
+    cellPaddings: {
+      required: false,
+      default: '',
+    },
     isLoading: {
       required: false,
       default: false,

package/src/helpers/numberConverter.js

@@ -4,9 +4,6 @@ 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
@@ -94,7 +91,6 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : 'en-US'
-  value=parseFloat(value)
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,
     maximumFractionDigits: numberPrecision

package/src/main.js

@@ -1,10 +1,12 @@
 import Vue from "vue"
 import App from "./App.vue"
 import VueCompositionAPI from "@vue/composition-api"
+import vClickOutside from 'v-click-outside'
 
 Vue.config.productionTip = false
 
 Vue.use(VueCompositionAPI)
+Vue.use(vClickOutside)
 
 new Vue({
   render: (h) => h(App),

package/src/components/errorMessage/index.vue

@@ -1,62 +0,0 @@
-<template>
-  <component-wrapper>
-    <text-overlay>
-      <slot></slot>
-    </text-overlay>
-  </component-wrapper>
-</template>
-
-<script>
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-//To use:
-// <error-message
-//     alignText="right" // default is left
-// />
-
-import styled from 'vue-styled-components'
-
-const TextOverlay = styled.div`
-  position: absolute;
-  top: calc(100% + 13px);
-  background: ${(props) => props.theme.colors.red};
-  padding: 10px;
-  width: max-content;
-  max-width: 100%;
-  min-width: 200px;
-  font-size: 11px;
-  font-weight: 400;
-  border-radius: 4px;
-  font-family: 'Lato-Bold', Arial;
-  z-index: 10;
-  color: ${(props) => props.theme.colors.white};
-
-  :before {
-    content: '';
-    background-color: ${(props) => props.theme.colors.red};
-    position: absolute;
-    top: 2px;
-    left: 40px;
-    height: 11px;
-    width: 11px;
-    transform-origin: center center;
-    transform: translate(-2em, -0.5em) rotate(45deg);
-  }
-`
-
-const ComponentWrapper = styled.div`
-  display: block;
-`
-
-export default {
-  name: 'info-text',
-  components: {
-    TextOverlay,
-    ComponentWrapper
-  },
-  props: {},
-  methods: {},
-  data() {
-    return {}
-  }
-}
-</script>