@eturnity/eturnity_reusable_components 8.19.8-EPDM-13618.0 → 8.19.8-EPDM-14690.2

package/src/components/infoText/index.vue

@@ -1,645 +1,650 @@
-<template>
-  <PageContainer
-    ref="container"
-    :type="type"
-    @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-    @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-    @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
-  >
-    <div ref="icon" data-test-id="infoText_trigger">
-      <IconWrapper
-        :background-color="backgroundColor"
-        :border-radius="borderRadius"
-        :hovered-icon="hoveredIcon"
-        :is-active="isActive"
-        :is-disabled="isDisabled"
-        :padding="padding"
-      >
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'left'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
-        <Dot
-          v-if="type === 'dot'"
-          :color="dotColor"
-          data-test-id="infoText_dot"
-        />
-        <IconComponent
-          v-else-if="!noIcon"
-          :color="iconColor || computedIconColor"
-          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-          :disabled="isDisabled"
-          :hovered-color="iconColor || computedIconColor"
-          :name="iconName"
-          :size="size"
-        />
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'right'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
-      </IconWrapper>
-    </div>
-    <Teleport v-if="isVisible" to="body">
-      <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
-        <TextOverlay
-          ref="infoBox"
-          :app-theme="appTheme"
-          :image="image"
-          :style="boxStyle"
-          :width="infoBoxWidth"
-        >
-          <OverlayImage
-            v-if="image"
-            ref="infoImage"
-            alt="Info Image"
-            :src="image"
-            @load="onImageLoad"
-          />
-          <span v-if="!hideInfoText" ref="textContent" :style="textStyle">
-            <slot>
-              <span v-html="text"></span>
-            </slot>
-          </span>
-        </TextOverlay>
-        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
-      </TextWrapper>
-    </Teleport>
-  </PageContainer>
-</template>
-
-<script>
-  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-  //To use:
-  // <info-text
-  //     text="Veritatis et quasi architecto beatae vitae"
-  //     size="20px"
-  //     openTrigger="onClick"
-  //     buttonType="error"
-  //     image="path/to/image.jpg"
-  // />
-  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 TextOverlayAttrs = {
-    appTheme: String,
-    image: Boolean,
-    width: Number,
-  }
-  const TextOverlay = styled('div', TextOverlayAttrs)`
-    color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.black};
-    font-size: ${(props) => (props.image ? '12px' : '13px')};
-    border-radius: 4px;
-    padding: 10px;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-    width: ${(props) => (props.width ? `${props.width}px` : '100%')};
-    box-shadow: ${(props) =>
-      props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
-
-    a {
-      color: ${(props) => props.theme.colors.blue};
-    }
-
-    img + span {
-      margin-top: 10px;
-      display: block;
-    }
-  `
-
-  // const Arrow = styled('div')`
-  //   position: absolute;
-  //   width: 0;
-  //   height: 0;
-  //   border: 8px solid transparent;
-  //   border-top-color: ${(props) =>
-  //     props.image
-  //       ? props.theme.colors.white
-  //       : props.appTheme === 'dark'
-  //       ? props.theme.colors.grey5
-  //       : 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: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
-    position: relative;
-  `
-
-  const TextWrapper = styled('div')`
-    z-index: 9999999999;
-    position: absolute;
-  `
-
-  const OverlayImage = styled('img')`
-    width: 100%;
-    height: auto;
-  `
-
-  const Dot = styled('div')`
-    width: 5px;
-    height: 5px;
-    background-color: ${(props) => props.color};
-    border-radius: 50%;
-  `
-
-  const IconWrapperAttrs = {
-    backgroundColor: String,
-    borderRadius: String,
-    padding: String,
-    hoveredIcon: Boolean,
-    isActive: Boolean,
-    isDisabled: Boolean,
-  }
-  const IconWrapper = styled('div', IconWrapperAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    white-space: nowrap;
-    background-color: ${(props) => props.backgroundColor};
-    border-radius: ${(props) =>
-      props.hoveredIcon ? '6px' : props.borderRadius};
-    padding: ${(props) => props.padding};
-    width: ${(props) => (props.hoveredIcon ? '32px' : '')};
-    height: ${(props) => (props.hoveredIcon ? '32px' : '')};
-    cursor: pointer;
-    background-color: ${(props) =>
-      props.isActive ? props.theme.colors.transparentWhite2 : ''};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    &:hover {
-      background-color: ${(props) =>
-        props.hoveredIcon ? props.theme.colors.transparentWhite2 : ''};
-    }
-  `
-
-  const LabelWrapperAttrs = {
-    size: String,
-    color: String,
-  }
-  const LabelWrapper = styled('div', LabelWrapperAttrs)`
-    font-size: ${(props) => props.size};
-    color: ${(props) => props.color};
-  `
-
-  export default {
-    name: 'InfoText',
-    components: {
-      IconComponent,
-      TextOverlay,
-      // Arrow,
-      Dot,
-      PageContainer,
-      TextWrapper,
-      OverlayImage,
-      IconWrapper,
-      LabelWrapper,
-    },
-    props: {
-      text: {
-        required: false,
-        default: '',
-        type: String,
-      },
-      isActive: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      labelText: {
-        required: false,
-        default: '',
-        type: String,
-      },
-      size: {
-        type: String,
-        default: '14px',
-      },
-      infoPosition: {
-        required: false,
-        default: 'bottom',
-        type: String,
-      },
-      maxWidth: {
-        default: '400px',
-        type: String,
-      },
-      openTrigger: {
-        type: String,
-        default: 'onHover',
-        validator: (value) => ['onHover', 'onClick'].includes(value),
-      },
-      buttonType: {
-        type: String,
-        default: 'regular',
-        validator: (value) => ['regular', 'error'].includes(value),
-      },
-      image: {
-        type: String,
-        default: '',
-      },
-      iconName: {
-        type: String,
-        default: 'info',
-      },
-      iconColor: {
-        type: String,
-        default: null,
-        required: false,
-      },
-      isDisabled: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-      dotColor: {
-        type: String,
-        required: false,
-        default: theme.semanticColors.blue[400],
-      },
-      type: {
-        type: String,
-        required: false,
-        default: 'info', // info, dot
-      },
-      appTheme: {
-        type: String,
-        default: 'light', // light or dark
-        required: false,
-      },
-      labelAlign: {
-        type: String,
-        default: 'right',
-        required: false,
-      },
-      backgroundColor: {
-        type: String,
-        default: '',
-        required: false,
-      },
-      borderRadius: {
-        type: String,
-        default: '',
-        required: false,
-      },
-      padding: {
-        type: String,
-        default: '',
-        required: false,
-      },
-      labelSize: {
-        type: String,
-        default: '12px',
-        required: false,
-      },
-      noIcon: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-      hoveredIcon: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-      hideInfoText: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-    },
-    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 isMobile = ref(window.innerWidth <= 768)
-
-      const textStyle = computed(() => ({
-        fontSize: props.image ? '12px' : '13px',
-        color: props.image
-          ? theme.colors.grey1
-          : props.appTheme === 'dark'
-          ? theme.colors.black
-          : theme.colors.white,
-        textAlign: props.image ? 'right' : 'left',
-      }))
-
-      const calculatePosition = (width) => {
-        if (!icon.value || !width) return {}
-
-        const iconRect = icon.value.getBoundingClientRect()
-        const windowHeight = window.innerHeight
-        const windowWidth = window.innerWidth
-
-        // Calculate available space in all directions
-        const spaceBelow = windowHeight - iconRect.bottom - 10
-        const spaceAbove = iconRect.top - 10
-        const spaceRight = windowWidth - iconRect.right - 10
-        const spaceLeft = iconRect.left - 10
-
-        // Determine the best position based on available space
-        const positions = [
-          { position: 'bottom', space: spaceBelow },
-          { position: 'top', space: spaceAbove },
-          { position: 'right', space: spaceRight },
-          { position: 'left', space: spaceLeft },
-        ].sort((a, b) => b.space - a.space)
-
-        const bestPosition = positions[0].position
-
-        let top, left, arrowPosition
-
-        switch (bestPosition) {
-          case 'bottom':
-            top = Math.round(iconRect.bottom + 10)
-            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
-            arrowPosition = {
-              left: `${Math.round(
-                Math.min(
-                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
-                  width - 18
-                )
-              )}px`,
-              top: '-7px',
-              bottom: 'auto',
-              transform: 'rotate(180deg)',
-            }
-            break
-
-          case 'top':
-            top = Math.round(iconRect.top - infoBoxHeight.value - 10)
-            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
-            arrowPosition = {
-              left: `${Math.round(
-                Math.min(
-                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
-                  width - 18
-                )
-              )}px`,
-              top: 'auto',
-              bottom: '-7px',
-              transform: 'none',
-            }
-            break
-
-          case 'right':
-            top = Math.round(
-              Math.max(
-                Math.min(
-                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
-                  windowHeight - infoBoxHeight.value - 10
-                ),
-                10
-              )
-            )
-            left = Math.round(iconRect.right + 10)
-            arrowPosition = {
-              left: '-7px',
-              top: `${Math.round(
-                Math.min(
-                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
-                  infoBoxHeight.value - 18
-                )
-              )}px`,
-              bottom: 'auto',
-              transform: 'rotate(90deg)',
-            }
-            break
-
-          case 'left':
-            top = Math.round(
-              Math.max(
-                Math.min(
-                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
-                  windowHeight - infoBoxHeight.value - 10
-                ),
-                10
-              )
-            )
-            left = Math.round(iconRect.left - width - 10)
-            arrowPosition = {
-              left: 'auto',
-              right: '-7px',
-              top: `${Math.round(
-                Math.min(
-                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
-                  infoBoxHeight.value - 18
-                )
-              )}px`,
-              bottom: 'auto',
-              transform: 'rotate(-90deg)',
-            }
-            break
-        }
-
-        // Set arrow styles
-        arrowStyle.value = arrowPosition
-
-        // Set wrapper styles
-        wrapperStyle.value = {
-          position: 'fixed',
-          top: `${top}px`,
-          left: `${left}px`,
-          transform: 'none',
-          width: `${width}px`,
-        }
-
-        return {
-          width: '100%',
-          maxWidth: props.maxWidth,
-          overflowY: 'auto',
-          backgroundColor: props.image
-            ? theme.colors.white
-            : props.appTheme === 'light'
-            ? theme.colors.black
-            : theme.colors.grey5,
-        }
-      }
-
-      const showInfo = async () => {
-        isVisible.value = true
-        // Wait for two render cycles to ensure content is stable
-        await nextTick()
-        await nextTick()
-        await updatePosition()
-      }
-
-      const hideInfo = () => {
-        isVisible.value = false
-        infoBoxWidth.value = 0 // Reset width when hiding
-      }
-
-      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) return
-
-        // First make the content visible but hidden to get accurate measurements
-        if (infoBox.value.$el) {
-          infoBox.value.$el.style.visibility = 'hidden'
-          infoBox.value.$el.style.display = 'block'
-        }
-
-        await nextTick()
-
-        if (!isIconInView()) {
-          if (isVisible.value) hideInfo()
-          return
-        }
-
-        // Create a temporary clone to measure true width
-        const clone = textContent.value.cloneNode(true)
-        clone.style.position = 'absolute'
-        clone.style.visibility = 'hidden'
-        clone.style.width = 'auto'
-        clone.style.maxWidth = 'none'
-        clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
-        document.body.appendChild(clone)
-
-        // Get fresh content width from clone
-        const contentWidth = clone.offsetWidth
-        document.body.removeChild(clone)
-
-        // Calculate new width
-        const calculatedWidth = Math.min(
-          Math.max(contentWidth, 230),
-          parseInt(props.maxWidth, 10)
-        )
-
-        // Set new dimensions
-        infoBoxWidth.value = calculatedWidth
-
-        // Wait for width to be applied
-        await nextTick()
-
-        infoBoxHeight.value = infoBox.value.$el.offsetHeight
-
-        // Calculate and apply position
-        boxStyle.value = calculatePosition(calculatedWidth)
-
-        // Make visible after position is set
-        if (isVisible.value && infoBox.value.$el) {
-          infoBox.value.$el.style.visibility = 'visible'
-        }
-      }
-
-      const onImageLoad = () => {
-        if (infoImage.value) {
-          infoBoxHeight.value = infoBox.value.$el.offsetHeight
-          updatePosition()
-        }
-      }
-
-      const handleClickOutside = (event) => {
-        if (
-          (props.openTrigger === 'onClick' || isMobile.value) &&
-          isVisible.value
-        ) {
-          const clickedElement = event.target
-          if (
-            infoBox.value &&
-            !infoBox.value.$el.contains(clickedElement) &&
-            !icon.value.contains(clickedElement)
-          ) {
-            hideInfo()
-          }
-        }
-      }
-
-      const handleResize = () => {
-        isMobile.value = window.innerWidth <= 768
-        updatePosition()
-      }
-
-      onMounted(() => {
-        window.addEventListener('scroll', handleScroll, { passive: true })
-        window.addEventListener('resize', handleResize)
-        document.addEventListener('scroll', handleScroll, {
-          passive: true,
-          capture: true,
-        })
-        document.addEventListener('click', handleClickOutside)
-      })
-
-      onUnmounted(() => {
-        window.removeEventListener('scroll', handleScroll)
-        window.removeEventListener('resize', handleResize)
-        document.removeEventListener('scroll', handleScroll, { capture: true })
-        document.removeEventListener('click', handleClickOutside)
-      })
-
-      watch(isVisible, (newValue) => {
-        if (newValue) {
-          updatePosition()
-        }
-      })
-
-      return {
-        isVisible,
-        boxStyle,
-        arrowStyle,
-        showInfo,
-        hideInfo,
-        toggleInfo,
-        container,
-        icon,
-        infoBox,
-        textContent,
-        infoImage,
-        infoBoxWidth,
-        infoBoxHeight,
-        wrapperStyle,
-        textStyle,
-        onImageLoad,
-        isMobile,
-      }
-    },
-    computed: {
-      computedIconColor() {
-        return this.buttonType === 'error'
-          ? theme.colors.red
-          : theme.colors.mediumGray
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer
+    ref="container"
+    :type="type"
+    @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+    @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+    @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
+  >
+    <div ref="icon" data-test-id="infoText_trigger">
+      <IconWrapper
+        :background-color="backgroundColor"
+        :border-radius="borderRadius"
+        :hovered-icon="hoveredIcon"
+        :is-active="isActive"
+        :is-disabled="isDisabled"
+        :padding="padding"
+      >
+        <template v-if="!$slots.trigger">
+          <LabelWrapper
+            v-if="labelText && labelAlign === 'left'"
+            :color="iconColor || computedIconColor"
+            :size="labelSize"
+          >
+            {{ labelText }}
+          </LabelWrapper>
+          <Dot
+            v-if="type === 'dot'"
+            :color="dotColor"
+            data-test-id="infoText_dot"
+          />
+          <IconComponent
+            v-else-if="!noIcon"
+            :color="iconColor || computedIconColor"
+            :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+            :disabled="isDisabled"
+            :hovered-color="iconColor || computedIconColor"
+            :name="iconName"
+            :size="size"
+          />
+          <LabelWrapper
+            v-if="labelText && labelAlign === 'right'"
+            :color="iconColor || computedIconColor"
+            :size="labelSize"
+          >
+            {{ labelText }}
+          </LabelWrapper>
+        </template>
+        <slot name="trigger"></slot>
+      </IconWrapper>
+    </div>
+    <Teleport v-if="isVisible && !!text" to="body">
+      <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
+        <TextOverlay
+          ref="infoBox"
+          :app-theme="appTheme"
+          :image="image"
+          :style="boxStyle"
+          :width="infoBoxWidth"
+        >
+          <OverlayImage
+            v-if="image"
+            ref="infoImage"
+            alt="Info Image"
+            :src="image"
+            @load="onImageLoad"
+          />
+          <span v-if="!hideInfoText" ref="textContent" :style="textStyle">
+            <slot>
+              <span v-html="text"></span>
+            </slot>
+          </span>
+        </TextOverlay>
+        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
+      </TextWrapper>
+    </Teleport>
+  </PageContainer>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  //To use:
+  // <info-text
+  //     text="Veritatis et quasi architecto beatae vitae"
+  //     size="20px"
+  //     openTrigger="onClick"
+  //     buttonType="error"
+  //     image="path/to/image.jpg"
+  // />
+  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 TextOverlayAttrs = {
+    appTheme: String,
+    image: Boolean,
+    width: Number,
+  }
+  const TextOverlay = styled('div', TextOverlayAttrs)`
+    color: ${(props) =>
+      props.image ? props.theme.colors.grey1 : props.theme.colors.black};
+    font-size: ${(props) => (props.image ? '12px' : '13px')};
+    border-radius: 4px;
+    padding: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    width: ${(props) => (props.width ? `${props.width}px` : '100%')};
+    box-shadow: ${(props) =>
+      props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
+
+    a {
+      color: ${(props) => props.theme.colors.blue};
+    }
+
+    img + span {
+      margin-top: 10px;
+      display: block;
+    }
+  `
+
+  // const Arrow = styled('div')`
+  //   position: absolute;
+  //   width: 0;
+  //   height: 0;
+  //   border: 8px solid transparent;
+  //   border-top-color: ${(props) =>
+  //     props.image
+  //       ? props.theme.colors.white
+  //       : props.appTheme === 'dark'
+  //       ? props.theme.colors.grey5
+  //       : 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: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
+    position: relative;
+  `
+
+  const TextWrapper = styled('div')`
+    z-index: 9999999999;
+    position: absolute;
+  `
+
+  const OverlayImage = styled('img')`
+    width: 100%;
+    height: auto;
+  `
+
+  const Dot = styled('div')`
+    width: 5px;
+    height: 5px;
+    background-color: ${(props) => props.color};
+    border-radius: 50%;
+  `
+
+  const IconWrapperAttrs = {
+    backgroundColor: String,
+    borderRadius: String,
+    padding: String,
+    hoveredIcon: Boolean,
+    isActive: Boolean,
+    isDisabled: Boolean,
+  }
+  const IconWrapper = styled('div', IconWrapperAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+    background-color: ${(props) => props.backgroundColor};
+    border-radius: ${(props) =>
+      props.hoveredIcon ? '6px' : props.borderRadius};
+    padding: ${(props) => props.padding};
+    width: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    height: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    cursor: pointer;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.transparentWhite2 : ''};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    &:hover {
+      background-color: ${(props) =>
+        props.hoveredIcon ? props.theme.colors.transparentWhite2 : ''};
+    }
+  `
+
+  const LabelWrapperAttrs = {
+    size: String,
+    color: String,
+  }
+  const LabelWrapper = styled('div', LabelWrapperAttrs)`
+    font-size: ${(props) => props.size};
+    color: ${(props) => props.color};
+  `
+
+  export default {
+    name: 'InfoText',
+    components: {
+      IconComponent,
+      TextOverlay,
+      // Arrow,
+      Dot,
+      PageContainer,
+      TextWrapper,
+      OverlayImage,
+      IconWrapper,
+      LabelWrapper,
+    },
+    props: {
+      text: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      labelText: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      size: {
+        type: String,
+        default: '14px',
+      },
+      infoPosition: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      maxWidth: {
+        default: '400px',
+        type: String,
+      },
+      openTrigger: {
+        type: String,
+        default: 'onHover',
+        validator: (value) => ['onHover', 'onClick'].includes(value),
+      },
+      buttonType: {
+        type: String,
+        default: 'regular',
+        validator: (value) => ['regular', 'error'].includes(value),
+      },
+      image: {
+        type: String,
+        default: '',
+      },
+      iconName: {
+        type: String,
+        default: 'info',
+      },
+      iconColor: {
+        type: String,
+        default: null,
+        required: false,
+      },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      dotColor: {
+        type: String,
+        required: false,
+        default: theme.semanticColors.blue[400],
+      },
+      type: {
+        type: String,
+        required: false,
+        default: 'info', // info, dot
+      },
+      appTheme: {
+        type: String,
+        default: 'light', // light or dark
+        required: false,
+      },
+      labelAlign: {
+        type: String,
+        default: 'right',
+        required: false,
+      },
+      backgroundColor: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      borderRadius: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      padding: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      labelSize: {
+        type: String,
+        default: '12px',
+        required: false,
+      },
+      noIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hoveredIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hideInfoText: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+    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 isMobile = ref(window.innerWidth <= 768)
+
+      const textStyle = computed(() => ({
+        fontSize: props.image ? '12px' : '13px',
+        color: props.image
+          ? theme.colors.grey1
+          : props.appTheme === 'dark'
+          ? theme.colors.black
+          : theme.colors.white,
+        textAlign: props.image ? 'right' : 'left',
+      }))
+
+      const calculatePosition = (width) => {
+        if (!icon.value || !width) return {}
+
+        const iconRect = icon.value.getBoundingClientRect()
+        const windowHeight = window.innerHeight
+        const windowWidth = window.innerWidth
+
+        // Calculate available space in all directions
+        const spaceBelow = windowHeight - iconRect.bottom - 10
+        const spaceAbove = iconRect.top - 10
+        const spaceRight = windowWidth - iconRect.right - 10
+        const spaceLeft = iconRect.left - 10
+
+        // Determine the best position based on available space
+        const positions = [
+          { position: 'bottom', space: spaceBelow },
+          { position: 'top', space: spaceAbove },
+          { position: 'right', space: spaceRight },
+          { position: 'left', space: spaceLeft },
+        ].sort((a, b) => b.space - a.space)
+
+        const bestPosition = props.infoPosition
+          ? props.infoPosition
+          : positions[0].position
+
+        let top, left, arrowPosition
+
+        switch (bestPosition) {
+          case 'bottom':
+            top = Math.round(iconRect.bottom + 10)
+            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
+            arrowPosition = {
+              left: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
+                  width - 18
+                )
+              )}px`,
+              top: '-7px',
+              bottom: 'auto',
+              transform: 'rotate(180deg)',
+            }
+            break
+
+          case 'top':
+            top = Math.round(iconRect.top - infoBoxHeight.value - 10)
+            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
+            arrowPosition = {
+              left: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
+                  width - 18
+                )
+              )}px`,
+              top: 'auto',
+              bottom: '-7px',
+              transform: 'none',
+            }
+            break
+
+          case 'right':
+            top = Math.round(
+              Math.max(
+                Math.min(
+                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
+                  windowHeight - infoBoxHeight.value - 10
+                ),
+                10
+              )
+            )
+            left = Math.round(iconRect.right + 10)
+            arrowPosition = {
+              left: '-7px',
+              top: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
+                  infoBoxHeight.value - 18
+                )
+              )}px`,
+              bottom: 'auto',
+              transform: 'rotate(90deg)',
+            }
+            break
+
+          case 'left':
+            top = Math.round(
+              Math.max(
+                Math.min(
+                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
+                  windowHeight - infoBoxHeight.value - 10
+                ),
+                10
+              )
+            )
+            left = Math.round(iconRect.left - width - 10)
+            arrowPosition = {
+              left: 'auto',
+              right: '-7px',
+              top: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
+                  infoBoxHeight.value - 18
+                )
+              )}px`,
+              bottom: 'auto',
+              transform: 'rotate(-90deg)',
+            }
+            break
+        }
+
+        // Set arrow styles
+        arrowStyle.value = arrowPosition
+
+        // Set wrapper styles
+        wrapperStyle.value = {
+          position: 'fixed',
+          top: `${top}px`,
+          left: `${left}px`,
+          transform: 'none',
+          width: `${width}px`,
+        }
+
+        return {
+          width: '100%',
+          maxWidth: props.maxWidth,
+          overflowY: 'auto',
+          backgroundColor: props.image
+            ? theme.colors.white
+            : props.appTheme === 'light'
+            ? theme.colors.black
+            : theme.colors.grey5,
+        }
+      }
+
+      const showInfo = async () => {
+        isVisible.value = true
+        // Wait for two render cycles to ensure content is stable
+        await nextTick()
+        await nextTick()
+        await updatePosition()
+      }
+
+      const hideInfo = () => {
+        isVisible.value = false
+        infoBoxWidth.value = 0 // Reset width when hiding
+      }
+
+      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) return
+
+        // First make the content visible but hidden to get accurate measurements
+        if (infoBox.value.$el) {
+          infoBox.value.$el.style.visibility = 'hidden'
+          infoBox.value.$el.style.display = 'block'
+        }
+
+        await nextTick()
+
+        if (!isIconInView()) {
+          if (isVisible.value) hideInfo()
+          return
+        }
+
+        // Create a temporary clone to measure true width
+        const clone = textContent.value.cloneNode(true)
+        clone.style.position = 'absolute'
+        clone.style.visibility = 'hidden'
+        clone.style.width = 'auto'
+        clone.style.maxWidth = 'none'
+        clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
+        document.body.appendChild(clone)
+
+        // Get fresh content width from clone
+        const contentWidth = clone.offsetWidth
+        document.body.removeChild(clone)
+
+        // Calculate new width
+        const calculatedWidth = Math.min(
+          Math.max(contentWidth, 230),
+          parseInt(props.maxWidth, 10)
+        )
+
+        // Set new dimensions
+        infoBoxWidth.value = calculatedWidth
+
+        // Wait for width to be applied
+        await nextTick()
+
+        infoBoxHeight.value = infoBox.value.$el.offsetHeight
+
+        // Calculate and apply position
+        boxStyle.value = calculatePosition(calculatedWidth)
+
+        // Make visible after position is set
+        if (isVisible.value && infoBox.value.$el) {
+          infoBox.value.$el.style.visibility = 'visible'
+        }
+      }
+
+      const onImageLoad = () => {
+        if (infoImage.value) {
+          infoBoxHeight.value = infoBox.value.$el.offsetHeight
+          updatePosition()
+        }
+      }
+
+      const handleClickOutside = (event) => {
+        if (
+          (props.openTrigger === 'onClick' || isMobile.value) &&
+          isVisible.value
+        ) {
+          const clickedElement = event.target
+          if (
+            infoBox.value &&
+            !infoBox.value.$el.contains(clickedElement) &&
+            !icon.value.contains(clickedElement)
+          ) {
+            hideInfo()
+          }
+        }
+      }
+
+      const handleResize = () => {
+        isMobile.value = window.innerWidth <= 768
+        updatePosition()
+      }
+
+      onMounted(() => {
+        window.addEventListener('scroll', handleScroll, { passive: true })
+        window.addEventListener('resize', handleResize)
+        document.addEventListener('scroll', handleScroll, {
+          passive: true,
+          capture: true,
+        })
+        document.addEventListener('click', handleClickOutside)
+      })
+
+      onUnmounted(() => {
+        window.removeEventListener('scroll', handleScroll)
+        window.removeEventListener('resize', handleResize)
+        document.removeEventListener('scroll', handleScroll, { capture: true })
+        document.removeEventListener('click', handleClickOutside)
+      })
+
+      watch(isVisible, (newValue) => {
+        if (newValue) {
+          updatePosition()
+        }
+      })
+
+      return {
+        isVisible,
+        boxStyle,
+        arrowStyle,
+        showInfo,
+        hideInfo,
+        toggleInfo,
+        container,
+        icon,
+        infoBox,
+        textContent,
+        infoImage,
+        infoBoxWidth,
+        infoBoxHeight,
+        wrapperStyle,
+        textStyle,
+        onImageLoad,
+        isMobile,
+      }
+    },
+    computed: {
+      computedIconColor() {
+        return this.buttonType === 'error'
+          ? theme.colors.red
+          : theme.colors.mediumGray
+      },
+    },
+  }
+</script>