@eturnity/eturnity_reusable_components 6.46.5-EPDM-8891.1 → 6.46.5-EPDM-8599.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.46.5-EPDM-8891.1",
+  "version": "6.46.5-EPDM-8599.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -114,6 +114,7 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
+import infoCard from '@/components/infoCard'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -138,7 +139,8 @@ export default {
     iconCollection,
     dropdownComponent,
     videoThumbnail,
-    icon
+    icon,
+    infoCard
   },
   data() {
     return {

package/src/components/infoCard/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <info-container>
+            <icon name="info" size="24px" />
+      <InfoTextContainer>
+        <slot />
+      </InfoTextContainer>
+    </info-container>
+</template>
+    
+<script>
+import styled from 'vue-styled-components'
+import icon from '../icon'
+const InfoContainer = styled('div')`
+  display: flex;
+  align-items: flex-start;
+  gap: 15px;
+  padding: 20px;
+  width: 500px;
+  min-width: 450px;
+  border: 1px dashed #dee2eb;
+  border-radius: 4px;
+  margin:20px 0;
+`
+
+const InfoTextContainer = styled('div')`
+  font-size: 13px;
+`
+
+
+export default {
+    components:{
+        icon,
+        InfoTextContainer,
+        InfoContainer
+    },
+    props:[]
+}
+</script>

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

@@ -408,7 +408,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue: null,
+      hoveredValue:null,
       isClickOutsideActive: false
     }
   },
@@ -447,7 +447,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      this.hoveredValue = e
+      this.hoveredValue=e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -502,16 +502,14 @@ export default {
     },
     onArrowPress(dir) {
       let newHoveredElem
-      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
-        `[data-value="${this.hoveredValue}"]`
-      )
-      if (currentHoveredElem) {
-        if (dir > 0) {
-          newHoveredElem = currentHoveredElem.nextElementSibling
-        } else {
-          newHoveredElem = currentHoveredElem.previousElementSibling
+      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
+      if(currentHoveredElem){
+        if(dir>0){
+          newHoveredElem=currentHoveredElem.nextElementSibling
+        }else{
+          newHoveredElem=currentHoveredElem.previousElementSibling
         }
-        if (newHoveredElem) {
+        if(newHoveredElem){
           this.hoveredValue = newHoveredElem.getAttribute('data-value')
           const topPos = newHoveredElem.offsetTop
           this.$refs.dropdown.$el.scrollTop = topPos
@@ -522,20 +520,12 @@ export default {
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        // this filterRef is needed to check for the # of children on Filter dropdowns
-        const filterRef =
-          this.$refs.dropdown.$children &&
-          this.$refs.dropdown.$children.length &&
-          this.$refs.dropdown.$children[0].$children
-            ? this.$refs.dropdown.$children[0].$children
-            : this.$refs.dropdown.$children
-        return filterRef.length
+        return this.$refs.dropdown.$children.length
       } else {
         return 0
       }
     },
     isSearchBarVisible() {
-      console.log('this.optionLength', this.optionLength)
       return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
     }
   },

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

@@ -10,6 +10,8 @@
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
         :colorMode="colorMode"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       >
         <label-text :size="size">{{ label }}</label-text>
         <info-text
@@ -99,10 +101,12 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean
+  isChecked: Boolean,
+  secondaryColor: String,
+  primaryColor: String,
 }
 const LabelText = styled('div', toggleAttrs)`
-  color: white;
+  color: ${(props) => props.primaryColor };
   font-size: 13px;
   font-weight: 700;
 `