@eturnity/eturnity_reusable_components 7.51.16-EPDM-12459.0 → 7.51.16-EPDM-13312.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-12459.0",
+  "version": "7.51.16-EPDM-13312.0",
   "files": [
     "dist",
     "src"

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

@@ -139,13 +139,10 @@
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
-              :style="{
-                transform: `translate(${dropdownPosition?.left}px, ${
-                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
-                })`,
-              }"
               :bg-color="
-                colorMode == 'dark' || colorMode == 'transparent'
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
@@ -398,8 +395,9 @@
     box-sizing: border-box;
     z-index: ${(props) => (props.isActive ? '2' : '99999')};
     position: absolute;
-    top: 0px;
-    left: 0px;
+    top: ${(props) =>
+      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+    left: ${(props) => props.dropdownPosition?.left}px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -660,10 +658,6 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
-        isDisplayedAtBottom: true,
-        selectTopPosition: 0,
-        selectAndDropdownDistance: 0,
-        animationFrameId: null,
       }
     },
     computed: {
@@ -734,13 +728,8 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
-          this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
-          if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId)
-            this.animationFrameId = null
-          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -753,27 +742,11 @@
           })
         }
       },
-      isSelectDropdownShown(isShown) {
-        if (!isShown) return
-
-        // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
-        // before getting the distance between the select and the dropdown menu
-        setTimeout(() => {
-          this.getDistanceBetweenSelectAndDropdownMenu()
-        }, 100)
-      },
-      selectTopPosition() {
-        this.dropdownPosition.top =
-          this.selectTopPosition +
-          this.$refs.select.$el.clientHeight +
-          this.selectAndDropdownDistance
-      },
     },
     mounted() {
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
-      document.body.addEventListener('scroll', this.calculateSelectTopPosition)
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -782,10 +755,6 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
-      document.body.removeEventListener(
-        'scroll',
-        this.calculateSelectTopPosition
-      )
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -891,11 +860,11 @@
           return
         }
         await this.$nextTick()
-        this.isDisplayedAtBottom = await this.generateDropdownPosition()
+        const isDisplayedAtBottom = await this.generateDropdownPosition()
         // If the dropdown menu is going to be displayed at the bottom,
         // we need reverify its position after a dom update (nextTick)
         await this.$nextTick()
-        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
+        if (isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -988,25 +957,6 @@
           }
         }
       },
-      getDistanceBetweenSelectAndDropdownMenu() {
-        const wholeSelectTopPosition =
-          this.selectTopPosition + this.$refs.select.$el.clientHeight
-        this.selectAndDropdownDistance =
-          this.dropdownPosition.top - wholeSelectTopPosition
-      },
-      calculateSelectTopPosition() {
-        const selectRef = this.$refs.select
-        if (selectRef) {
-          const currentTopPosition =
-            selectRef.$el.getBoundingClientRect().top + window.scrollY
-          if (this.selectTopPosition !== currentTopPosition) {
-            this.selectTopPosition = currentTopPosition
-          }
-        }
-        this.animationFrameId = requestAnimationFrame(
-          this.calculateSelectTopPosition
-        )
-      },
     },
   }
 </script>

package/src/components/stringDesign/DropdownMenu/index.vue

@@ -30,6 +30,9 @@
               <IconPlaceholder v-else />
             </IconWrapper>
             <TextContainer
+              :is-archived="
+                item.statusActive === false && !!item.companyComponentLibraryId
+              "
               :style="{ marginLeft: item.type == 'optimizer' ? '32px' : '0' }"
             >
               <TitleText :title="item.model">
@@ -40,6 +43,20 @@
                     : ''
                 }}
                 {{ item.model }}
+                <InfoTextWrapper>
+                  <RCInfoText
+                    v-if="
+                      item.statusActive === false &&
+                      item.companyComponentLibraryId
+                    "
+                    button-type="error"
+                    :text="
+                      $gettext(
+                        `Component has been archived and shouldn't be used`
+                      )
+                    "
+                  />
+                </InfoTextWrapper>
               </TitleText>
               <TitleSubText>
                 <span>{{ item.brandName }}</span>
@@ -417,7 +434,7 @@
   import RCIcon from '../../icon'
   import ButtonIcon from '../../buttons/buttonIcon'
   import { numberToString } from '../../../helpers/numberConverter'
-
+  import RCInfoText from '../../infoText'
   const PageContainer = styled.div`
     position: relative;
   `
@@ -444,16 +461,23 @@
     margin-left: 32px;
     margin-top: 4px;
   `
-
-  const TextContainer = styled.div`
+  const textContainerAttr = { isArchived: Boolean }
+  const TextContainer = styled('div', textContainerAttr)`
     display: grid;
+    color: ${(props) => (props.isArchived ? props.theme.colors.red : 'white')};
+  `
+  const InfoTextWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 8px;
   `
-
   const TitleText = styled.div`
     font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: flex;
   `
 
   const TitleSubText = styled.div`
@@ -708,6 +732,8 @@
   export default {
     name: 'DropdownMenu',
     components: {
+      InfoTextWrapper,
+      RCInfoText,
       SectionContainer,
       TitleContainer,
       IconsContainer,