@eturnity/eturnity_reusable_components 7.48.1-EPDM-10964.0 → 7.48.1-EPDM-12680.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-10964.0",
+  "version": "7.48.1-EPDM-12680.12",
   "files": [
     "dist",
     "src"
@@ -16,8 +16,7 @@
     "build-storybook": "storybook build",
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
-    "test-coverage": "jest --coverage",
-    "prepublishOnly": "npm run test"
+    "test-coverage": "jest --coverage"
   },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",

package/src/assets/svgIcons/collapse_all.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
+  <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
+</svg>

package/src/assets/svgIcons/hybrid.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22998 11.8962H10.5006H12.2505V10.1463V8.97906H14.0004V5.47917H12.2505V4.31283V2.56289V2.55151H10.5006V2.56289H8.58218L7.76617 4.31283H10.5006V10.1463H5.04599L4.22998 11.8962Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.2622 4.79738C6.91629 4.63687 6.53076 4.54729 6.12431 4.54729C4.63054 4.54729 3.41919 5.75796 3.41919 7.25241C3.41919 8.33588 4.05591 9.26984 4.97534 9.70158L7.2622 4.79738ZM5.44786 3.11681C5.44786 3.49042 5.7507 3.79326 6.12431 3.79326C6.49793 3.79326 6.80077 3.49042 6.80077 3.11681V1.76459C6.80077 1.39097 6.49793 1.08813 6.12431 1.08813C5.7507 1.08813 5.44786 1.39097 5.44786 1.76459V3.11681ZM2.02818 7.88939H0.675962C0.302349 7.88939 -0.000488281 7.58655 -0.000488281 7.21294C-0.000488281 6.83932 0.302349 6.53649 0.675962 6.53649H2.02818C2.4018 6.53649 2.70463 6.83932 2.70463 7.21294C2.70463 7.58655 2.4018 7.88939 2.02818 7.88939ZM3.7057 10.5877L2.74955 11.5439C2.4855 11.8079 2.05745 11.8079 1.7934 11.5439C1.52935 11.2798 1.52935 10.8518 1.7934 10.5877L2.74955 9.63155C3.0136 9.36751 3.44165 9.36751 3.7057 9.63155C3.96975 9.8956 3.96975 10.3237 3.7057 10.5877ZM2.74955 4.79432L1.7934 3.83817C1.52935 3.57412 1.52935 3.14607 1.7934 2.88202C2.05745 2.61797 2.4855 2.61797 2.74955 2.88202L3.7057 3.83817C3.96975 4.10222 3.96975 4.53027 3.7057 4.79432C3.44165 5.05837 3.0136 5.05837 2.74955 4.79432Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/module.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0722 3.6H1.6V10.4H11.0722L7.87332 7.60217L7.18484 7L7.87332 6.39783L11.0722 3.6ZM12.4 9.43572V4.56428L9.61516 7L12.4 9.43572ZM0 2H1.6H12.4H14V3.6V10.4V12H12.4H1.6H0V10.4V3.6V2Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/move_down.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 7.63636H4.55V0H9.45V7.63636H13.125L7 14L0.875 7.63636Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/move_up.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/optimizer.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
+<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
+<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
+<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
+</svg>

package/src/assets/svgIcons/string_design.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.85714 1.92857C2.85714 2.71755 2.21755 3.35714 1.42857 3.35714C0.639593 3.35714 0 2.71755 0 1.92857C0 1.13959 0.639593 0.5 1.42857 0.5C2.21755 0.5 2.85714 1.13959 2.85714 1.92857Z" fill="white"/>
+<path d="M10 9.07143C10 9.86041 9.36041 10.5 8.57143 10.5C7.78245 10.5 7.14286 9.86041 7.14286 9.07143C7.14286 8.28245 7.78245 7.64286 8.57143 7.64286C9.36041 7.64286 10 8.28245 10 9.07143Z" fill="white"/>
+<path d="M5.71429 3C5.71429 2.40827 6.19398 1.92857 6.78571 1.92857C7.37745 1.92857 7.85714 2.40827 7.85714 3V6.21429H9.28571V3C9.28571 1.61929 8.16643 0.5 6.78571 0.5C5.405 0.5 4.28571 1.61929 4.28571 3V8C4.28571 8.59173 3.80602 9.07143 3.21429 9.07143C2.62255 9.07143 2.14286 8.59173 2.14286 8V4.78571H0.714286V8C0.714286 9.38071 1.83357 10.5 3.21429 10.5C4.595 10.5 5.71429 9.38071 5.71429 8V3Z" fill="white"/>
+</svg>

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

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

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

@@ -5,6 +5,7 @@
       :custom-color="customColor"
       :data-id="dataId"
       :font-color="fontColor"
+      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
@@ -43,8 +44,11 @@
     customColor: String,
     fontColor: String,
     noWrap: Boolean,
+    height: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
+    display: flex;
+    justify-content: center;
     padding: 7px 15px;
     font-size: 13px;
     color: ${(props) =>
@@ -67,6 +71,7 @@
     user-select: none;
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
+    height: ${(props) => props.height};
 
     &:hover {
       opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
@@ -136,6 +141,11 @@
         default: null,
         type: String,
       },
+      height: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
       id: {
         required: false,
         default: null,

package/src/components/icon/index.vue

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

package/src/components/infoText/index.vue

@@ -1,32 +1,35 @@
 <template>
-  <ComponentWrapper>
-    <IconWrapper :size="size">
-      <IconImg
-        data-test-id="infoText_trigger"
-        @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-      >
-        <IconComponent
-          :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>
-    </IconWrapper>
-  </ComponentWrapper>
+  <PageContainer ref="container">
+    <div
+      ref="icon"
+      data-test-id="infoText_trigger"
+      @click="openTrigger === 'onClick' && toggleInfo()"
+      @mouseenter="openTrigger === 'onHover' && showInfo()"
+      @mouseleave="openTrigger === 'onHover' && hideInfo()"
+    >
+      <IconComponent
+        :color="iconColor"
+        cursor="pointer"
+        name="info"
+        :size="size"
+      />
+    </div>
+    <Teleport v-if="isVisible" to="body">
+      <TextWrapper :style="wrapperStyle">
+        <TextOverlay ref="infoBox" :image="image" :style="boxStyle">
+          <OverlayImage
+            v-if="image"
+            ref="infoImage"
+            alt="Info Image"
+            :src="image"
+            @load="onImageLoad"
+          />
+          <span ref="textContent" :style="textStyle" v-html="text"></span>
+        </TextOverlay>
+        <Arrow :image="image" :style="arrowStyle" />
+      </TextWrapper>
+    </Teleport>
+  </PageContainer>
 </template>
 
 <script>
@@ -35,90 +38,77 @@
   // <info-text
   //     text="Veritatis et quasi architecto beatae vitae"
   //     size="20px"
-  //     alignArrow="right" // which side the arrow should be on
+  //     openTrigger="onClick"
+  //     buttonType="error"
+  //     image="path/to/image.jpg"
   // />
-  import theme from '../../assets/theme.js'
-  import styled from 'vue3-styled-components'
+  import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
   import IconComponent from '../icon'
+  import styled from 'vue3-styled-components'
+  import theme from '../../assets/theme.js'
 
-  const textAttrs = {
-    iconSize: String,
-    alignArrow: String,
-    width: String,
-    halfComputedTextInfoWidth: Number,
-    infoPosition: String,
-  }
-  const TextOverlay = styled('div', textAttrs)`
-    position: absolute;
-    ${(props) =>
-      props.infoPosition == 'top'
-        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
-        : 'top : 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: left;
-    background: ${(props) => props.theme.colors.black};
-    padding: 10px;
-    width: ${(props) => props.width};
-    max-width: ${(props) => props.maxWidth};
-    font-size: 13px;
-    font-weight: 400;
-    line-height: normal;
+  const TextOverlay = styled('div')`
+    background-color: ${(props) =>
+      props.image ? props.theme.colors.white : props.theme.colors.black};
+    color: ${(props) =>
+      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
+    font-size: ${(props) => (props.image ? '12px' : '13px')};
     border-radius: 4px;
-    z-index: 999;
-    color: ${(props) => props.theme.colors.white};
-
-    :before {
-      content: '';
-      background-color: ${(props) => props.theme.colors.black};
-      position: absolute;
-
-      ${(props) =>
-        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
+    padding: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    width: 100%; // Ensure the TextOverlay takes full width of its parent
+    box-shadow: ${(props) =>
+      props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
 
-      ${(props) =>
-        props.alignArrow === 'left'
-          ? 'left:40px;'
-          : props.alignArrow == 'center'
-          ? 'left: calc(50% + 19px);'
-          : 'right:-13px;'};
-      height: 8px;
-      width: 8px;
-      transform-origin: center center;
-      transform: translate(-2em, -0.5em) rotate(45deg);
+    a {
+      color: ${(props) => props.theme.colors.blue};
     }
 
-    span a {
-      color: #2cc0eb;
+    img + span {
+      margin-top: 10px;
+      display: block;
     }
   `
 
-  const iconAttrs = { size: String }
-  const IconWrapper = styled('div', iconAttrs)`
+  const Arrow = styled('div')`
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid
+      ${(props) =>
+        props.image ? props.theme.colors.white : props.theme.colors.black};
+    filter: ${(props) =>
+      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  `
+
+  const PageContainer = styled('div')`
+    display: inline-block;
     position: relative;
-    height: ${(props) => props.size};
   `
 
-  const IconImg = styled.div`
-    line-height: 0;
+  const TextWrapper = styled('div')`
+    z-index: 99999;
+    position: absolute;
   `
 
-  const ComponentWrapper = styled.div`
-    display: inline-block;
+  const OverlayImage = styled('img')`
+    width: 100%;
+    height: auto;
   `
 
   export default {
     name: 'InfoText',
     components: {
-      IconWrapper,
-      TextOverlay,
-      ComponentWrapper,
-      IconImg,
       IconComponent,
+      TextOverlay,
+      Arrow,
+      PageContainer,
+      TextWrapper,
+      OverlayImage,
     },
     props: {
       text: {
@@ -127,7 +117,7 @@
         type: String,
       },
       size: {
-        required: false,
+        type: String,
         default: '14px',
         type: String,
       },
@@ -136,54 +126,228 @@
         default: 'bottom',
         type: String,
       },
-      alignArrow: {
-        required: false,
-        default: 'center',
+      maxWidth: {
+        default: '400px',
         type: String,
       },
       openTrigger: {
-        required: false,
-        default: 'onHover', // onHover, onClick
         type: String,
+        default: 'onHover',
+        validator: (value) => ['onHover', 'onClick'].includes(value),
       },
-      width: {
-        required: false,
-        default: '165px',
+      buttonType: {
         type: String,
+        default: 'regular',
+        validator: (value) => ['regular', 'error'].includes(value),
       },
-      maxWidth: {
-        default: '400px',
+      image: {
         type: String,
+        default: '',
       },
     },
-    data() {
+    setup(props) {
+      const isVisible = ref(false)
+      const container = ref(null)
+      const icon = ref(null)
+      const infoBox = ref(null)
+      const textContent = ref(null)
+      const infoImage = ref(null)
+      const infoBoxWidth = ref(0)
+      const infoBoxHeight = ref(0)
+      const boxStyle = ref({})
+      const arrowStyle = ref({})
+      const wrapperStyle = ref({})
+
+      const textStyle = computed(() => ({
+        fontSize: props.image ? '12px' : '13px',
+        color: props.image ? theme.colors.grey1 : theme.colors.white,
+        textAlign: props.image ? 'right' : 'left',
+      }))
+
+      const calculatePosition = (width) => {
+        if (!icon.value) return {}
+
+        const iconRect = icon.value.getBoundingClientRect()
+        const windowHeight = window.innerHeight
+        const windowWidth = window.innerWidth
+
+        let top = iconRect.bottom + 10
+        let left = iconRect.left
+
+        // Adjust left based on the infoBoxWidth
+        if (left + width > windowWidth) {
+          left = windowWidth - width - 10
+        }
+
+        // Ensure there's enough space below or place above if not
+        const isAbove = top + infoBoxHeight.value > windowHeight
+        if (isAbove) {
+          top = iconRect.top - infoBoxHeight.value - 10
+        }
+
+        // Calculate arrow position
+        let arrowLeft = iconRect.left - left + iconRect.width / 2 - 8
+
+        // Adjust arrow position if it's too close to the edges
+        const edgeThreshold = 2 // pixels from the edge to start adjusting
+        if (arrowLeft < edgeThreshold) {
+          arrowLeft = edgeThreshold
+        } else if (arrowLeft > width - 16 - edgeThreshold) {
+          arrowLeft = width - 16 - edgeThreshold
+        }
+
+        const arrowTop = isAbove ? 'auto' : '-7px'
+        const arrowBottom = isAbove ? '-7px' : 'auto'
+
+        arrowStyle.value = {
+          left: `${arrowLeft}px`,
+          top: arrowTop,
+          bottom: arrowBottom,
+          transform: isAbove ? 'none' : 'rotate(180deg)',
+        }
+
+        wrapperStyle.value = {
+          position: 'fixed',
+          top: `${top}px`,
+          left: `${left}px`,
+          transform: 'none',
+          width: `${width}px`, // Set a fixed width for the wrapper
+        }
+
+        return {
+          width: '100%', // Always use 100% width for the TextOverlay
+          maxWidth: props.maxWidth,
+          overflowY: 'auto',
+          backgroundColor: props.image
+            ? theme.colors.white
+            : theme.colors.black,
+        }
+      }
+
+      const showInfo = async () => {
+        isVisible.value = true
+        await nextTick()
+        updatePosition()
+      }
+
+      const hideInfo = () => {
+        isVisible.value = false
+      }
+
+      const toggleInfo = () => {
+        isVisible.value ? hideInfo() : showInfo()
+      }
+
+      const handleScroll = () => {
+        if (isVisible.value) {
+          hideInfo()
+        }
+        updatePosition()
+      }
+
+      const isIconInView = () => {
+        if (!icon.value) return false
+        const rect = icon.value.getBoundingClientRect()
+        return (
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.bottom <=
+            (window.innerHeight || document.documentElement.clientHeight) &&
+          rect.right <=
+            (window.innerWidth || document.documentElement.clientWidth)
+        )
+      }
+
+      const updatePosition = async () => {
+        if (infoBox.value && textContent.value) {
+          await nextTick()
+
+          if (isIconInView()) {
+            const contentWidth = textContent.value.offsetWidth
+            infoBoxWidth.value = Math.min(
+              Math.max(contentWidth, 200), // Set a minimum width of 200px
+              parseInt(props.maxWidth, 10)
+            )
+            infoBoxHeight.value = infoBox.value.$el.offsetHeight
+            boxStyle.value = calculatePosition(infoBoxWidth.value)
+
+            // Now make it visible if it should be
+            if (isVisible.value) {
+              infoBox.value.$el.style.visibility = 'visible'
+            }
+          } else if (isVisible.value) {
+            hideInfo()
+          }
+        }
+      }
+
+      const onImageLoad = () => {
+        if (infoImage.value) {
+          infoBoxHeight.value = infoBox.value.$el.offsetHeight
+          updatePosition()
+        }
+      }
+
+      const handleClickOutside = (event) => {
+        if (props.openTrigger === 'onClick' && isVisible.value) {
+          const clickedElement = event.target
+          if (
+            infoBox.value &&
+            !infoBox.value.$el.contains(clickedElement) &&
+            !icon.value.contains(clickedElement)
+          ) {
+            hideInfo()
+          }
+        }
+      }
+
+      onMounted(() => {
+        window.addEventListener('scroll', handleScroll, { passive: true })
+        window.addEventListener('resize', updatePosition)
+        document.addEventListener('scroll', handleScroll, {
+          passive: true,
+          capture: true,
+        })
+        document.addEventListener('click', handleClickOutside)
+      })
+
+      onUnmounted(() => {
+        window.removeEventListener('scroll', handleScroll)
+        window.removeEventListener('resize', updatePosition)
+        document.removeEventListener('scroll', handleScroll, { capture: true })
+        document.removeEventListener('click', handleClickOutside)
+      })
+
+      watch(isVisible, (newValue) => {
+        if (newValue) {
+          updatePosition()
+        }
+      })
+
       return {
-        showInfo: false,
+        isVisible,
+        boxStyle,
+        arrowStyle,
+        showInfo,
+        hideInfo,
+        toggleInfo,
+        container,
+        icon,
+        infoBox,
+        textContent,
+        infoImage,
+        infoBoxWidth,
+        infoBoxHeight,
+        wrapperStyle,
+        textStyle,
+        onImageLoad,
       }
     },
     computed: {
       iconColor() {
-        return theme.colors.mediumGray
-      },
-      halfComputedTextInfoWidth() {
-        return parseInt(this.width) / 2
-      },
-    },
-    methods: {
-      toggleShowInfo() {
-        this.showInfo = !this.showInfo
-
-        if (this.showInfo) {
-          document.addEventListener('click', this.clickOutside)
-        } else {
-          document.removeEventListener('click', this.clickOutside)
-        }
-      },
-      clickOutside(event) {
-        if (this.$el.contains(event.target)) {
-          return
-        }
-        this.toggleShowInfo()
+        return this.buttonType === 'error'
+          ? theme.colors.red
+          : theme.colors.mediumGray
       },
     },
   }