@eturnity/eturnity_reusable_components 7.51.13 → 7.51.15--EPDM-12129.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.13",
+  "version": "7.51.15--EPDM-12129.7",
   "files": [
     "dist",
     "src"

package/src/components/addNewButton/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageContainer :should-position="shouldPosition">
-    <ButtonContainer :data-id="dataId">
+    <ButtonContainer :data-id="dataId" :data-qa-id="dataQaId">
       <PlusButtonSvg />
     </ButtonContainer>
   </PageContainer>
@@ -57,6 +57,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

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

@@ -4,6 +4,7 @@
       :id="id"
       :custom-color="customColor"
       :data-id="dataId"
+      :data-qa-id="dataQaId"
       :font-color="fontColor"
       :height="height"
       :is-disabled="isDisabled"
@@ -164,6 +165,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

package/src/components/iconWrapper/index.vue

@@ -4,6 +4,7 @@
     :border-radius="borderRadius"
     :color="iconColor"
     :data-id="dataId"
+    :data-qa-id="dataQaId"
     :disabled="disabled"
     :has-border="hasBorder"
     :hovered-background-color="hoveredBackgroundColor"
@@ -154,6 +155,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       isHovered: {
         required: false,
         default: false,

package/src/components/infoText/index.vue

@@ -17,7 +17,12 @@
     </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"
@@ -63,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'};
 
@@ -81,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'};
   `
@@ -184,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
@@ -245,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 = () => {
@@ -278,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'
         }
       }
 

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

@@ -13,6 +13,7 @@
       <InputCheckbox
         :checked="isChecked"
         :data-id="dataId"
+        :data-qa-id="dataQaId"
         type="checkbox"
         @change="onChangeHandler(!isChecked)"
       />
@@ -214,6 +215,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       cursorType: {
         type: String,
         default: 'pointer',

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

@@ -15,6 +15,7 @@
     <LabelWrapper v-if="labelText">
       <LabelText
         :data-id="labelDataId"
+        :data-test-id="labelDataTestId"
         :label-font-color="labelFontColor"
         :label-font-weight="labelFontWeight"
       >
@@ -40,6 +41,7 @@
         "
         :color-mode="colorMode"
         :data-id="inputDataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
@@ -647,6 +649,10 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+      },
       showSelect: {
         type: Boolean,
         default: false,

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

@@ -34,6 +34,7 @@
             :background-color="backgroundColor"
             :border-color="borderColor"
             :data-id="inputDataId"
+            :data-qa-id="dataQaId"
             data-test-id="input"
             :default-padding="defaultPadding"
             :disabled="disabled"
@@ -377,6 +378,11 @@
         default: '',
         type: String,
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       iconName: {
         required: false,
         default: null,

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

@@ -17,6 +17,7 @@
         <Radio
           :checked="selectedOption === item.value"
           :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :data-qa-id="dataQaId"
           :data-test-id="'radioInput_' + item.value"
           :disabled="item.disabled"
           :name="'radioButtons_' + radioName"
@@ -296,6 +297,11 @@
         required: false,
         type: String,
       },
+      dataQaId: {
+        type: String,
+        default: '',
+        required: false,
+      },
       colorMode: {
         default: '',
         required: false,

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

@@ -5,6 +5,7 @@
       <InputContainer
         ref="inputElement"
         :data-id="dataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :has-focus="hasFocus"
         :input-width="inputWidth"
@@ -128,6 +129,11 @@
         default: '',
         type: [String, Number],
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       iconPosition: {
         type: String,
         default: 'right',

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

@@ -13,6 +13,7 @@
       <LabelWrapper
         v-if="label"
         :data-id="labelDataId"
+        :data-qa-id="dataQaId + '_label'"
         :info-text-message="!!infoTextMessage || !!$slots.infoText"
       >
         <InputLabel
@@ -51,6 +52,7 @@
           class="select-button"
           :color-mode="colorMode"
           :data-id="dataId"
+          :data-qa-id="dataQaId"
           :disabled="disabled"
           :font-color="
             buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
@@ -605,6 +607,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       hasSelectButtonPadding: {
         required: false,
         type: Boolean,

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

@@ -18,6 +18,7 @@
       >
         <textarea
           :data-id="inputDataId"
+          :data-qa-id="dataQaId"
           :disabled="isDisabled"
           :placeholder="placeholder"
           :resize="resize"
@@ -185,6 +186,11 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     methods: {
       onChangeHandler($event) {

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

@@ -2,6 +2,7 @@
   <Container>
     <FlexWrapper
       :data-id="dataId"
+      :data-qa-id="dataQaId"
       data-test-id="page_wrapper"
       :disabled="disabled"
       :size="size"
@@ -304,6 +305,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
     methods: {
       onToggleChange() {

package/src/components/label/index.vue

@@ -9,8 +9,7 @@
     <InfoText
       v-if="infoTextMessage"
       :align-arrow="infoTextAlign"
-      border-color="#ccc"
-      :size="fontSize ? fontSize : '16px'"
+      :size="fontSize ? fontSize : '14px'"
       :text="infoTextMessage"
     />
   </LabelWrapper>

package/src/components/rangeSlider/Slider.vue

@@ -2,6 +2,7 @@
   <div
     :class="className"
     :data-id="dataId"
+    :data-qa-id="dataQaId"
     :style="style"
     @mousedown="elementMouseDown"
     @touchstart="elementTouchDown"
@@ -64,6 +65,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       className: {
         type: String,
         default: 'vdr',

package/src/components/tableDropdown/index.vue

@@ -93,13 +93,14 @@
       </ComponentItem>
       <ArrowContainer class="arrow-container" :is-disabled="disabled">
         <ArrowWrapper :show-archived="showArchived">
-          <InfoText
-            v-if="showArchived"
-            icon-color="red"
-            :text="
-              $gettext(`Component has been archived and shouldn't be used`)
-            "
-          />
+          <InfoWrapper v-if="showArchived">
+            <InfoText
+              icon-color="red"
+              :text="
+                $gettext(`Component has been archived and shouldn't be used`)
+              "
+            />
+          </InfoWrapper>
           <ArrowDown
             v-if="!isOpen"
             class="arrow-dropdown"
@@ -434,6 +435,13 @@
     align-items: center;
   `
 
+  const InfoWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 8px;
+  `
+
   export default {
     name: 'TableDropdown',
     components: {
@@ -464,6 +472,7 @@
       NestedContainer,
       Icon,
       InfoText,
+      InfoWrapper,
     },
     props: {
       colSpan: {