@eturnity/eturnity_reusable_components 7.45.5-EPDM-12680.2 → 7.45.5-EPDM-10609.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.5-EPDM-12680.2",
+  "version": "7.45.5-EPDM-10609.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.64062 2.47656L3.75 4.58594L8.36719 0L10 1.60156L5.38281 6.25L3.74219 7.88281L2.10938 6.25L0 4.14063L1.64062 2.47656Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/star.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9.46199L9.708 11.7L8.724 7.48199L12 4.64399L7.686 4.27799L6 0.299988L4.314 4.27799L0 4.64399L3.276 7.48199L2.292 11.7L6 9.46199Z" fill="#FDB813"/>
+</svg>

package/src/assets/theme.js

@@ -11,6 +11,7 @@ const theme = {
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
+    blue2: '#6CD4D4',
     red: '#ff5656',
     blue1: '#e4efff',
     brightBlue: '#0068DE',

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

@@ -52,9 +52,7 @@
       props.isDisabled
         ? props.theme.colors.disabled
         : props.customColor
-        ? props.theme.colors[props.customColor]
-          ? props.theme.colors[props.customColor]
-          : props.customColor
+        ? props.customColor
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;

package/src/components/icon/index.vue

@@ -35,7 +35,6 @@
     },
     name: {
       required: true,
-      type: String,
     },
     color: {
       required: false,

package/src/components/infoText/constants.js

@@ -0,0 +1,4 @@
+export const TEXT_OVERLAY_TOP_OFFSET = 45
+export const TEXT_OVERLAY_LEFT_OFFSET = 3
+export const TEXT_OVERLAY_ARROW_LEFT_OFFSET = 78
+export const TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET = 86

package/src/components/infoText/index.vue

@@ -1,30 +1,50 @@
 <template>
   <ComponentWrapper>
-    <IconWrapper :size="size">
+    <IconWrapper :size="type === 'dot' ? 'unset' : size">
       <IconImg
+        ref="iconImg"
         data-test-id="infoText_trigger"
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
+        <Dot v-if="type === 'dot'" :color="dotColor" />
         <IconComponent
+          v-else
           :color="iconColor"
           cursor="pointer"
           name="info"
           :size="size"
         />
       </IconImg>
-      <TextOverlay
-        v-if="showInfo"
-        :align-arrow="alignArrow"
-        :half-computed-text-info-width="halfComputedTextInfoWidth"
-        :icon-size="size"
-        :info-position="infoPosition"
-        :max-width="maxWidth"
-        :width="width"
-        ><slot></slot>
-        <span v-if="text.length > 0" v-html="text"></span>
-      </TextOverlay>
+      <template v-if="!shouldUseTeleport">
+        <TextOverlay
+          v-if="showInfo"
+          :align-arrow="alignArrow"
+          :half-computed-text-info-width="halfComputedTextInfoWidth"
+          :icon-size="size"
+          :info-position="infoPosition"
+          :max-width="maxWidth"
+          :width="width"
+          ><slot></slot>
+          <span v-html="text"></span>
+        </TextOverlay>
+      </template>
+      <Teleport v-else to="#portal-target">
+        <TextOverlay
+          v-if="showInfo"
+          :align-arrow="alignArrow"
+          :half-computed-text-info-width="halfComputedTextInfoWidth"
+          :icon-size="size"
+          :info-position="infoPosition"
+          :left="position.left"
+          :max-width="maxWidth"
+          :top="position.top"
+          :width="width"
+          ><slot></slot>
+          <span v-html="text"></span>
+        </TextOverlay>
+      </Teleport>
     </IconWrapper>
   </ComponentWrapper>
 </template>
@@ -37,29 +57,41 @@
   //     size="20px"
   //     alignArrow="right" // which side the arrow should be on
   // />
+  import { Teleport } from 'vue'
   import theme from '../../assets/theme.js'
   import styled from 'vue3-styled-components'
   import IconComponent from '../icon'
+  import {
+    TEXT_OVERLAY_ARROW_LEFT_OFFSET,
+    TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET,
+    TEXT_OVERLAY_TOP_OFFSET,
+  } from './constants.js'
 
   const textAttrs = {
     iconSize: String,
     alignArrow: String,
     width: String,
     halfComputedTextInfoWidth: Number,
+    top: String,
+    left: String,
     infoPosition: String,
   }
   const TextOverlay = styled('div', textAttrs)`
     position: absolute;
+    ${(props) => (props.infoPosition === 'top' ? 'bottom' : 'top')} : ${(
+      props
+    ) => (props.top ? props.top : 'calc(' + props.iconSize + ' + 5px)')};
     ${(props) =>
-      props.infoPosition == 'top'
-        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
-        : 'top : calc(' + props.iconSize + ' + 15px)'};
-    ${(props) =>
-      props.alignArrow === 'left'
+      props.left
+        ? 'left: ' + props.left
+        : 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)'};
+
+    ${(props) => (props.infoPosition === 'left' ? 'right' : 'left')} : 0;
+
     text-align: left;
     background: ${(props) => props.theme.colors.black};
     padding: 10px;
@@ -103,6 +135,14 @@
     height: ${(props) => props.size};
   `
 
+  const Dot = styled('div')`
+    width: 5px;
+    height: 5px;
+    background-color: ${(props) => props.color};
+    border-radius: 50%;
+    display: inline-block;
+  `
+
   const IconImg = styled.div`
     line-height: 0;
   `
@@ -114,19 +154,22 @@
   export default {
     name: 'InfoText',
     components: {
+      Dot,
       IconWrapper,
       TextOverlay,
       ComponentWrapper,
       IconImg,
       IconComponent,
+      Teleport,
     },
     props: {
       text: {
+        type: String,
         required: false,
         default: '',
-        type: String,
       },
       size: {
+        type: String,
         required: false,
         default: '14px',
         type: String,
@@ -137,16 +180,19 @@
         type: String,
       },
       alignArrow: {
+        type: String,
         required: false,
         default: 'center',
         type: String,
       },
       openTrigger: {
+        type: String,
         required: false,
         default: 'onHover', // onHover, onClick
         type: String,
       },
       width: {
+        type: String,
         required: false,
         default: '165px',
         type: String,
@@ -155,10 +201,28 @@
         default: '400px',
         type: String,
       },
+      shouldUseTeleport: {
+        type: Boolean,
+        default: false,
+      },
+      dotColor: {
+        type: String,
+        required: false,
+        default: theme.colors.blue2,
+      },
+      type: {
+        type: String,
+        required: false,
+        default: 'info', // info, dot
+      },
     },
     data() {
       return {
         showInfo: false,
+        position: {
+          top: null,
+          left: null,
+        },
       }
     },
     computed: {
@@ -178,6 +242,10 @@
         } else {
           document.removeEventListener('click', this.clickOutside)
         }
+
+        if (this.shouldUseTeleport && this.showInfo) {
+          this.getTeleportPosition()
+        }
       },
       clickOutside(event) {
         if (this.$el.contains(event.target)) {
@@ -185,6 +253,35 @@
         }
         this.toggleShowInfo()
       },
+      getTextOverlayTop() {
+        const iconImg = this.$refs.iconImg.$el
+        const iconImgTop = iconImg.getBoundingClientRect().top
+        const iconImgHeight = iconImg.clientHeight
+        const textOverlayTop =
+          iconImgTop - iconImgHeight / 2 + TEXT_OVERLAY_TOP_OFFSET
+
+        console.log(textOverlayTop)
+
+        return `${textOverlayTop}px`
+      },
+      getTextOverlayLeft() {
+        const iconImg = this.$refs.iconImg.$el
+        const iconImgLeft = iconImg.getBoundingClientRect().left
+        const iconImgWidth = iconImg.clientWidth
+        const textOverlayLeft = iconImgLeft + iconImgWidth / 2 - 100 + 3
+
+        if (this.alignArrow === 'center') {
+          return `${textOverlayLeft}px`
+        } else if (this.alignArrow === 'left') {
+          return `${textOverlayLeft + TEXT_OVERLAY_ARROW_LEFT_OFFSET}px`
+        }
+
+        return `${textOverlayLeft - TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET}px`
+      },
+      getTeleportPosition() {
+        this.position.top = this.getTextOverlayTop()
+        this.position.left = this.getTextOverlayLeft()
+      },
     },
   }
 </script>

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

@@ -28,14 +28,11 @@
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
-        :background-color="
-          colorMode === 'transparent' ? 'transparent' : backgroundColor
-        "
-        :border-color="colorMode === 'transparent' ? 'white' : borderColor"
-        :color-mode="colorMode"
+        :background-color="backgroundColor"
+        :border-color="borderColor"
         :data-id="inputDataId"
         :disabled="disabled"
-        :font-color="colorMode === 'transparent' ? 'white' : fontColor"
+        :font-color="fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
@@ -54,8 +51,6 @@
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
-        @keydown.down="decrementValue"
-        @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
@@ -97,31 +92,6 @@
           </template>
         </RCSelect>
       </SelectWrapper>
-
-      <ArrowControls
-        v-if="!disabled && showArrowControls"
-        :color-mode="colorMode"
-      >
-        <ArrowButton @click="incrementValue">
-          <Icon
-            :color="colorMode === 'transparent' ? 'white' : undefined"
-            name="arrow_up"
-            size="8px"
-          />
-        </ArrowButton>
-        <ArrowDivider :color-mode="colorMode" />
-        <ArrowButton
-          :is-disabled="textInput <= minNumber"
-          @click="decrementValue"
-        >
-          <Icon
-            :color="colorMode === 'transparent' ? 'white' : undefined"
-            :disabled="textInput <= minNumber"
-            name="arrow_down"
-            size="8px"
-          />
-        </ArrowButton>
-      </ArrowControls>
     </InputWrapper>
     <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
@@ -153,7 +123,6 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
-  //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
   //</inputNumber>
@@ -189,7 +158,6 @@
     labelFontColor: String,
     borderColor: String,
     showLinearUnitName: Boolean,
-    colorMode: String,
   }
 
   const Container = styled('div', inputProps)`
@@ -213,18 +181,15 @@
         : '1px solid ' + props.theme.colors.grey4};
     height: ${(props) => props.inputHeight};
     max-height: ${(props) => props.inputHeight};
-    padding: ${({ colorMode }) =>
-      colorMode === 'transparent' ? '10px 15px' : '0 10px'};
-    padding-right: ${({ slotSize, isError, showLinearUnitName, colorMode }) =>
-      colorMode === 'transparent'
-        ? '0'
-        : slotSize
+    padding: 0 10px;
+    padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
+      slotSize
         ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
         : isError && !showLinearUnitName
         ? '24px'
-        : '40px'};
+        : '5px'};
     border-radius: ${(props) =>
       props.isInteractive && props.alignItems != 'vertical'
         ? '0 4px 4px 0'
@@ -248,7 +213,7 @@
       props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
     background-color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey5 : props.theme.colors.white};
+      props.isDisabled ? props.theme.colors.grey5 : '#fff'};
     box-sizing: border-box;
 
     &::placeholder {
@@ -260,55 +225,6 @@
     }
   `
 
-  const ArrowControlsProps = {
-    colorMode: String,
-  }
-  const ArrowControls = styled('div', ArrowControlsProps)`
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: grid;
-    grid-template-rows: 1fr auto 1fr;
-    align-items: center;
-    justify-items: center;
-    cursor: pointer;
-    width: 30px;
-    background-color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? 'transparent'
-        : props.theme.colors.white};
-    border-left: 1px solid
-      ${(props) =>
-        props.colorMode === 'transparent'
-          ? props.theme.colors.white
-          : props.theme.colors.black};
-  `
-
-  const ArrowButtonProps = {
-    isDisabled: Boolean,
-  }
-  const ArrowButton = styled('button', ArrowButtonProps)`
-    background: ${(props) =>
-      props.isDisabled ? props.theme.colors.disabled : 'transparent'};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-  `
-
-  const ArrowDivider = styled('div', ArrowControlsProps)`
-    width: 100%;
-    height: 1px;
-    background-color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? props.theme.colors.white
-        : props.theme.colors.black};
-  `
-
   const InputWrapper = styled.span`
     position: relative;
   `
@@ -443,179 +359,140 @@
       SelectWrapper,
       SelectText,
       Divider,
-      ArrowControls,
-      ArrowButton,
-      ArrowDivider,
     },
     inheritAttrs: false,
     props: {
       placeholder: {
-        type: String,
         required: false,
         default: '',
       },
       isError: {
-        type: Boolean,
         required: false,
         default: false,
       },
       inputWidth: {
-        type: String,
         required: false,
         default: null,
       },
       minWidth: {
-        type: String,
         required: false,
         default: null,
       },
       inputHeight: {
-        type: String,
         required: false,
         default: '40px',
       },
       value: {
-        type: [String, Number],
         required: true,
         default: null,
       },
       clearInput: {
-        type: Boolean,
         required: false,
         default: false,
       },
       alignItems: {
-        type: String,
         required: false,
         default: 'vertical',
       },
       errorMessage: {
-        type: String,
         required: false,
         default: 'Please insert a correct number',
       },
       numberPrecision: {
-        type: Number,
         required: false,
         default: 0,
       },
       minDecimals: {
-        type: Number,
         required: false,
         default: 0,
       },
       unitName: {
-        type: String,
         required: false,
         default: '',
       },
       showLinearUnitName: {
-        type: Boolean,
         required: false,
         default: false,
       },
       disabled: {
-        type: Boolean,
         required: false,
         default: false,
       },
       noBorder: {
-        type: Boolean,
         required: false,
         default: false,
       },
       borderColor: {
-        type: String,
         required: false,
-        default: null,
       },
       textAlign: {
-        type: String,
         required: false,
         default: 'left',
       },
       fontSize: {
-        type: String,
         required: false,
         default: '13px',
       },
       isInteractive: {
-        type: Boolean,
         required: false,
         default: false,
       },
       interactionStep: {
-        type: Number,
         required: false,
         default: 1,
       },
       labelText: {
-        type: String,
         required: false,
         default: null,
       },
       labelInfoText: {
-        type: String,
         required: false,
         default: null,
       },
       labelInfoAlign: {
-        type: String,
         required: false,
         default: 'left',
       },
       defaultNumber: {
-        type: Number,
         required: false,
         default: null,
       },
       minNumber: {
-        type: Number,
         required: false,
         default: null,
       },
       fontColor: {
-        type: String,
         required: false,
         default: null,
       },
       backgroundColor: {
-        type: String,
         required: false,
         default: null,
       },
       numberToStringEnabled: {
-        type: Boolean,
         required: false,
         default: true,
       },
       allowNegative: {
-        type: Boolean,
         required: false,
         default: true,
       },
       slotSize: {
-        type: String,
         required: false,
-        default: null,
       },
       labelFontColor: {
-        type: String,
         required: false,
         default: 'eturnityGrey',
       },
       focus: {
-        type: Boolean,
         required: false,
         default: false,
       },
       labelDataId: {
-        type: String,
         required: false,
         default: '',
       },
       inputDataId: {
-        type: String,
         required: false,
         default: '',
       },
@@ -639,14 +516,6 @@
         type: Boolean,
         default: false,
       },
-      colorMode: {
-        type: String,
-        default: '',
-      },
-      showArrowControls: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {
@@ -716,36 +585,6 @@
       }
     },
     methods: {
-      incrementValue() {
-        const currentValue = Math.max(
-          parseFloat(this.textInput || 0),
-          this.minNumber || 0
-        )
-        const newValue = currentValue + this.interactionStep
-        this.textInput = numberToString({
-          value: newValue,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-        this.$emit('on-input', newValue)
-        this.$emit('input-change', newValue)
-      },
-      decrementValue() {
-        const currentValue = Math.max(
-          parseFloat(this.textInput || 0),
-          this.minNumber || 0
-        )
-        const newValue = currentValue - this.interactionStep
-        if (this.allowNegative || newValue >= 0) {
-          this.textInput = numberToString({
-            value: newValue,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals,
-          })
-          this.$emit('on-input', newValue)
-          this.$emit('input-change', newValue)
-        }
-      },
       onEnterPress() {
         this.$emit('on-enter-click')
         this.$refs.inputField1.$el.blur()
@@ -841,7 +680,6 @@
             this.$emit('on-input', evaluatedVal)
           }
         }
-        this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false