@eturnity/eturnity_reusable_components 7.51.3-EPDM-12810.1 → 7.51.3-EPDM-12810.2

package/src/components/infoText/index.vue

@@ -2,20 +2,27 @@
   <PageContainer ref="container">
     <div
       ref="icon"
-      @click="openTrigger === 'onClick' && toggleInfo()"
-      @mouseenter="openTrigger === 'onHover' && showInfo()"
-      @mouseleave="openTrigger === 'onHover' && hideInfo()"
+      data-test-id="infoText_trigger"
+      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
     >
       <IconComponent
-        :color="iconColor"
-        cursor="pointer"
-        name="info"
+        :color="iconColor || computedIconColor"
+        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+        :disabled="isDisabled"
+        :name="iconName"
         :size="size"
       />
     </div>
     <Teleport v-if="isVisible" to="body">
       <TextWrapper :style="wrapperStyle">
-        <TextOverlay ref="infoBox" :image="image" :style="boxStyle">
+        <TextOverlay
+          ref="infoBox"
+          :image="image"
+          :style="boxStyle"
+          :width="infoBoxWidth"
+        >
           <OverlayImage
             v-if="image"
             ref="infoImage"
@@ -23,7 +30,11 @@
             :src="image"
             @load="onImageLoad"
           />
-          <span ref="textContent" :style="textStyle" v-html="text"></span>
+          <span ref="textContent" :style="textStyle">
+            <slot>
+              <span v-html="text"></span>
+            </slot>
+          </span>
         </TextOverlay>
         <Arrow :image="image" :style="arrowStyle" />
       </TextWrapper>
@@ -57,7 +68,7 @@
     word-wrap: break-word;
     overflow-wrap: break-word;
     white-space: normal;
-    width: 100%; // Ensure the TextOverlay takes full width of its parent
+    width: ${(props) => (props.width ? `${props.width}px` : '100%')};
     box-shadow: ${(props) =>
       props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
 
@@ -75,11 +86,9 @@
     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};
+    border: 8px solid transparent;
+    border-top-color: ${(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'};
   `
@@ -111,13 +120,13 @@
     },
     props: {
       text: {
-        type: String,
+        required: false,
         default: '',
+        type: String,
       },
       size: {
         type: String,
         default: '14px',
-        type: String,
       },
       infoPosition: {
         required: false,
@@ -142,6 +151,20 @@
         type: String,
         default: '',
       },
+      iconName: {
+        type: String,
+        default: 'info',
+      },
+      iconColor: {
+        type: String,
+        default: null,
+        required: false,
+      },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -155,6 +178,7 @@
       const boxStyle = ref({})
       const arrowStyle = ref({})
       const wrapperStyle = ref({})
+      const isMobile = ref(window.innerWidth <= 768)
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
@@ -163,57 +187,127 @@
       }))
 
       const calculatePosition = (width) => {
-        if (!icon.value) return {}
+        if (!icon.value || !width) 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
+        // 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
         }
 
-        const arrowTop = isAbove ? 'auto' : '-7px'
-        const arrowBottom = isAbove ? '-7px' : 'auto'
-
-        arrowStyle.value = {
-          left: `${arrowLeft}px`,
-          top: arrowTop,
-          bottom: arrowBottom,
-          transform: isAbove ? 'none' : 'rotate(180deg)',
-        }
+        // Set arrow styles
+        arrowStyle.value = arrowPosition
 
+        // Set wrapper styles
         wrapperStyle.value = {
           position: 'fixed',
           top: `${top}px`,
           left: `${left}px`,
           transform: 'none',
-          width: `${width}px`, // Set a fixed width for the wrapper
+          width: `${width}px`,
         }
 
         return {
-          width: '100%', // Always use 100% width for the TextOverlay
+          width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
           backgroundColor: props.image
@@ -224,12 +318,15 @@
 
       const showInfo = async () => {
         isVisible.value = true
+        // Wait for two render cycles to ensure content is stable
         await nextTick()
-        updatePosition()
+        await nextTick()
+        await updatePosition()
       }
 
       const hideInfo = () => {
         isVisible.value = false
+        infoBoxWidth.value = 0 // Reset width when hiding
       }
 
       const toggleInfo = () => {
@@ -257,25 +354,55 @@
       }
 
       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)
+        console.log('updatePosition')
+        if (!infoBox.value || !textContent.value) return
 
-            // Now make it visible if it should be
-            if (isVisible.value) {
-              infoBox.value.$el.style.visibility = 'visible'
-            }
-          } else if (isVisible.value) {
-            hideInfo()
-          }
+        // 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, 200),
+          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'
         }
       }
 
@@ -287,7 +414,10 @@
       }
 
       const handleClickOutside = (event) => {
-        if (props.openTrigger === 'onClick' && isVisible.value) {
+        if (
+          (props.openTrigger === 'onClick' || isMobile.value) &&
+          isVisible.value
+        ) {
           const clickedElement = event.target
           if (
             infoBox.value &&
@@ -299,9 +429,14 @@
         }
       }
 
+      const handleResize = () => {
+        isMobile.value = window.innerWidth <= 768
+        updatePosition()
+      }
+
       onMounted(() => {
         window.addEventListener('scroll', handleScroll, { passive: true })
-        window.addEventListener('resize', updatePosition)
+        window.addEventListener('resize', handleResize)
         document.addEventListener('scroll', handleScroll, {
           passive: true,
           capture: true,
@@ -311,7 +446,7 @@
 
       onUnmounted(() => {
         window.removeEventListener('scroll', handleScroll)
-        window.removeEventListener('resize', updatePosition)
+        window.removeEventListener('resize', handleResize)
         document.removeEventListener('scroll', handleScroll, { capture: true })
         document.removeEventListener('click', handleClickOutside)
       })
@@ -339,10 +474,11 @@
         wrapperStyle,
         textStyle,
         onImageLoad,
+        isMobile,
       }
     },
     computed: {
-      iconColor() {
+      computedIconColor() {
         return this.buttonType === 'error'
           ? theme.colors.red
           : theme.colors.mediumGray

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

@@ -19,7 +19,7 @@
       <CheckWrapper :has-label="hasLabel">
         <span class="checkmark"></span>
       </CheckWrapper>
-      <LabelText v-if="hasLabel">
+      <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
       </LabelText>
     </Container>
@@ -90,18 +90,20 @@
           ? '16px'
           : '25px'};
       background-color: ${(props) =>
-        props.isChecked
+        props.isDisabled
+          ? props.theme.colors.lightGray
+          : props.isChecked
           ? props.backgroundColor
             ? props.backgroundColor
             : props.theme.colors.green
-          : props.isDisabled
-          ? props.theme.colors.lightGray
           : props.theme.colors.white};
       border-radius: 4px;
       border: 1px solid
         ${(props) =>
           props.isChecked
-            ? props.backgroundColor
+            ? props.isDisabled
+              ? props.theme.colors.lightGray
+              : props.backgroundColor
               ? props.backgroundColor
               : props.theme.colors.green
             : props.theme.colors.mediumGray};
@@ -140,7 +142,11 @@
           : '10px'};
       border: solid
         ${(props) =>
-          props.checkColor ? props.checkColor : props.theme.colors.white};
+          props.isDisabled
+            ? props.theme.colors.green
+            : props.checkColor
+            ? props.checkColor
+            : props.theme.colors.white};
       border-width: ${(props) =>
         props.size === 'medium'
           ? '0 3px 3px 0'
@@ -160,11 +166,16 @@
     width: 0;
   `
 
-  const LabelText = styled.div`
+  const LabelTextAttrs = {
+    isDisabled: Boolean,
+  }
+  const LabelText = styled('div', LabelTextAttrs)`
     font-size: 13px;
     display: grid;
-    align-items: flex-start;
+    align-items: center;
     min-height: 18px;
+    color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `
 
   export default {