@eturnity/eturnity_reusable_components 7.24.1-EPDM-10647.0 → 7.24.1-EPDM-10857.3

package/package.json

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

package/src/components/collapsableInfoText/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
+    <ToggleContainer>
+      <ToggleButton
+        @click="toggleHandler"
+        v-if="showButton && !showAll"
+        :fontSize="fontSize"
+      >
+        {{ $gettext('Show more') }}
+      </ToggleButton>
+      <ToggleButton
+        @click="toggleHandler"
+        v-if="showButton && showAll"
+        :fontSize="fontSize"
+      >
+        {{ $gettext('Show less') }}
+      </ToggleButton>
+    </ToggleContainer>
+  </div>
+</template>
+
+<script>
+import styled from 'vue3-styled-components'
+import theme from '@/assets/theme.js'
+
+const TextAttrs = {
+  expand: Boolean,
+  fontSize: String
+}
+const Text = styled('p', TextAttrs)`
+  display: block;
+  display: -webkit-box;
+  line-height: 1.3em;
+  -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: ${(props) => props.fontSize}px;
+  text-overflow: ellipsis;
+`
+
+const ToggleContainer = styled.div`
+  display: flex;
+  width: 100%;
+`
+
+const ToggleButton = styled('p', TextAttrs)`
+  font-size: ${(props) => props.fontSize}px;
+  cursor: pointer;
+  color: ${(props) => props.theme.colors.blue};
+`
+
+export default {
+  name: 'collapsable-info-text',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    fontSize: {
+      type: String,
+      default: '16px'
+    },
+    lineCount: {
+      type: Number,
+      default: 3
+    },
+    minWidth: {
+      type: String,
+      default: '100%'
+    }
+  },
+  components: {
+    Text,
+    ToggleButton,
+    ToggleContainer
+  },
+  data() {
+    return {
+      showButton: true,
+      showAll: false,
+      lineBreaks: []
+    }
+  },
+  computed: {
+    theme() {
+      return theme
+    }
+  },
+  methods: {
+    displayText() {
+      if (!this.showButton) {
+        return this.text
+      }
+      if (!this.showAll) {
+        let countIndex = 0
+        this.lineBreaks.forEach((el, index) => {
+          if (index < this.lineCount) {
+            countIndex += el.length
+          }
+        })
+
+        return this.text.slice(0, countIndex + 2) + '...'
+      } else {
+        return this.text
+      }
+    },
+    toggleHandler() {
+      this.showAll = !this.showAll
+    }
+  },
+  created() {
+    // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
+    // this.lineBreaks = this.text.split('\n')
+
+    // if (this.lineBreaks.length <= this.lineCount) {
+    //   this.showButton = false
+    // }
+
+    if (this.text.length <= 170) {
+      this.showButton = false
+    }
+  }
+}
+</script>

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

@@ -22,15 +22,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
@@ -536,14 +531,6 @@ export default {
     dropdownMenuPosition: {
       type: String,
       default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
-    },
-    infoTextWidth: {
-      type: String,
-      required: false
-    },
-    infoTextAlignArrow: {
-      type: String,
-      required: false
     }
   },