@eturnity/eturnity_reusable_components 7.35.1-EPDM-10620.8 → 7.35.1-EPDM-10620.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.35.1-EPDM-10620.8",
+  "version": "7.35.1-EPDM-10620.9",
   "files": [
     "dist",
     "src"

package/src/components/selectedOptions/index.vue

@@ -62,10 +62,17 @@
             v-for="item in expandedOptions"
             :key="item.type"
             :disabled="item.disabled || false"
+            :hasComponent="!!item?.component"
             :hover-color="item.hoverColor"
-            @click="handleExpandedOptionClick(item)"
+            @click="
+              !item?.component && !item.disabled && $emit('on-' + item.type)
+            "
           >
-            <ListItemWrapper v-if="item?.component">
+            <ListItemWrapper
+              v-if="item?.component"
+              :hasComponent="!!item?.component"
+              @click="!item.disabled && toggleElement(item.type)"
+            >
               <ListItemTitle>
                 {{ item.name }}
                 <InfoText
@@ -299,12 +306,16 @@
     flex-direction: column;
   `
 
-  const ExpandedListItem = styled('div', ListAttrs)`
+  const ExpandedListItem = styled('div', {
+    disabled: Boolean,
+    hoverColor: String,
+    hasComponent: Boolean,
+  })`
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 13px 15px;
+    padding: ${(props) => (props.hasComponent ? '0' : '13px 15px')};
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
     color: ${(props) => props.disabled && props.theme.colors.grey3};
 
@@ -315,11 +326,12 @@
     }
   `
 
-  const ListItemWrapper = styled.div`
+  const ListItemWrapper = styled('div', { hasComponent: Boolean })`
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: ${(props) => (props.hasComponent ? '13px 15px' : '0')};
   `
 
   const ListItemTitle = styled.div`