@eturnity/eturnity_reusable_components 7.22.0 → 7.22.2

package/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ['@vue/cli-plugin-babel/preset']
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.22.0",
+  "version": "7.22.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -23,7 +23,6 @@
   },
   "devDependencies": {
     "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",

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/assets/svgIcons/drag_icon.svg

@@ -0,0 +1,8 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2C4 3.10457 3.10457 4 2 4C0.89543 4 0 3.10457 0 2C0 0.89543 0.89543 0 2 0C3.10457 0 4 0.89543 4 2Z" fill="#B2B9C5"/>
+<path d="M10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2Z" fill="#B2B9C5"/>
+<path d="M4 8C4 9.10457 3.10457 10 2 10C0.89543 10 0 9.10457 0 8C0 6.89543 0.89543 6 2 6C3.10457 6 4 6.89543 4 8Z" fill="#B2B9C5"/>
+<path d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z" fill="#B2B9C5"/>
+<path d="M4 14C4 15.1046 3.10457 16 2 16C0.89543 16 0 15.1046 0 14C0 12.8954 0.89543 12 2 12C3.10457 12 4 12.8954 4 14Z" fill="#B2B9C5"/>
+<path d="M10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/inclination.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.09548 3.62522L10.8209 1.59974L9.53978 0.508423L0.199219 11.4916H13.7992V9.80865H11.9546C11.7571 7.4083 10.7198 5.25339 9.09548 3.62522ZM10.2648 9.80859C10.0777 7.91689 9.26383 6.22054 8.00053 4.91205L3.83843 9.80864L10.2648 9.80859Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/length_2d.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.199219 9.85718V0.142822H1.75351L1.75352 9.85718H0.199219ZM5.38021 8.20572L2.14209 4.99999L5.38021 1.79425V4.19855L8.61833 4.19855V1.79425L11.8564 4.99999L8.61832 8.20572L8.61833 5.80142L5.38021 5.80142V8.20572ZM12.2449 0.142822V9.85718H13.7992V0.142822H12.2449Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/length_3d.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M5.33336 14L0 8.66664L1.06667 7.59997L6.40003 12.9333L5.33336 14Z" fill="white"/>
+  <path d="M8.42227 9.97776L4.00002 9.99998L4.02224 5.57774L5.67225 7.22775L7.22781 5.67219L5.57781 4.02218L10.0001 3.99996L9.97783 8.4222L8.32782 6.7722L6.77226 8.32776L8.42227 9.97776Z" fill="white"/>
+  <path d="M7.59997 1.06667L12.9333 6.40003L14 5.33336L8.66664 0L7.59997 1.06667Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/length_calculator.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M12.4444 0H1.55556C0.7 0 0 0.7 0 1.55556V12.4444C0 13.3 0.7 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V1.55556C14 0.7 13.3 0 12.4444 0ZM7.80111 3.15778L8.62556 2.33333L9.72222 3.43L10.8189 2.33333L11.6433 3.15778L10.5467 4.25444L11.6433 5.35111L10.8189 6.17556L9.72222 5.08667L8.62556 6.18333L7.80111 5.35889L8.89778 4.26222L7.80111 3.15778ZM2.52778 3.67111H6.41667V4.83778H2.52778V3.67111ZM6.61111 10.1111H5.05556V11.6667H3.88889V10.1111H2.33333V8.94444H3.88889V7.38889H5.05556V8.94444H6.61111V10.1111ZM11.6667 11.0833H7.77778V9.91667H11.6667V11.0833ZM11.6667 9.13889H7.77778V7.97222H11.6667V9.13889Z" fill="#263238"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -100,10 +100,12 @@
                 <option-title> {{ filter.selectedText }} </option-title>
               </template>
               <template #dropdown>
-                <dropdown-checkbox-container @click.stop>
+                <dropdown-checkbox-container
+                  v-for="(filterOption, optionIdx) in filter.choices"
+                  :key="optionIdx + 'optionIdx'"
+                  @click.stop
+                >
                   <checkbox
-                    v-for="(filterOption, optionIdx) in filter.choices"
-                    :key="optionIdx + 'optionIdx'"
                     :label="filterOption.text"
                     :isChecked="filterOption.selected"
                     @on-event-handler="
@@ -268,6 +270,12 @@
         :text="buttonText.cancel"
         @click="$emit('on-cancel-view')"
       />
+      <reset-container v-if="!filterViews || !filterViews.length">
+        <reset-button @click="$emit('on-reset-filters')">
+          <icon :name="'update'" size="14px" :color="theme.colors.blue" />
+          <div>{{ $gettext('reset_filters') }}</div>
+        </reset-button>
+      </reset-container>
     </button-container>
   </container-wrapper>
 </template>
@@ -329,6 +337,16 @@ const ButtonContainer = styled.div`
   padding: 15px;
 `
 
+const ResetContainer = styled.div`
+  display: grid;
+  align-content: center;
+  margin-left: auto;
+  div {
+    margin-top: 0;
+    align-self: center;
+  }
+`
+
 const ColumnContainer = styled.div``
 
 const DragContainer = styled.div`
@@ -376,7 +394,7 @@ const DropdownCheckboxContainer = styled.div`
   display: grid;
   gap: 6px;
   width: 100%;
-  padding: 12px 10px;
+  padding: 7px 10px;
   background: ${(props) => props.theme.colors.grey5};
 `
 
@@ -455,6 +473,7 @@ export default {
     DeleteIcon,
     UpperContainer,
     ResetButton,
+    ResetContainer,
     VueDatePicker
   },
   props: {

package/src/components/filter/index.vue

@@ -70,6 +70,9 @@ export default {
     },
     settingsTranslations: {
       required: false
+    },
+    closeDropdown: {
+      required: false
     }
   },
   data() {
@@ -122,6 +125,7 @@ export default {
       this.$emit('on-filter-view-select', item)
     },
     onViewDelete(item) {
+      this.onToggleDropdown()
       this.$emit('on-filter-view-delete', item)
     },
     onApplyCurrentView() {
@@ -138,6 +142,13 @@ export default {
   },
   beforeDestroy() {
     document.removeEventListener('click', this.clickOutside)
+  },
+  watch: {
+    closeDropdown(newVal) {
+      if (newVal) {
+        this.isDropdownOpen = false
+      }
+    }
   }
 }
 </script>

package/src/components/infoText/index.vue

@@ -26,7 +26,7 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     size="20"
+//     size="20px"
 //     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'

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

@@ -3,10 +3,11 @@
     <container
       :checkColor="checkColor"
       :size="size"
-      :hasLabel="hasLabel"
+      :hasLabel="label && !!label.length"
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
+      :cursorType="cursorType"
     >
       <input-checkbox
         type="checkbox"
@@ -17,7 +18,7 @@
       <check-wrapper :hasLabel="hasLabel">
         <span class="checkmark"></span>
       </check-wrapper>
-      <label-text v-if="hasLabel">{{ label }}</label-text>
+      <label-text v-if="label && !!label.length">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -33,6 +34,7 @@
 //     size="small"
 //     backgroundColor="red"
 //     :isDisabled="true"
+//     cursorType="default"
 // />
 import styled from 'vue3-styled-components'
 
@@ -55,7 +57,8 @@ const containerAttrs = {
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean
+  isDisabled: Boolean,
+  cursorType: String
 }
 const Container = styled('label', containerAttrs)`
   display: grid;
@@ -64,7 +67,7 @@ const Container = styled('label', containerAttrs)`
   align-content: center;
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
   font-size: 16px;
   user-select: none;
 
@@ -89,7 +92,7 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : '#fff'};
+        : props.theme.colors.white};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -183,6 +186,10 @@ export default {
     dataId: {
       type: String,
       default: ''
+    },
+    cursorType: {
+      type: String,
+      default: 'pointer'
     }
   },
   computed: {

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

@@ -313,8 +313,7 @@ export default {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon,
-      isBlurred: false
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -549,8 +548,7 @@ export default {
       return array
     },
     onInput(event) {
-      if (this.isBlurred) {
-        this.isBlurred = false
+      if (!this.isFocused) {
         return
       }
       if (event.target.value === '') {
@@ -567,8 +565,6 @@ export default {
     },
     onInputBlur(e) {
       this.isFocused = false
-      // setting isBlurred so we don't trigger onInput as well
-      this.isBlurred = true
       let value = e.target.value
       let evaluatedInput = this.onEvaluateCode(e)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)

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

@@ -328,7 +328,7 @@ export default {
     }
   },
   methods: {
-    onEnterPress(event){
+    onEnterPress() {
       this.$emit('on-enter-click')
       this.$refs.inputElement.$el.blur()
     },

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

@@ -1,12 +1,14 @@
 <template>
   <Container
     :selectWidth="selectWidth"
+    :noRelative="noRelative"
     @mouseenter="mouseEnterHandler"
     @mouseleave="mouseLeaveHandler"
   >
     <input-wrapper
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
+      :noRelative="noRelative"
     >
       <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
@@ -47,6 +49,9 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
+          :tablePaddingLeft="tablePaddingLeft"
+          :noRelative="noRelative"
+          :showDisabledBackground="showDisabledBackground"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -76,7 +81,7 @@
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
-          <Caret @click.stop="toggleCaretDropdown">
+          <Caret @click.stop="toggleCaretDropdown" class="caret_dropdown">
             <icon
               v-if="isDropdownOpen"
               name="arrow_up"
@@ -99,7 +104,7 @@
             />
           </Caret>
         </selectButton>
-        <DropdownWrapper ref="dropdownWrapperRef">
+        <DropdownWrapper ref="dropdownWrapperRef" :noRelative="noRelative">
           <Teleport to="#portal-target">
             <selectDropdown
               ref="dropdown"
@@ -118,10 +123,13 @@
               :fontColor="
                 dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
               "
+              :noRelative="noRelative"
               :fontSize="fontSize"
+              :minWidth="minWidth"
               :selectedValue="selectedValue"
               @option-selected="optionSelected"
               @option-hovered="optionHovered"
+              @mouseleave="optionLeave"
             >
               <slot name="dropdown"></slot>
             </selectDropdown>
@@ -212,11 +220,12 @@ const optionalLabel = styled.span`
 `
 const inputProps = {
   selectWidth: String,
-  optionWidth: String
+  optionWidth: String,
+  noRelative: Boolean
 }
 const Container = styled('div', inputProps)`
   width: ${(props) => props.selectWidth};
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: inline-block;
 `
 const LabelWrapper = styled.div`
@@ -245,15 +254,26 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   hasNoPadding: Boolean,
   showBorder: Boolean,
-  paddingLeft: String
+  paddingLeft: String,
+  noRelative: Boolean,
+  tablePaddingLeft: String,
+  showDisabledBackground: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   box-sizing: border-box;
   border-radius: 4px;
   max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
   ${(props) =>
-    props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
+    props.isSearchBarVisible
+      ? ''
+      : `padding-left: ${
+          props.hasNoPadding
+            ? '0'
+            : props.tablePaddingLeft
+            ? props.tablePaddingLeft
+            : props.paddingLeft
+        }`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -274,7 +294,7 @@ const selectButton = styled('div', selectButtonAttrs)`
     }
   `}
   background-color:${(props) =>
-    props.disabled
+    props.disabled && props.showDisabledBackground
       ? props.theme.colors.grey5
       : props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -300,13 +320,16 @@ const selectDropdownAttrs = {
   fontSize: String,
   dropdownPosition: Object,
   hoveredValue: Number | String,
-  selectedValue: Number | String
+  selectedValue: Number | String,
+  noRelative: Boolean,
+  minWidth: String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
   z-index: ${(props) => (props.isActive ? '2' : '99999')};
   position: absolute;
-  top: ${(props) => props.dropdownPosition?.top}px;
+  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;
@@ -316,6 +339,12 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   padding: 0px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+  min-width: ${(props) =>
+    props.minWidth
+      ? props.minWidth
+      : props.optionWidth
+      ? props.optionWidth
+      : '100%'};
   background-color: ${(props) =>
     props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -335,12 +364,17 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   font-size: ${(props) => props.fontSize};
 `
 selectDropdown.emits = ['option-hovered', 'option-selected']
-const DropdownWrapper = styled('div')`
-  position: relative;
+const DropdownAttrs = { noRelative: Boolean }
+const DropdownWrapper = styled('div', DropdownAttrs)`
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
 `
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const inputAttrs = {
+  alignItems: String,
+  hasLabel: Boolean,
+  noRelative: Boolean
+}
 const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: grid;
   align-items: center;
   gap: 8px;
@@ -369,6 +403,10 @@ export default {
       required: false,
       default: '13px'
     },
+    noRelative: {
+      required: false,
+      default: false
+    },
     label: {
       required: false
     },
@@ -401,6 +439,9 @@ export default {
       required: false,
       default: '36px'
     },
+    minWidth: {
+      required: false
+    },
     optionWidth: {
       required: false,
       default: null
@@ -476,6 +517,13 @@ export default {
       type: Boolean,
       default: false
     },
+    tablePaddingLeft: {
+      required: false
+    },
+    showDisabledBackground: {
+      required: false,
+      default: true
+    },
     minOptionLength: {
       type: Number,
       default: MIN_OPTION_LENGTH

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

@@ -16,6 +16,7 @@
     :disabledTextColor="disabledTextColor"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
+    :minWidth="minWidth"
     :padding="padding"
   >
     <slot></slot>
@@ -31,6 +32,7 @@ const optionProps = {
   hoveredBgColor: String,
   cursorType: String,
   backgroundColor: String,
+  minWidth: String,
   disabledBgColor: String,
   disabledTextColor: String,
   padding: String
@@ -44,6 +46,7 @@ const optionContainer = styled('div', optionProps)`
   padding: ${(props) => props.padding};
   gap: 14px;
   width: 100%;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors[props.disabledBgColor]
@@ -106,6 +109,9 @@ export default {
       required: false,
       default: false
     },
+    minWidth: {
+      required: false
+    },
     disabledBgColor: {
       required: false,
       default: 'white'

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

@@ -49,7 +49,7 @@
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
-// .   fontSize="13px"
+//     fontSize="13px"
 // />
 import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'

package/src/components/markerItem/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <page-container>
+    <marker-container
+      :backgroundColor="backgroundColor"
+      :hasIcon="!!iconName"
+      :cursor="cursor"
+    >
+      <icon
+        v-if="!!iconName"
+        :name="iconName"
+        color="white"
+        size="10px"
+        :cursor="cursor"
+      />
+      <span>{{ label }}</span>
+    </marker-container>
+  </page-container>
+</template>
+
+<script>
+// import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
+// To use:
+// <marker-item
+//   label="Label"
+//   backgroundColor="#ab5348"
+//   iconName="icon_name"
+//   cursor="pointer"
+// />
+
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 14px;
+`
+
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  cursor: String
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
+  grid-gap: 5px;
+  position: relative;
+  align-items: center;
+  padding: 2px 7px;
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) =>
+    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border: 1px solid
+    ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+`
+
+export default {
+  name: 'project-marker',
+  components: {
+    PageContainer,
+    MarkerContainer,
+    Icon
+  },
+  props: {
+    backgroundColor: {
+      required: false
+    },
+    iconName: {
+      required: false
+    },
+    label: {
+      required: true
+    },
+    cursor: {
+      required: false,
+      default: 'default'
+    }
+  }
+}
+</script>

package/src/components/pageTitle/index.vue

@@ -3,11 +3,7 @@
     <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
       {{ text }}
     </title-text>
-    <info-text
-      v-if="!!infoText"
-      :text="infoText"
-      :alignArrow="infoAlign"
-    />
+    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
   </title-wrap>
 </template>
 
@@ -18,16 +14,16 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue3-styled-components"
-import InfoText from "../infoText"
+import styled from 'vue3-styled-components'
+import InfoText from '../infoText'
 
 const wrapAttrs = { hasInfoText: Boolean }
-const TitleWrap = styled("div", wrapAttrs)`
+const TitleWrap = styled('div', wrapAttrs)`
   display: grid;
   align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
-    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+    props.hasInfoText ? 'auto auto 1fr' : '1fr'};
   margin-bottom: 20px;
 `
 
@@ -35,7 +31,7 @@ const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `
 
@@ -54,8 +50,7 @@ export default {
       required: false
     },
     fontSize: {
-      required: false,
-      default: '16px'
+      required: false
     },
     uppercase: {
       required: false,
@@ -63,11 +58,11 @@ export default {
     },
     infoText: {
       required: false,
-      default: null,
+      default: null
     },
     infoAlign: {
-      required: false,
+      required: false
     }
-  },
+  }
 }
 </script>

package/src/components/pagination/index.vue

@@ -81,8 +81,6 @@ const paginationWrapper = styled.nav`
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
-  margin-bottom: 2px;
-  margin-top: 10px;
 `
 const paginationLink = styled.div`
   display: flex;
@@ -92,15 +90,18 @@ const paginationLink = styled.div`
   border-radius: 3px;
   white-space: nowrap;
   cursor: pointer;
+  color: ${(props) => props.theme.colors.brightBlue};
 
   &.active {
-    color: #fff;
+    color: ${(props) => props.theme.colors.white};
     background-color: ${(props) => props.theme.colors.brightBlue};
     padding: 7px 12px;
     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;

package/src/components/projectMarker/index.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
+// import ProjectMarker from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
 // To use:
 // <project-marker
 //   :activeLanguage="'en-us'"

package/src/components/selectedOptions/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container v-if="optionsList.length">
+        <list-item
+          v-for="item in optionsList"
+          :key="item.type"
+          :hoverColor="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </list-item>
+      </list-container>
+      <empty-text v-if="!optionsList.length">
+        {{ $gettext('no_batch_actions_available') }}
+      </empty-text>
+      <icon-container @click="$emit('on-close')">
+        <icon
+          name="close_for_modals,_tool_tips"
+          color="white"
+          size="14px"
+          cursor="pointer"
+        />
+      </icon-container>
+    </box-container>
+  </page-container>
+</template>
+
+<script>
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+// optionsList = [
+//   {
+//     type: 'export',
+//     name: 'Export'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// />
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+const SelectedContainer = styled.div`
+  display: grid;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+`
+
+const BoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.black};
+  opacity: 90%;
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 8px 10px 8px 20px;
+  font-size: 14px;
+  height: 40px;
+`
+
+const ListContainer = styled.div`
+  padding: 0 20px;
+  display: flex;
+  gap: 20px;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const ListAttrs = {
+  hoverColor: String
+}
+const ListItem = styled('div', ListAttrs)`
+  cursor: pointer;
+  &:hover {
+    color: ${(props) =>
+      props.hoverColor
+        ? props.theme.colors[props.hoverColor]
+        : props.theme.colors.green};
+  }
+`
+
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+`
+
+const EmptyText = styled.div`
+  color: ${(props) => props.theme.colors.white};
+  font-size: 13px;
+  padding-left: 16px;
+`
+
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer,
+    EmptyText
+  },
+  props: {
+    optionsList: {
+      required: true
+    },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>

package/src/components/tableDropdown/index.vue

@@ -40,7 +40,12 @@
             "
             @click.stop="onSelectedTemplateClick(item.row)"
           >
-            <img :src="fileIcon" alt="icon" width="12" height="16" />
+            <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
+            <icon
+              name="template_icon_not_clickable"
+              :color="theme.colors.brightBlue"
+              size="14px"
+            />
             <div>{{ item.value }}</div>
           </template-link>
           <no-template v-if="item.type && item.type === 'no-template'">
@@ -178,6 +183,8 @@ import InputText from '../inputs/inputText'
 import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
 import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
 import fileIconPng from '../../assets/icons/file_icon.png'
+import Icon from '../icon'
+import theme from '@/assets/theme.js'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`
@@ -273,6 +280,7 @@ const ArrowWrapper = styled('div', arrowAttrs)`
 const optionsAttrs = { top: Number, left: Number }
 const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
+  margin-top: 10px;
   display: grid;
   grid-template-rows: 1fr auto;
   left: 20px;
@@ -307,10 +315,6 @@ const OptionsWrapper = styled.div`
 
 const OptionsItem = styled('div', containerAttrs)`
   display: grid;
-  /* grid-template-columns: 1fr repeat(
-      ${(props) => props.colSpan},
-      minmax(50px, auto)
-    ); */
   grid-template-columns: ${(props) => props.width};
   grid-gap: 30px;
   padding: 10px;
@@ -343,6 +347,7 @@ const TemplateButton = styled.div`
   display: inline-block;
   border-radius: 4px;
   text-align: center;
+  margin-left: 15px;
 `
 
 const NoTemplate = styled.div`
@@ -350,14 +355,16 @@ const NoTemplate = styled.div`
   font-style: italic;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-left: 15px;
 `
 
 const TemplateLink = styled.div`
-  color: ${(props) => props.theme.colors.purple};
+  color: ${(props) => props.theme.colors.brightBlue};
   cursor: pointer;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
+  padding-left: 15px;
 `
 
 const InputContainer = styled.div`
@@ -433,7 +440,8 @@ export default {
     ArrowContainer,
     TextContainer,
     NestedIcon,
-    NestedContainer
+    NestedContainer,
+    Icon
   },
   props: {
     colSpan: {
@@ -599,6 +607,9 @@ export default {
   computed: {
     getCustomName() {
       return this.inputText
+    },
+    theme() {
+      return theme
     }
   },
   watch: {