@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.0 → 6.37.0-EPDM-8148.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.37.0-EPDM-8148.0",
+  "version": "6.37.0-EPDM-8148.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -60,7 +60,14 @@
             fontColor="black"
             :disabled="false"
           />
-
+          <icon
+            name="opacity"
+            color="red"
+            hoveredColor="blue"
+            size="60px"
+            cursor="default"
+            isStriked = "true"
+          />
           <Select
             :value="value"
             selectWidth="100%"
@@ -104,6 +111,7 @@ import Option from '@/components/inputs/select/option'
 import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
+import icon from '@/components/icon'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -127,7 +135,8 @@ export default {
     SwitchField,
     iconCollection,
     dropdownComponent,
-    videoThumbnail
+    videoThumbnail,
+    icon
   },
   data() {
     return {

package/src/assets/svgIcons/opacity.svg

@@ -1 +1 @@
-<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z"  /></svg>
+<svg class="svg-icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z"  /></svg>

package/src/components/buttons/mainButton/index.vue

@@ -5,6 +5,7 @@
       :minWidth="minWidth"
       :isDisabled="isDisabled"
       :customColor="customColor"
+      :noWrap="noWrap"
     >
       {{ text }}
     </button-container>
@@ -26,7 +27,7 @@ import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, noWrap: Boolean }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
@@ -48,6 +49,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
   ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
+  ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -80,6 +82,10 @@ export default {
       required: false,
       default: null,
     },
+    noWrap: {
+      required: false,
+      default: false
+    },
     minWidth: {
       required: false,
       default: null

package/src/components/icon/index.vue

@@ -9,6 +9,7 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
+    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
   </Wrapper>
 </template>
 
@@ -21,6 +22,7 @@
 //   hoveredColor="blue"
 //   size="60px" by default, this is 30px
 //   cursor="default"
+//   isStriked = "true"
 // />
 
 import styled from 'vue-styled-components'
@@ -28,6 +30,7 @@ import styled from 'vue-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
+  position:relative
   align-content: center;
   justify-content: center;
   width: ${(props) => props.size};
@@ -37,6 +40,22 @@ const Wrapper = styled('div', wrapperAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
+const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
+const strikedLine = styled('div', strikedAttrs)`
+  display: flex;
+  position: absolute;
+  bottom:0;
+  left:0;
+  align-content: center;
+  justify-content: center;
+  width: 143%;
+  height:8%;
+  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  min-height: 0;
+  line-height: 0;
+  transform-origin: 0% 100%;
+  transform: rotate(-45deg);
+`
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
   svg {
@@ -50,13 +69,17 @@ const IconImage = styled('div', IconImageProps)`
   &:hover > svg path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
+  &:hover + div {
+    background-color: ${(props)=>props.hoveredColor};
+  }
 `
 
 export default {
   name: 'icon',
   components: {
     IconImage,
-    Wrapper
+    Wrapper,
+    strikedLine
   },
   props: {
     disabled: {
@@ -79,6 +102,10 @@ export default {
     cursor: {
       required: false,
       default: null
+    },
+    isStriked: {
+      required: false,
+      default: false
     }
   },
   data() {

package/src/components/iconWrapper/index.vue

@@ -4,6 +4,8 @@
     :size="size" 
     :backgroundColor="backgroundColor" 
     :borderRadius="borderRadius"
+    :hasBorder="hasBorder"
+    :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
     >
@@ -11,7 +13,10 @@
             :size="iconSize" 
             :name="name" 
             :color="iconColor" 
-            :hoveredColor="hoveredIconColor" />
+            :hoveredColor="hoveredIconColor" 
+            :isStriked="isStriked"
+            />
+            
         <caret v-if="hasCaret">
           <iconWrapper :disabled="disabled" 
             size="10px" 
@@ -36,12 +41,13 @@
   
   import styled from 'vue-styled-components'
   import icon from '../icon'
-  const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
+  const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
   const Wrapper = styled('div', wrapperAttrs)`
     position:relative;
     display: inline-flex;
     width: ${(props) => props.size};
     height: ${(props) => props.size};
+    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
     justify-content:center;
     align-items:center;
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
@@ -84,6 +90,9 @@
       backgroundColor: {
         required: false,
       },
+      hasBorder: {
+        required: false,
+      },
       hoveredBackgroundColor: {
         required: false,
         default:"transparentWhite1"
@@ -102,11 +111,15 @@
       },
       borderRadius:{
         required:false,
-        default:'6px'
+        default:'4px'
       },
       isHovered:{
         required:false,
         default:false
+      },
+      isStriked:{
+        required:false,
+        default:false
       }
     },
     data() {

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

@@ -311,7 +311,8 @@ export default {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon
+      warningIcon: warningIcon,
+      isBlurred: false
     }
   },
   props: {
@@ -457,7 +458,7 @@ export default {
           ? this.minNumber
           : event
       }
-      if (!this.allowNegative) {
+      if (!this.allowNegative && typeof event === 'number') {
         event = Math.abs(event)
       }
       event = parseFloat(event)
@@ -488,7 +489,9 @@ export default {
           return num
         }
       })
-      let evaluated = eval(formatted.join(''))
+      let evaluated
+      formatted = this.removeStringItemsAfterLastNumber(formatted)
+      evaluated = eval(formatted.join(' '))
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
@@ -499,7 +502,32 @@ export default {
       }
       return evaluated
     },
+    removeStringItemsAfterLastNumber(array) {
+      // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
+      let lastNumberIndex = -1
+      // Find the index of the last number in the array
+      for (let i = array.length - 1; i >= 0; i--) {
+        if (typeof array[i] === 'number') {
+          lastNumberIndex = i
+          break
+        }
+      }
+      // if there are no numbers, return an empty array
+      if (lastNumberIndex === -1) {
+        return []
+      }
+      // Remove non-numeric items after the last number
+      if (lastNumberIndex !== -1) {
+        const newArray = array.slice(0, lastNumberIndex + 1)
+        return newArray
+      }
+      return array
+    },
     onInput(value) {
+      if (this.isBlurred) {
+        this.isBlurred = false
+        return
+      }
       if (value === '') {
         this.$emit('on-input', '')
       }
@@ -514,6 +542,8 @@ 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(value)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)

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

@@ -14,9 +14,11 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
-          </input-label
-        >
+          >{{ label }}
+          <optionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})</optionalLabel
+          >
+        </input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -30,6 +32,7 @@
           ref="select"
           @click="toggleDropdown"
           :selectHeight="selectHeight"
+          :selectMinHeight="selectMinHeight"
           :bgColor="
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
@@ -162,7 +165,6 @@ const InputLabel = styled('div', labelAttrs)`
 `
 const optionalLabel = styled.span`
   font-weight: 300;
-
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
@@ -191,6 +193,7 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
+  selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean
 }
@@ -198,11 +201,10 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) =>
-    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
+  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
-  min-height: 36px;
+  min-height: ${(props) => props.selectMinHeight};
   display: flex;
   align-items: center;
   max-height: ${(props) => props.selectHeight};
@@ -303,9 +305,14 @@ export default {
       default: null
     },
     selectHeight: {
+      type: String,
       required: false,
       default: null
     },
+    selectMinHeight: {
+      required: false,
+      default: '36px'
+    },
     optionWidth: {
       required: false,
       default: null

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

@@ -1,59 +1,94 @@
 <template>
-    <optionContainer :data-value="value" :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler" @mouseover="hoverHandler">
-        <slot></slot>
-    </optionContainer>
-  </template>
+  <optionContainer
+    :data-value="value"
+    :hoveredBgColor="
+      colorMode == 'dark'
+        ? '#000000'
+        : hoveredBgColor
+        ? hoveredBgColor
+        : 'grey5'
+    "
+    @click="clickHandler"
+    @mouseover="hoverHandler"
+    :cursorType="cursorType"
+    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :title="hoverText"
+  >
+    <slot></slot>
+  </optionContainer>
+</template>
 
-  <script>
+<script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-  import styled from 'vue-styled-components'
-  const optionProps={hoveredBgColor:String}
-  const optionContainer = styled('div',optionProps)`
-    display:flex;
-    cursor: pointer;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 10px;
-    gap: 14px;
-    width:100%;
-    box-sizing:inherit;
-    &:hover{
-      background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
-    }
-  `
+import styled from 'vue-styled-components'
+const optionProps = {
+  hoveredBgColor: String,
+  cursorType: String,
+  backgroundColor: String
+}
+const optionContainer = styled('div', optionProps)`
+  display: flex;
+  cursor: ${(props) => props.cursorType};
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 10px;
+  gap: 14px;
+  width: 100%;
+  box-sizing: inherit;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors[props.hoveredBgColor]
+        ? props.theme.colors[props.hoveredBgColor]
+        : props.hoveredBgColor};
+  }
+`
 
-  export default {
-    name: 'RCoption',
+export default {
+  name: 'RCoption',
 
-    props: {
-      value: {
-        required: true
-      },
-      hoveredBgColor:{
-        required:false,
-      },
-      colorMode:{
-        required:false,
-        default:'light'
-      }
+  props: {
+    value: {
+      required: true
+    },
+    hoveredBgColor: {
+      required: false
+    },
+    colorMode: {
+      required: false,
+      default: 'light'
+    },
+    cursorType: {
+      required: false,
+      default: 'cursor'
     },
+    backgroundColor: {
+      required: false,
+      default: 'white'
+    },
+    hoverText: {
+      required: false
+    }
+  },
 
-    components: {optionContainer},
+  components: { optionContainer },
 
-    data() {
-      return {}
+  data() {
+    return {}
+  },
+  methods: {
+    clickHandler() {
+      this.$parent.$emit('option-selected', this.value)
     },
-    methods:{
-        clickHandler(){
-            this.$parent.$emit('option-selected',this.value)
-        },
-        hoverHandler(){
-            this.$parent.$emit('option-hovered',this.value)
-        }
-    },
-    computed: {
+    hoverHandler() {
+      this.$parent.$emit('option-hovered', this.value)
     }
-  }
-  </script>
+  },
+  computed: {}
+}
+</script>

package/src/components/modals/modal/index.vue

@@ -37,7 +37,7 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/tableDropdown/index.vue

@@ -139,11 +139,13 @@
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
+                  :key="idx"
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
+                  :key="idx"
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}

package/src/helpers/numberConverter.js

@@ -20,9 +20,12 @@ export const stringToNumber = ({
     selectedLang === 'de-be' ||
     selectedLang === 'es-es' ||
     selectedLang === 'de' ||
+    selectedLang === 'de-at' ||
     selectedLang === 'it' ||
+    selectedLang === 'it-it' ||
     selectedLang === 'nl-nl' ||
-    selectedLang === 'nl-be'
+    selectedLang === 'nl-be' ||
+    selectedLang === 'de-at'
   ) {
     // replace dots with blank, and commas with a dot: 1.234,56 --> 1234.56
     if (allowNegative) {
@@ -89,7 +92,8 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision }) => {
+export const numberToString = ({ value, numberPrecision, minDecimals }) => {
+  const minimumRounding = minDecimals ? minDecimals : 0
   let selectedLang = localStorage.getItem('lang')
     ? localStorage.getItem('lang') === 'fr-lu'
       ? 'fr-fr'
@@ -100,7 +104,7 @@ export const numberToString = ({ value, numberPrecision }) => {
   }
   value = parseFloat(value)
   return value.toLocaleString(selectedLang, {
-    minimumFractionDigits: numberPrecision,
+    minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits: numberPrecision
   })
 }

package/src/helpers/translateLang.js

@@ -8,6 +8,8 @@ export const translateLang = (lang) => {
     return 'english_uk'
   } else if (lang === 'de' || lang === 'de-de') {
     return 'german'
+  } else if (lang === 'de-at') {
+    return 'german_at'
   } else if (lang === 'de-ch') {
     return 'german_ch'
   } else if (lang === 'de-lu') {
@@ -34,8 +36,10 @@ export const translateLang = (lang) => {
     return 'swedish'
   } else if (lang === 'no-no' || lang === 'nb-no') {
     return 'norwegian'
-  } else if (lang === 'nl-nl' || lang === 'nl') {
-    return 'nl-nl'
+  } else if (lang === 'nl-nl') {
+    return 'dutch_nl'
+  } else if (lang === 'nl-be') {
+    return 'dutch_be'
   } else if (lang === 'cs') {
     return 'czech'
   } else if (lang === 'fi-fi') {