@eturnity/eturnity_reusable_components 8.46.1 → 8.46.2-EPDM-13987.1

package/src/assets/theme.js

@@ -654,7 +654,7 @@ const theme = (() => {
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.teal[200],
+              backgroundColor: 'transparent',
               textColor: semanticColors.red[400],
               borderColor: semanticColors.teal[500],
             },

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

@@ -4,6 +4,8 @@
       :app-theme="appTheme"
       :button-size="buttonSize"
       :custom-color="customColor"
+      :data-id="dataId"
+      :data-qa-id="dataQaId"
       data-test-id="button-icon-wrapper"
       :height="height"
       :is-active="isActive"
@@ -118,6 +120,7 @@
   const ButtonWrapper = styled('div', ButtonAttrs)`
     position: relative;
     display: grid;
+    align-content: center
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
     font-size: ${(props) =>
@@ -188,6 +191,7 @@
     justify-content: center;
     padding: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    padding-left: 4px;
     gap: 8px;
     white-space: nowrap;
   `
@@ -207,6 +211,7 @@
     width: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
     background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px 0 0 4px;
     border-right: ${(props) => {
       const borderColor =
         props.theme.mainButton[props.appTheme][props.type][props.variant]
@@ -379,6 +384,14 @@
         type: Boolean,
         default: false,
       },
+      dataId: {
+        type: String,
+        default: '',
+      },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {

package/src/components/icon/index.vue

@@ -1,6 +1,8 @@
 <template>
   <Wrapper
     :cursor="cursor"
+    :data-id="dataId"
+    :data-qa-id="dataQaId"
     data-test-id="icon_wrapper"
     :disabled="disabled"
     :height="height ? height : size"
@@ -123,6 +125,14 @@
       type: Number,
       default: null,
     },
+    dataId: {
+      type: String,
+      default: '',
+    },
+    dataQaId: {
+      type: String,
+      default: '',
+    },
   })
 
   const Wrapper = styled('div', {

package/src/components/infoCard/index.vue

@@ -14,7 +14,7 @@
       :color="iconColor ? iconColor : presetStyles.iconColor"
       data-test-id="info_card_icon"
       :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
-      :name="iconName"
+      :name="getIconName()"
       size="18px"
     />
     <TextContainer data-test-id="info_card_text_container">
@@ -123,6 +123,11 @@
         type: String,
         default: '',
       },
+      iconName: {
+        required: false,
+        type: String,
+        default: '',
+      },
     },
     computed: {
       isInfoSimple() {
@@ -138,7 +143,7 @@
       isErrorMinor() {
         return this.type === 'error_minor'
       },
-      iconName() {
+      iconTypeName() {
         return this.type === 'warning'
           ? 'warning_triangle'
           : this.isErrorMinor
@@ -176,5 +181,10 @@
         return stylesCollection
       },
     },
+    methods: {
+      getIconName() {
+        return this.iconName || this.iconTypeName
+      },
+    },
   }
 </script>

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

@@ -4,6 +4,8 @@
       <RadioWrapper
         v-for="(item, index) in options"
         :key="item.value"
+        :data-id="'radioWrapper_' + item.value"
+        :data-qa-id="'radioWrapper_' + item.value"
         :data-test-id="'radioWrapper_' + item.value"
       >
         <LabelContainer

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

@@ -718,7 +718,7 @@
       },
     },
     setup() {
-      const modalRef = inject('modalRef')
+      const modalRef = inject('modalRef', null)
 
       return {
         modalRef,

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

@@ -9,6 +9,8 @@
     "
     :color-mode="colorMode"
     :cursor-type="cursorType"
+    :data-id="dataId"
+    :data-qa-id="dataQaId"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
     :disabled-text-color="disabledTextColor"
@@ -152,6 +154,16 @@
         required: false,
         default: false,
       },
+      dataId: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      dataQaId: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
     emits: ['option-hovered', 'option-selected'],
     data() {

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

@@ -36,6 +36,8 @@
       >
         <ToggleBackground
           :background-color="backgroundColor"
+          :data-id="`${dataId}`"
+          :data-qa-id="`${dataId}`"
           data-test-id="toggle_background"
           :disabled="disabled"
           :is-checked="isChecked"

package/src/components/modals/modal/index.vue

@@ -15,7 +15,7 @@
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
-      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+      <Spinner v-if="isLoading" :limited-to-modal="true" size="large" />
       <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>

package/src/components/selectedOptions/index.vue

@@ -382,9 +382,9 @@
         default: () => [],
       },
       numberSelected: {
-        type: Number,
         required: true,
         default: 0,
+        validator: (value) => value === null || typeof value === 'number',
       },
       selectedLabel: {
         type: String,

package/src/components/threeDots/index.vue

@@ -43,10 +43,15 @@
             {{ child.name }}
           </OptionChild>
         </ChildrenContainer>
-        <OptionsContainer v-if="!isLoading" :text-wrap="textWrap">
+        <OptionsContainer
+          v-if="!isLoading"
+          :color-theme="colorTheme"
+          :text-wrap="textWrap"
+        >
           <OptionItem
             v-for="(item, index) in options"
             :key="item.value"
+            :color-theme="colorTheme"
             :data-id="item.dataId"
             :is-disabled="item.disabled"
             tabindex="0"
@@ -152,7 +157,9 @@
     }
   `
 
-  const ButtonContainer = styled('div', { iconColor: String })`
+  const ButtonContainer = styled('div', {
+    iconColor: String,
+  })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -194,14 +201,19 @@
     background: #fff;
   `
 
-  const OptionsContainerAttrs = { textWrap: Boolean }
+  const OptionsContainerAttrs = { textWrap: Boolean, colorTheme: String }
   const OptionsContainer = styled('div', OptionsContainerAttrs)`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
+    border: 1px solid
+      ${(props) =>
+        props.colorTheme == 'dark'
+          ? props.theme.semanticColors.teal[500]
+          : props.theme.colors.grey3};
     display: grid;
     grid-template-columns: 1fr;
     ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
     border-radius: 4px;
-    background-color: #fff;
+    background-color: ${({ colorTheme }) =>
+      colorTheme == 'dark' ? theme.colors.black : '#fff'};
     max-height: 220px;
     overflow: auto;
     height: max-content;
@@ -209,7 +221,7 @@
       props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
   `
 
-  const optionAttrs = { isDisabled: Boolean }
+  const optionAttrs = { isDisabled: Boolean, colorTheme: String }
   const OptionItem = styled('div', optionAttrs)`
     padding: 12px;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -217,13 +229,19 @@
     position: relative;
     ${(props) =>
       props.isDisabled
-        ? `background-color: ${props.theme.colors.grey5}!important`
+        ? `background-color:  ${(colorTheme) =>
+            colorTheme == 'dark'
+              ? theme.semanticColors.teal[700]
+              : props.theme.colors.grey5}!important`
         : ''};
     ${(props) =>
       props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
 
     &:hover {
-      background-color: #ebeef4;
+      background-color: ${(props) =>
+        props.colorTheme == 'dark'
+          ? theme.semanticColors.teal[700]
+          : '#ebeef4'};
     }
 
     &:focus-visible {
@@ -231,14 +249,17 @@
       background-color: #ebeef4;
     }
   `
-  const OptionChild = styled.div`
+  const OptionChild = styled('div', { colorTheme: String })`
     padding: 12px;
     cursor: pointer;
     font-size: 13px;
     position: relative;
 
     &:hover {
-      background-color: #ebeef4;
+      background-color: ${(props) =>
+        props.colorTheme == 'dark'
+          ? theme.semanticColors.teal[600]
+          : '#ebeef4'};
     }
 
     &:focus-visible {
@@ -298,14 +319,25 @@
     props: {
       options: {
         required: true,
+        type: Array,
       },
       isLoading: {
         required: false,
         default: false,
+        type: Boolean,
       },
       textWrap: {
         required: false,
         default: true,
+        type: Boolean,
+      },
+      colorTheme: {
+        type: String,
+        default: 'light',
+      },
+      dropdownPosition: {
+        type: String,
+        default: 'horizontal',
       },
       iconColor: {
         type: String,
@@ -347,20 +379,42 @@
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
-        if (positionArray.includes('left')) {
-          contextMenu.style.left =
-            rectButton.right - rectRelativeParent.left + 5 + 'px'
-        } else {
-          contextMenu.style.left =
-            rectButton.left - rectRelativeParent.left - 5 + 'px'
-          contextMenu.style.transform = 'translateX(-100%)'
-        }
-        if (positionArray.includes('top')) {
-          contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
+        if (this.dropdownPosition == 'vertical') {
+          // Position horizontally (left/right/center)
+          if (positionArray.includes('left')) {
+            contextMenu.style.left =
+              rectButton.left - rectRelativeParent.left + 'px'
+          } else {
+            contextMenu.style.left =
+              rectButton.right - rectRelativeParent.left + 'px'
+            contextMenu.style.transform = 'translateX(-100%)'
+          }
+          // Position vertically (above/below)
+          if (positionArray.includes('top')) {
+            contextMenu.style.top =
+              rectButton.bottom - rectRelativeParent.top + 5 + 'px'
+          } else {
+            contextMenu.style.top =
+              rectButton.top - rectRelativeParent.top - 5 + 'px'
+            contextMenu.style.transform += ' translateY(-100%)'
+          }
         } else {
-          contextMenu.style.top =
-            rectButton.bottom - rectRelativeParent.top + 'px'
-          contextMenu.style.transform += ' translateY(-100%)'
+          if (positionArray.includes('left')) {
+            contextMenu.style.left =
+              rectButton.right - rectRelativeParent.left + 5 + 'px'
+          } else {
+            contextMenu.style.left =
+              rectButton.left - rectRelativeParent.left - 5 + 'px'
+            contextMenu.style.transform = 'translateX(-100%)'
+          }
+          if (positionArray.includes('top')) {
+            contextMenu.style.top =
+              rectButton.top - rectRelativeParent.top + 'px'
+          } else {
+            contextMenu.style.top =
+              rectButton.bottom - rectRelativeParent.top + 'px'
+            contextMenu.style.transform += ' translateY(-100%)'
+          }
         }
       },
       findRelativeParent(element) {