@eturnity/eturnity_reusable_components 7.12.7--EPDM-5518.2 → 7.12.7--EPDM-5518.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.12.7--EPDM-5518.2",
+  "version": "7.12.7--EPDM-5518.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/clock_full.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM5.875 5.05243V2.125H4.125V5.92743L6.19061 7.47663L7.24061 6.07663L5.875 5.05243Z" fill="white"/>
+</svg>

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

@@ -8,7 +8,11 @@
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
     >
-      <label-wrapper v-if="label" :data-id="labelDataId">
+      <label-wrapper
+        v-if="label"
+        :data-id="labelDataId"
+        :shownDropdown="shownDropdown"
+      >
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -45,6 +49,7 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
+          :shownDropdown="shownDropdown"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -201,10 +206,12 @@ const Container = styled('div', inputProps)`
   position: relative;
   display: inline-block;
 `
-const LabelWrapper = styled.div`
+
+const LabelAttrs = { shownDropdown: Boolean }
+const LabelWrapper = styled('div', LabelAttrs)`
   display: inline-grid;
   grid-template-columns: auto auto;
-  grid-gap: 12px;
+  grid-gap: ${(props) => (props.shownDropdown ? '0' : '12px')};
   align-items: center;
   justify-content: start;
 `
@@ -226,14 +233,17 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean,
-  paddingLeft: String
+  paddingLeft: String,
+  shownDropdown: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
   ${(props) =>
-    props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}`};
+    props.isSearchBarVisible
+      ? ''
+      : `padding-left: ${props.shownDropdown ? '0' : props.paddingLeft}`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -440,6 +450,10 @@ export default {
     noMaxWidth: {
       type: Boolean,
       default: false
+    },
+    shownDropdown: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -529,7 +543,14 @@ export default {
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
-      this.$refs.dropdown.$children
+      const children =
+        this.$refs.dropdown.$children &&
+        this.$refs.dropdown.$children[0] &&
+        this.$refs.dropdown.$children.length === 1 &&
+        this.$refs.dropdown.$children[0].$children.length
+          ? this.$refs.dropdown.$children[0].$children
+          : this.$refs.dropdown.$children
+      children
         .map((component) => component.$el)
         .forEach((el) => {
           if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {

package/src/components/pagination/index.vue

@@ -90,6 +90,7 @@ const paginationLink = styled.div`
   border-radius: 3px;
   white-space: nowrap;
   cursor: pointer;
+  color: ${(props) => props.theme.colors.brightBlue};
 
   &.active {
     color: ${(props) => props.theme.colors.white};
@@ -98,7 +99,9 @@ const paginationLink = styled.div`
     border-radius: 4px;
   }
 `
-const arrowText = styled.div``
+const arrowText = styled.div`
+  color: ${(props) => props.theme.colors.brightBlue};
+`
 const arrowIconContainer = styled.div`
   margin: 0 10px;
   display: flex;