@eturnity/eturnity_reusable_components 7.22.3-EPDM-10647.0 → 7.22.4--EPDM-10563.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.22.3-EPDM-10647.0",
+  "version": "7.22.4--EPDM-10563.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/icon/index.vue

@@ -107,8 +107,9 @@ const IconImage = styled('div', {
   svg path {
     ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
   }
-  &:hover > svg path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  &:hover svg path {
+    ${({ theme, hoveredColor }) =>
+      hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
   }
   &:hover + div {
     background-color: ${(props) => props.hoveredColor};

package/src/components/infoText/index.vue

@@ -14,7 +14,6 @@
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
         :iconSize="size"
-        :maxWidth="maxWidth"
         ><slot />
         <span v-html="text"></span>
       </text-overlay>
@@ -53,7 +52,7 @@ const TextOverlay = styled('div', textAttrs)`
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
   width: ${(props) => props.width};
-  max-width: ${(props) => props.maxWidth};
+  max-width: 400px;
   font-size: 13px;
   font-weight: 400;
   line-height: normal;
@@ -125,10 +124,6 @@ export default {
     width: {
       required: false,
       default: '165px'
-    },
-    maxWidth: {
-      type: String,
-      default: '400px'
     }
   },
   methods: {

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

@@ -1,5 +1,5 @@
 <template>
-  <component-wrapper @click.stop>
+  <component-wrapper>
     <container
       :checkColor="checkColor"
       :size="size"

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

@@ -63,34 +63,9 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
-      <icon-wrapper
-        v-if="isError && !showLinearUnitName"
-        size="16px"
-        :marginRight="showSelect ? selectWidth : 0"
-      >
+      <icon-wrapper v-if="isError && !showLinearUnitName" size="16px">
         <icon name="warning" size="16px" cursor="default" />
       </icon-wrapper>
-      <select-wrapper v-if="showSelect">
-        <divider />
-        <Select
-          :showBorder="false"
-          :selectWidth="`${selectWidth}px`"
-          @input-change="$emit('select-change', $event)"
-        >
-          <template #selector>
-            <select-text>{{ getSelectValue }}</select-text>
-          </template>
-          <template #dropdown>
-            <Option
-              v-for="item in selectOptions"
-              :key="item.value"
-              :value="item.value"
-            >
-              {{ item.label }}
-            </Option>
-          </template>
-        </Select>
-      </select-wrapper>
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -132,8 +107,6 @@ import {
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
 import ErrorMessage from '../../errorMessage'
-import Select from '../select'
-import Option from '../select/option'
 import warningIcon from '../../../assets/icons/error_icon.png'
 import Icon from '../../icon'
 
@@ -309,35 +282,16 @@ const LabelText = styled('div', inputProps)`
   font-weight: 700;
 `
 
-const IconAttrs = { size: String, marginRight: Number }
+const IconAttrs = { size: String }
 const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
-  right: ${(props) => props.marginRight + 10}px;
+  right: 5px;
   height: ${(props) => (props.size ? props.size : 'auto')};
 `
 
-const SelectText = styled.div`
-  font-size: 13px;
-`
-
-const SelectWrapper = styled.div`
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  display: flex;
-  height: 100%;
-`
-
-const Divider = styled.div`
-  margin-top: 6px;
-  height: calc(100% - 16px);
-  width: 1px;
-  background-color: ${({ theme }) => theme.colors.grey4};
-`
-
 export default {
   name: 'input-number',
   components: {
@@ -352,12 +306,7 @@ export default {
     InfoText,
     Icon,
     SlotContainer,
-    IconWrapper,
-    Select,
-    Option,
-    SelectWrapper,
-    SelectText,
-    Divider
+    IconWrapper
   },
   inheritAttrs: false,
   data() {
@@ -501,22 +450,6 @@ export default {
     inputDataId: {
       required: false,
       default: ''
-    },
-    showSelect: {
-      type: Boolean,
-      default: false
-    },
-    selectWidth: {
-      type: Number,
-      default: 70
-    },
-    selectOptions: {
-      type: Array,
-      default: () => []
-    },
-    selectValue: {
-      type: [String, Number],
-      default: null
     }
   },
   computed: {
@@ -531,13 +464,6 @@ export default {
     },
     hasLabelSlot() {
       return !!this.$slots.label
-    },
-    getSelectValue() {
-      const item = this.selectOptions.find(
-        ({ value }) => value === this.selectValue
-      )
-
-      return item ? item.label : '-'
     }
   },
   methods: {

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

@@ -10,7 +10,11 @@
       :alignItems="alignItems"
       :noRelative="noRelative"
     >
-      <label-wrapper v-if="label" :data-id="labelDataId">
+      <label-wrapper
+        v-if="label"
+        :data-id="labelDataId"
+        :infoTextMessage="!!infoTextMessage"
+      >
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -22,15 +26,10 @@
           >
         </input-label>
         <info-text
-          v-if="infoTextMessage || !!this.$slots.infoText"
+          v-if="infoTextMessage"
           :text="infoTextMessage"
           :size="infoTextSize"
-          :alignArrow="infoTextAlignArrow"
-          :width="infoTextWidth"
-          :max-width="infoTextWidth"
-        >
-          <slot name="infoText" />
-        </info-text>
+        />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
         <selectButton
@@ -48,7 +47,7 @@
             buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
           "
           :hasError="hasError"
-          :hasNoPadding="isSearchBarVisible || !hasSelectButtonPadding"
+          :hasNoPadding="hasNoPadding"
           :disabled="disabled"
           @keydown="onKeyDown"
           :showBorder="showBorder"
@@ -155,7 +154,7 @@
 //     alignItems="vertical"
 //     label-data-id="test-label-data-id"
 //     data-id="test-data-id"
-//     :hasSelectButtonPadding="false"
+//     :hasNoPadding="true"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -233,9 +232,12 @@ const Container = styled('div', inputProps)`
   position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: inline-block;
 `
-const LabelWrapper = styled.div`
+
+const LabelWrapperAttrs = { infoTextMessage: Boolean }
+const LabelWrapper = styled('div', LabelWrapperAttrs)`
   display: inline-grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: ${(props) =>
+    props.infoTextMessage ? 'auto auto' : 'auto'};
   grid-gap: 12px;
   align-items: center;
   justify-content: start;
@@ -514,10 +516,6 @@ export default {
       type: String,
       default: ''
     },
-    hasSelectButtonPadding: {
-      type: Boolean,
-      default: true
-    },
     isDraggable: {
       type: Boolean,
       default: false
@@ -537,13 +535,10 @@ export default {
       type: String,
       default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
     },
-    infoTextWidth: {
-      type: String,
-      required: false
-    },
-    infoTextAlignArrow: {
-      type: String,
-      required: false
+    hasNoPadding: {
+      required: false,
+      default: false,
+      type: Boolean
     }
   },
 

package/src/components/pageTitle/index.vue

@@ -31,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 : '18px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `