@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.26 → 7.4.4-EPDM-7260.28

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.4.4-EPDM-7260.26",
+  "version": "7.4.4-EPDM-7260.28",
   "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/height_equalize.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99482 2.7C4.49188 2.7 4.89482 2.29706 4.89482 1.8C4.89482 1.30294 4.49188 0.9 3.99482 0.9C3.49777 0.9 3.09482 1.30294 3.09482 1.8C3.09482 2.29706 3.49777 2.7 3.99482 2.7ZM5.79482 1.8C5.79482 2.50671 5.38756 3.11829 4.79492 3.41285V4H5.80557L4.00557 6L2.20557 4H3.19492L3.19492 3.41294C2.60218 3.11842 2.19482 2.50678 2.19482 1.8C2.19482 0.805887 3.00071 0 3.99482 0C4.98894 0 5.79482 0.805887 5.79482 1.8ZM10.8948 1.8C10.8948 2.29706 10.4919 2.7 9.99482 2.7C9.49777 2.7 9.09482 2.29706 9.09482 1.8C9.09482 1.30294 9.49777 0.9 9.99482 0.9C10.4919 0.9 10.8948 1.30294 10.8948 1.8ZM10.7949 3.41285C11.3876 3.11829 11.7948 2.50671 11.7948 1.8C11.7948 0.805887 10.9889 0 9.99482 0C9.00071 0 8.19482 0.805887 8.19482 1.8C8.19482 2.50678 8.60218 3.11842 9.19492 3.41294V4H8.20557L10.0056 6L11.8056 4H10.7949V3.41285ZM14 7.79999L0 7.79999V6.19999L14 6.19999V7.79999ZM7.00518 11.3C6.50812 11.3 6.10518 11.7029 6.10518 12.2C6.10518 12.6971 6.50812 13.1 7.00518 13.1C7.50223 13.1 7.90518 12.6971 7.90518 12.2C7.90518 11.7029 7.50223 11.3 7.00518 11.3ZM5.20518 12.2C5.20518 11.4933 5.61244 10.8817 6.20508 10.5872L6.20508 10H5.19443L6.99443 8L8.79443 10H7.80508V10.5871C8.39782 10.8816 8.80518 11.4932 8.80518 12.2C8.80518 13.1941 7.99929 14 7.00518 14C6.01106 14 5.20518 13.1941 5.20518 12.2Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/height_snap.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.59997L14 1.59998V-2.44379e-05L0 -2.56618e-05V1.59997ZM6.10274 12.2C6.10274 11.7029 6.50568 11.3 7.00274 11.3C7.49979 11.3 7.90274 11.7029 7.90274 12.2C7.90274 12.6971 7.49979 13.1 7.00274 13.1C6.50568 13.1 6.10274 12.6971 6.10274 12.2ZM6.20264 10.5872C5.61 10.8817 5.20274 11.4933 5.20274 12.2C5.20274 13.1941 6.00862 14 7.00274 14C7.99685 14 8.80274 13.1941 8.80274 12.2C8.80274 11.4932 8.39538 10.8816 7.80264 10.5871L7.80264 4.65002H9.5L7 2.65002L4.5 4.65002H6.20264L6.20264 10.5872Z" 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/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/icon/index.vue

@@ -1,9 +1,13 @@
 <template>
-  <wrapper>
-    <icon-image>
+  <wrapper :disabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
+      :color="color"
+      :background-color="backgroundColor"
+      :hovered-color="hoveredColor"
+    >
       <i v-html="icon.html" />
     </icon-image>
-    <striked-line v-if="isStriked"></striked-line>
+    <striked-line v-if="isStriked" :color="color"></striked-line>
   </wrapper>
 </template>
 
@@ -48,27 +52,31 @@ const props = defineProps({
   isStriked: {
     required: false,
     default: false
+  },
+  backgroundColor: {
+    required: false,
+    default: null
   }
 })
 
-const Wrapper = styled('div')`
+const Wrapper = styled('div', {
+  size: String,
+  disabled: Boolean,
+  cursor: String
+})`
   display: flex;
   position: relative;
   align-content: center;
   justify-content: center;
-  width: ${props.size};
-  height: ${props.size};
-  min-width: ${props.size};
-  min-height: ${props.size};
-  cursor: ${props.disabled ? 'not-allowed' : props.cursor};
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  min-width: ${(props) => props.size};
+  min-height: ${(props) => props.size};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
-const strikedAttrs = {
-  isDisabled: Boolean,
-  color: String,
-  hoveredColor: String
-}
-const StrikedLine = styled.div`
+
+const StrikedLine = styled('div', { color: String })`
   display: flex;
   position: absolute;
   bottom: 0;
@@ -77,29 +85,33 @@ const StrikedLine = styled.div`
   justify-content: center;
   width: 143%;
   height: 8%;
-  background-color: ${({ theme }) => theme.colors[props.color] || props.color};
+  background-color: ${({ theme, color }) => theme.colors[color] || color};
   min-height: 0;
   line-height: 0;
   transform-origin: 0% 100%;
   transform: rotate(-45deg);
 `
-const IconImage = styled.div`
+const IconImage = styled('div', {
+  color: String,
+  backgroundColor: String,
+  hoveredColor: String
+})`
   width: 100%;
   svg {
     width: 100%;
     height: 100%;
-    background-color: ${(props) => props.backgroundColor};
+    background-color: ${(props) =>
+      props.backgroundColor ? props.backgroundColor : 'transparent'};
     padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
   }
   svg path {
-    ${({ theme }) =>
-      props.color && `fill: ${theme.colors[props.color] || props.color};`}
+    ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
   }
   &:hover > svg path {
-    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
-    background-color: ${props.hoveredColor};
+    background-color: ${(props) => props.hoveredColor};
   }
 `
 

package/src/components/infoText/index.vue

@@ -26,7 +26,6 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
 //     size="20px"
 //     alignArrow="right" // which side the arrow should be on
 // />

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 === '') {
@@ -560,15 +558,13 @@ export default {
       try {
         evaluatedVal = this.onEvaluateCode(event)
       } finally {
-        if (evaluatedVal) {
+        if (evaluatedVal && this.value != evaluatedVal) {
           this.$emit('on-input', evaluatedVal)
         }
       }
     },
     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)
@@ -646,10 +642,10 @@ export default {
       }
     },
     initInteraction(e) {
+      this.focusInput()
+      e.preventDefault()
       window.addEventListener('mousemove', this.interact, false)
       window.addEventListener('mouseup', this.stopInteract, false)
-      e.preventDefault()
-      this.focusInput()
     },
     interact(e) {
       e.preventDefault()

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

@@ -1,15 +1,14 @@
 <template>
   <Container
     :selectWidth="selectWidth"
-    :minWidth="minWidth"
-    :maxWidth="maxWidth"
+    :noRelative="noRelative"
     @mouseenter="mouseEnterHandler"
     @mouseleave="mouseLeaveHandler"
   >
     <input-wrapper
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
-      :minWidth="minWidth"
+      :noRelative="noRelative"
     >
       <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
@@ -51,6 +50,9 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
+          :tablePaddingLeft="tablePaddingLeft"
+          :noRelative="noRelative"
+          :showDisabledBackground="showDisabledBackground"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -81,7 +83,7 @@
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
-          <Caret @click.stop="toggleCaretDropdown" v-if="dropDownArrowVisible">
+          <Caret @click.stop="toggleCaretDropdown" class="caret_dropdown">
             <icon
               v-if="isDropdownOpen"
               name="arrow_up"
@@ -104,7 +106,7 @@
             />
           </Caret>
         </selectButton>
-        <DropdownWrapper ref="dropdownWrapperRef">
+        <DropdownWrapper ref="dropdownWrapperRef" :noRelative="noRelative">
           <Teleport to="#portal-target">
             <selectDropdown
               ref="dropdown"
@@ -123,10 +125,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>
@@ -219,12 +224,11 @@ const optionalLabel = styled.span`
 const inputProps = {
   selectWidth: String,
   optionWidth: String,
-  minWidth: String,
-  maxWidth: 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`
@@ -253,16 +257,26 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   hasNoPadding: Boolean,
   showBorder: Boolean,
-  paddingLeft: String
+  paddingLeft: String,
+  noRelative: Boolean,
+  tablePaddingLeft: String,
+  showDisabledBackground: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  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
@@ -283,7 +297,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]
@@ -309,13 +323,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;
@@ -325,6 +342,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]
@@ -344,12 +367,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, minWidth: String }
+const inputAttrs = {
+  alignItems: String,
+  hasLabel: Boolean,
+  noRelative: Boolean
+}
 const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: grid;
   width: 100%;
   min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
@@ -380,6 +408,10 @@ export default {
       required: false,
       default: '13px'
     },
+    noRelative: {
+      required: false,
+      default: false
+    },
     label: {
       required: false
     },
@@ -501,6 +533,13 @@ export default {
       type: String,
       default: '15px'
     },
+    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/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: {