@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

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

@@ -1,94 +1,74 @@
 <template>
-  <Container
-    :align-items="alignItems"
-    :input-width="inputWidth"
-  >
-    <LabelSlotWrapper
+  <container :inputWidth="inputWidth" :alignItems="alignItems">
+    <label-slot-wrapper
       v-if="hasLabelSlot"
-      :align-items="alignItems"
-      :border-color="borderColor"
-      :is-error="isError"
-      :is-interactive="isInteractive"
-      :no-border="noBorder"
+      :isInteractive="isInteractive"
+      :alignItems="alignItems"
+      :noBorder="noBorder"
+      :isError="isError"
+      :borderColor="borderColor"
       @mousedown="initInteraction"
     >
       <slot name="label"></slot>
-    </LabelSlotWrapper>
+    </label-slot-wrapper>
 
-    <LabelWrapper v-if="labelText">
-      <LabelText
-        :data-id="labelDataId"
-        :label-font-color="labelFontColor"
-      >
+    <label-wrapper v-if="labelText">
+      <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
-      </LabelText>
+      </label-text>
 
-      <InfoText
+      <info-text
         v-if="labelInfoText"
-        :align-arrow="labelInfoAlign"
         :text="labelInfoText"
+        :alignArrow="labelInfoAlign"
       />
-    </LabelWrapper>
-    <InputWrapper>
-      <InputContainer
+    </label-wrapper>
+    <input-wrapper>
+      <input-container
         v-bind="$attrs"
-        ref="inputField1" 
-        :align-items="alignItems"
-        :background-color="backgroundColor"
-        :border-color="borderColor"
-        :data-id="inputDataId"
-        :disabled="disabled" 
-        :font-color="fontColor"
-        :font-size="fontSize"
-        :has-label-slot="hasLabelSlot"
-        :has-slot="hasSlot"
-        :has-unit="unitName && !!unitName.length"
-        :input-height="inputHeight" 
-        :is-disabled="disabled"
-        :is-error="isError"
-        :is-interactive="isInteractive"
-        :min-width="minWidth"
-        :no-border="noBorder"
+        ref="inputField1"
+        :hasUnit="unitName && !!unitName.length"
         :placeholder="displayedPlaceholder"
-        :show-linear-unit-name="showLinearUnitName"
-        :slot-size="slotSize"
-        :text-align="textAlign"
+        :isError="isError"
+        :inputHeight="inputHeight"
+        :minWidth="minWidth"
+        :isInteractive="isInteractive"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
-        @input="onInput($event)"
         @keyup.enter="onEnterPress"
+        @input="onInput($event)"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :alignItems="alignItems"
+        :noBorder="noBorder"
+        :borderColor="borderColor"
+        :textAlign="textAlign"
+        :fontSize="fontSize"
+        :fontColor="fontColor"
+        :backgroundColor="backgroundColor"
+        :hasSlot="hasSlot"
+        :hasLabelSlot="hasLabelSlot"
+        :slotSize="slotSize"
+        :showLinearUnitName="showLinearUnitName"
+        :data-id="inputDataId"
       />
-      <SlotContainer
-        v-if="hasSlot"
-        :is-error="isError"
-        :slot-size="slotSize"
-      >
+      <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
         <slot></slot>
-      </SlotContainer>
+      </slot-container>
 
-      <UnitContainer
+      <unit-container
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="!!textInput.length"
-        :is-error="isError"
+        :hasLength="!!textInput.length"
+        :isError="isError"
+        >{{ unitName }}</unit-container
       >
-        {{ unitName }}
-      </UnitContainer>
-      <IconWrapper
-        v-if="isError && !showLinearUnitName"
-        size="16px"
-      >
-        <Icon
-          cursor="default"
-          name="warning"
-          size="16px"
-        />
-      </IconWrapper>
-    </InputWrapper>
-    <ErrorMessage v-if="isError">
-      {{ errorMessage }}
-    </ErrorMessage>
-  </Container>
+      <icon-wrapper v-if="isError && !showLinearUnitName" size="16px">
+        <icon name="warning" size="16px" cursor="default" />
+      </icon-wrapper>
+    </input-wrapper>
+    <error-message v-if="isError">{{ errorMessage }}</error-message>
+  </container>
 </template>
 
 <script>
@@ -120,47 +100,47 @@
 // >
 //<template name=label><img>....</template>
 //</inputNumber>
-  import styled from 'vue3-styled-components'
-  import {
-    stringToNumber,
-    numberToString
-  } from '../../../helpers/numberConverter'
-  import InfoText from '../../infoText'
-  import ErrorMessage from '../../errorMessage'
-  import warningIcon from '../../../assets/icons/error_icon.png'
-  import Icon from '../../icon'
+import styled from 'vue3-styled-components'
+import {
+  stringToNumber,
+  numberToString
+} from '../../../helpers/numberConverter'
+import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
+import Icon from '../../icon'
 
-  const inputProps = {
-    isError: Boolean,
-    hasUnit: Boolean,
-    inputWidth: String,
-    minWidth: String,
-    isDisabled: Boolean,
-    noBorder: Boolean,
-    textAlign: String,
-    fontSize: String,
-    fontColor: String,
-    backgroundColor: String,
-    hasSlot: Boolean,
-    hasLabelSlot: Boolean,
-    slotSize: String,
-    inputHeight: String,
-    isInteractive: Boolean,
-    alignItems: String,
-    labelFontColor: String,
-    borderColor: String,
-    showLinearUnitName: Boolean
-  }
+const inputProps = {
+  isError: Boolean,
+  hasUnit: Boolean,
+  inputWidth: String,
+  minWidth: String,
+  isDisabled: Boolean,
+  noBorder: Boolean,
+  textAlign: String,
+  fontSize: String,
+  fontColor: String,
+  backgroundColor: String,
+  hasSlot: Boolean,
+  hasLabelSlot: Boolean,
+  slotSize: String,
+  inputHeight: String,
+  isInteractive: Boolean,
+  alignItems: String,
+  labelFontColor: String,
+  borderColor: String,
+  showLinearUnitName: Boolean
+}
 
-  const Container = styled('div', inputProps)`
+const Container = styled('div', inputProps)`
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
   display: grid;
   grid-template-columns: ${(props) =>
-  props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
+    props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
 `
 
-  const InputContainer = styled('input', inputProps)`
+const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
       ? '1px solid ' + props.theme.colors.red
@@ -170,7 +150,7 @@
       ? props.theme.colors[props.borderColor]
         ? '1px solid ' + props.theme.colors[props.borderColor]
         : '1px solid ' + props.borderColor
-  : '1px solid ' + props.theme.colors.grey4};
+      : '1px solid ' + props.theme.colors.grey4};
   height: ${(props) => props.inputHeight};
   max-height: ${(props) => props.inputHeight};
   padding: 0 10px;
@@ -181,11 +161,11 @@
         : 'calc(' + slotSize + ' + 10px)'
       : isError && !showLinearUnitName
       ? '24px'
-  : '5px'};
+      : '5px'};
   border-radius: ${(props) =>
     props.isInteractive && props.alignItems != 'vertical'
       ? '0 4px 4px 0'
-  : '4px'};
+      : '4px'};
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
@@ -196,16 +176,16 @@
       ? props.theme.colors.grey2
       : props.fontColor
       ? props.fontColor + ' !important'
-  : props.theme.colors.black};
+      : props.theme.colors.black};
   background-color: ${(props) =>
     props.backgroundColor
       ? props.backgroundColor + ' !important'
-  : props.theme.colors.white};
+      : props.theme.colors.white};
   width: ${(props) =>
-  props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
+    props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   background-color: ${(props) =>
-  props.isDisabled ? props.theme.colors.grey5 : '#fff'};
+    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
 
   &::placeholder {
@@ -217,18 +197,18 @@
   }
 `
 
-  const InputWrapper = styled.span`
+const InputWrapper = styled.span`
   position: relative;
 `
 
-  const UnitContainer = styled('span', inputProps)`
+const UnitContainer = styled('span', inputProps)`
   border-left: 1px solid
     ${(props) =>
       props.isError
         ? props.theme.colors.red
         : props.hasLength
         ? props.theme.colors.black
-  : props.theme.colors.mediumGray};
+        : props.theme.colors.mediumGray};
   position: absolute;
   right: 10px;
   top: 10px;
@@ -239,10 +219,10 @@
       ? props.theme.colors.red
       : props.hasLength
       ? props.theme.colors.black
-  : props.theme.colors.mediumGray};
+      : props.theme.colors.mediumGray};
 `
 
-  const SlotContainer = styled('span', inputProps)`
+const SlotContainer = styled('span', inputProps)`
   text-align: right;
   border-left: 1px solid
     ${(props) =>
@@ -250,10 +230,10 @@
         ? props.theme.colors.red
         : props.hasLength
         ? props.theme.colors.black
-  : props.theme.colors.mediumGray};
+        : props.theme.colors.mediumGray};
   position: absolute;
   width: ${(props) =>
-  props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
+    props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
   right: 10px;
   top: 10px;
   padding-left: 10px;
@@ -262,17 +242,17 @@
       ? props.theme.colors.red
       : props.hasLength
       ? props.theme.colors.black
-  : props.theme.colors.mediumGray};
+      : props.theme.colors.mediumGray};
 `
 
-  const LabelWrapper = styled('div', inputProps)`
+const LabelWrapper = styled('div', inputProps)`
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 8px;
   cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
 `
-  const LabelSlotWrapper = styled('div', inputProps)`
+const LabelSlotWrapper = styled('div', inputProps)`
   display: flex;
   gap: 10px;
   align-items: center;
@@ -288,22 +268,22 @@
       ? props.theme.colors[props.borderColor]
         ? '1px solid ' + props.theme.colors[props.borderColor]
         : '1px solid ' + props.borderColor
-  : '1px solid ' + props.theme.colors.grey4};
+      : '1px solid ' + props.theme.colors.grey4};
   border-radius: 4px 0 0 4px;
   border-right: none;
 `
 
-  const LabelText = styled('div', inputProps)`
+const LabelText = styled('div', inputProps)`
   font-size: 13px;
   color: ${(props) =>
     props.theme.colors[props.labelFontColor]
       ? props.theme.colors[props.labelFontColor]
-  : props.labelFontColor};
+      : props.labelFontColor};
   font-weight: 700;
 `
 
-  const IconAttrs = { size: String }
-  const IconWrapper = styled('div', IconAttrs)`
+const IconAttrs = { size: String }
+const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -312,419 +292,419 @@
   height: ${(props) => (props.size ? props.size : 'auto')};
 `
 
-  export default {
-    name: 'InputNumber',
-    components: {
-      Container,
-      InputContainer,
-      InputWrapper,
-      UnitContainer,
-      ErrorMessage,
-      LabelWrapper,
-      LabelSlotWrapper,
-      LabelText,
-      InfoText,
-      Icon,
-      SlotContainer,
-      IconWrapper
-    },
-    inheritAttrs: false,
-    props: {
-      placeholder: {
-        required: false,
-        default: ''
-      },
-      isError: {
-        required: false,
-        default: false
-      },
-      inputWidth: {
-        required: false,
-        default: null
-      },
-      minWidth: {
-        required: false,
-        default: null
-      },
-      inputHeight: {
-        required: false,
-        default: '40px'
-      },
-      value: {
-        required: true,
-        default: null
-      },
-      clearInput: {
-        required: false,
-        default: false
-      },
-      alignItems: { 
-        required: false,
-        default: 'vertical'
-      },
-      errorMessage: {
-        required: false,
-        default: 'Please insert a correct number'
-      },
-      numberPrecision: {
-        required: false,
-        default: 0
-      },
-      minDecimals: {
-        required: false,
-        default: 0
-      },
-      unitName: {
-        required: false,
-        default: ''
-      },
-      showLinearUnitName: {
-        required: false,
-        default: false
-      },
-      disabled: {
-        required: false,
-        default: false
-      },
-      noBorder: {
-        required: false,
-        default: false
-      },
-      borderColor: {
-        required: false
-      },
-      textAlign: {
-        required: false,
-        default: 'left'
-      },
-      fontSize: {
-        required: false,
-        default: '13px'
-      },
-      isInteractive: {
-        required: false,
-        default: false
-      },
-      interactionStep: {
-        required: false,
-        default: 1
-      },
-      labelText: {
-        required: false,
-        default: null
-      },
-      labelInfoText: {
-        required: false,
-        default: null
-      },
-      labelInfoAlign: {
-        required: false,
-        default: 'left'
-      },
-      defaultNumber: {
-        required: false,
-        default: null
-      },
-      minNumber: {
-        required: false,
-        default: null
-      },
-      fontColor: {
-        required: false,
-        default: null
-      },
-      backgroundColor: {
-        required: false,
-        default: null
-      },
-      numberToStringEnabled: {
-        required: false,
-        default: true
-      },
-      allowNegative: {
-        required: false,
-        default: true
-      },
-      slotSize: {
-        required: false
-      },
-      labelFontColor: {
-        required: false,
-        default: 'eturnityGrey'
-      },
-      focus: {
-        required: false,
-        default: false
-      },
-      labelDataId: {
-        required: false,
-        default: ''
-      },
-      inputDataId: {
-        required: false,
-        default: ''
-      }
+export default {
+  name: 'input-number',
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    UnitContainer,
+    ErrorMessage,
+    LabelWrapper,
+    LabelSlotWrapper,
+    LabelText,
+    InfoText,
+    Icon,
+    SlotContainer,
+    IconWrapper
+  },
+  inheritAttrs: false,
+  data() {
+    return {
+      textInput: '',
+      isFocused: false,
+      warningIcon: warningIcon
+    }
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: ''
+    },
+    isError: {
+      required: false,
+      default: false
+    },
+    inputWidth: {
+      required: false,
+      default: null
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    inputHeight: {
+      required: false,
+      default: '40px'
+    },
+    value: {
+      required: true,
+      default: null
+    },
+    clearInput: {
+      required: false,
+      default: false
+    },
+    alignItems: {
+      required: false,
+      default: 'vertical'
+    },
+    errorMessage: {
+      required: false,
+      default: 'Please insert a correct number'
+    },
+    numberPrecision: {
+      required: false,
+      default: 0
+    },
+    minDecimals: {
+      required: false,
+      default: 0
+    },
+    unitName: {
+      required: false,
+      default: ''
+    },
+    showLinearUnitName: {
+      required: false,
+      default: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    noBorder: {
+      required: false,
+      default: false
+    },
+    borderColor: {
+      required: false
+    },
+    textAlign: {
+      required: false,
+      default: 'left'
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    isInteractive: {
+      required: false,
+      default: false
+    },
+    interactionStep: {
+      required: false,
+      default: 1
     },
-    data() {
-      return {
-        textInput: '',
-        isFocused: false,
-        warningIcon: warningIcon
+    labelText: {
+      required: false,
+      default: null
+    },
+    labelInfoText: {
+      required: false,
+      default: null
+    },
+    labelInfoAlign: {
+      required: false,
+      default: 'left'
+    },
+    defaultNumber: {
+      required: false,
+      default: null
+    },
+    minNumber: {
+      required: false,
+      default: null
+    },
+    fontColor: {
+      required: false,
+      default: null
+    },
+    backgroundColor: {
+      required: false,
+      default: null
+    },
+    numberToStringEnabled: {
+      required: false,
+      default: true
+    },
+    allowNegative: {
+      required: false,
+      default: true
+    },
+    slotSize: {
+      required: false
+    },
+    labelFontColor: {
+      required: false,
+      default: 'eturnityGrey'
+    },
+    focus: {
+      required: false,
+      default: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    displayedPlaceholder() {
+      if (this.placeholder) return this.placeholder
+      if (this.defaultNumber)
+        return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
+      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
+    },
+    hasSlot() {
+      return !!this.$slots.default
+    },
+    hasLabelSlot() {
+      return !!this.$slots.label
+    }
+  },
+  methods: {
+    onEnterPress() {
+      this.$emit('on-enter-click')
+      this.$refs.inputField1.$el.blur()
+    },
+    onChangeHandler(event) {
+      if (isNaN(event) || event === '') {
+        event = this.defaultNumber
+          ? this.defaultNumber
+          : this.minNumber || this.minNumber === 0
+          ? this.minNumber
+          : event
       }
+      if (!this.allowNegative) {
+        event = Math.abs(event)
+      }
+      event = parseFloat(event)
+      // Need to return an integer rather than a string
+      this.$emit('input-change', event)
     },
-    computed: {
-      displayedPlaceholder() {
-        if (this.placeholder) return this.placeholder
-        if (this.defaultNumber)
-          return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
-        return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
-      },
-      hasSlot() {
-        return !!this.$slots.default
-      },
-      hasLabelSlot() {
-        return !!this.$slots.label
+    onEvaluateCode(event) {
+      // function to perform math on the code
+      // filter the string in case of any malicious content
+      const val = event.target.value
+      let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
+      filtered = filtered.split(/([-+*/()])/)
+      let formatted = filtered.map((item) => {
+        if (
+          item === '+' ||
+          item === '-' ||
+          item === '*' ||
+          item === '/' ||
+          item === '(' ||
+          item === ')' ||
+          item === ''
+        ) {
+          return item
+        } else {
+          let num = stringToNumber({
+            value: item,
+            numberPrecision: false,
+            minDecimals: this.minDecimals
+          })
+          return num
+        }
+      })
+      let evaluated
+      formatted = this.removeStringItemsAfterLastNumber(formatted)
+      evaluated = eval(formatted.join(' '))
+      if (typeof evaluated === 'string') {
+        evaluated = stringToNumber({
+          value: evaluated,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
+        })
+      } else if (typeof evaluated === 'number') {
+        evaluated = evaluated.toFixed(this.numberPrecision)
       }
+      return evaluated
     },
-    watch: {
-      focus(value) {
-        if (value) {
-          this.focusInput()
+    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
         }
-      },
-      clearInput: function(value) {
-        if (value) {
-          // If the value is typed, then we should clear the textInput on Continue
-          this.textInput = ''
+      }
+      // 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(event) {
+      if (!this.isFocused) {
+        return
+      }
+      if (event.target.value === '') {
+        this.$emit('on-input', '')
+      }
+      let evaluatedVal
+      try {
+        evaluatedVal = this.onEvaluateCode(event)
+      } finally {
+        if (evaluatedVal && this.value != evaluatedVal) {
+          this.$emit('on-input', evaluatedVal)
         }
       }
     },
-    created() {
-      if (this.value) {
-        this.textInput = numberToString({
-          value: this.value,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals
-        })
-      } else if (this.defaultNumber !== null) {
+    onInputBlur(e) {
+      this.isFocused = false
+      let value = e.target.value
+      let evaluatedInput = this.onEvaluateCode(e)
+      this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
+      if ((evaluatedInput && value.length) || this.minNumber !== null) {
         this.textInput = numberToString({
-          value: this.defaultNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals
-        })
-      } else if (this.minNumber !== null) {
-        this.textInput = numberToString({
-          value: this.minNumber,
+          value:
+            evaluatedInput && value.length
+              ? evaluatedInput
+              : this.defaultNumber
+              ? this.defaultNumber
+              : this.minNumber,
           numberPrecision: this.numberPrecision,
           minDecimals: this.minDecimals
         })
       }
+      let adjustedMinValue =
+        evaluatedInput && evaluatedInput.length
+          ? evaluatedInput
+          : this.defaultNumber
+          ? this.defaultNumber
+          : this.minNumber || this.minNumber === 0
+          ? this.minNumber
+          : ''
+      this.$emit('input-blur', adjustedMinValue)
     },
-    mounted() {
-      if (this.focus) {
-        this.focusInput()
+    focusInput() {
+      if (this.disabled) {
+        return
       }
+      this.isFocused = true
+      this.$nextTick(() => {
+        this.$refs.inputField1.$el.select()
+      })
+      this.$emit('input-focus')
     },
-    methods: {
-      onEnterPress() {
-        this.$emit('on-enter-click')
+    blurInput() {
+      if (this.disabled) {
+        return
+      }
+      this.isFocused = false
+      this.$nextTick(() => {
         this.$refs.inputField1.$el.blur()
-      },
-      onChangeHandler(event) {
-        if (isNaN(event) || event === '') {
-          event = this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-              ? this.minNumber
-              : event
-        }
-        if (!this.allowNegative) {
-          event = Math.abs(event)
-        }
-        event = parseFloat(event)
-        // Need to return an integer rather than a string
-        this.$emit('input-change', event)
-      },
-      onEvaluateCode(event) {
-        // function to perform math on the code
-        // filter the string in case of any malicious content
-        const val = event.target.value
-        let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
-        filtered = filtered.split(/([-+*/()])/)
-        let formatted = filtered.map((item) => {
-          if (
-            item === '+' ||
-            item === '-' ||
-            item === '*' ||
-            item === '/' ||
-            item === '(' ||
-            item === ')' ||
-            item === ''
-          ) {
-            return item
-          } else {
-            let num = stringToNumber({
-              value: item,
-              numberPrecision: false,
-              minDecimals: this.minDecimals
-            })
-            return num
-          }
-        })
-        let evaluated
-        formatted = this.removeStringItemsAfterLastNumber(formatted)
-        evaluated = eval(formatted.join(' '))
-        if (typeof evaluated === 'string') {
-          evaluated = stringToNumber({
-            value: evaluated,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals
-          })
-        } else if (typeof evaluated === 'number') {
-          evaluated = evaluated.toFixed(this.numberPrecision)
-        }
-        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(event) {
-        if (!this.isFocused) {
-          return
-        }
-        if (event.target.value === '') {
-          this.$emit('on-input', '')
-        }
-        let evaluatedVal
-        try {
-          evaluatedVal = this.onEvaluateCode(event)
-        } finally {
-          if (evaluatedVal && this.value != evaluatedVal) {
-            this.$emit('on-input', evaluatedVal)
-          }
-        }
-      },
-      onInputBlur(e) {
-        this.isFocused = false
-        let value = e.target.value
-        let evaluatedInput = this.onEvaluateCode(e)
-        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
-        if ((evaluatedInput && value.length) || this.minNumber !== null) {
-          this.textInput = numberToString({
-            value:
-              evaluatedInput && value.length
-                ? evaluatedInput
-                : this.defaultNumber
-                  ? this.defaultNumber
-                  : this.minNumber,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals
-          })
-        }
-        let adjustedMinValue =
-          evaluatedInput && evaluatedInput.length
-            ? evaluatedInput
-            : this.defaultNumber
-              ? this.defaultNumber
-              : this.minNumber || this.minNumber === 0
-                ? this.minNumber
-                : ''
-        this.$emit('input-blur', adjustedMinValue)
-      },
-      focusInput() {
-        if (this.disabled) {
-          return
-        }
-        this.isFocused = true
-        this.$nextTick(() => {
-          this.$refs.inputField1.$el.select()
-        })
-        this.$emit('input-focus')
-      },
-      blurInput() {
-        if (this.disabled) {
-          return
-        }
-        this.isFocused = false
-        this.$nextTick(() => {
-          this.$refs.inputField1.$el.blur()
-        })
-      },
-      formatWithCurrency(value) {
-        let adjustedMinValue =
-          value || value === 0
-            ? value
-            : this.defaultNumber
-              ? this.defaultNumber
-              : this.minNumber || this.minNumber === 0
-                ? this.minNumber
-                : ''
-        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
-          let input = this.numberToStringEnabled
-            ? numberToString({
+      })
+    },
+    formatWithCurrency(value) {
+      let adjustedMinValue =
+        value || value === 0
+          ? value
+          : this.defaultNumber
+          ? this.defaultNumber
+          : this.minNumber || this.minNumber === 0
+          ? this.minNumber
+          : ''
+      if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+        let input = this.numberToStringEnabled
+          ? numberToString({
               value: adjustedMinValue,
               numberPrecision: this.numberPrecision,
               minDecimals: this.minDecimals
             })
-            : adjustedMinValue
-          let unit = this.showLinearUnitName ? '' : this.unitName
-          //return input + ' ' + unit
-          return input + ' ' + unit
-        } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-          return ''
-        } else {
-          return this.numberToStringEnabled
-            ? numberToString({
+          : adjustedMinValue
+        let unit = this.showLinearUnitName ? '' : this.unitName
+        //return input + ' ' + unit
+        return input + ' ' + unit
+      } else if (!adjustedMinValue && adjustedMinValue !== 0) {
+        return ''
+      } else {
+        return this.numberToStringEnabled
+          ? numberToString({
               value: adjustedMinValue,
               numberPrecision: this.numberPrecision,
               minDecimals: this.minDecimals
             })
-            : adjustedMinValue
-        }
-      },
-      initInteraction(e) {
-        this.focusInput()
-        e.preventDefault()
-        window.addEventListener('mousemove', this.interact, false)
-        window.addEventListener('mouseup', this.stopInteract, false)
-      },
-      interact(e) {
-        e.preventDefault()
-        let value = parseFloat(this.value || 0)
-        value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit('on-input-drag', value)
+          : adjustedMinValue
+      }
+    },
+    initInteraction(e) {
+      this.focusInput()
+      e.preventDefault()
+      window.addEventListener('mousemove', this.interact, false)
+      window.addEventListener('mouseup', this.stopInteract, false)
+    },
+    interact(e) {
+      e.preventDefault()
+      let value = parseFloat(this.value || 0)
+      value += parseFloat(this.interactionStep) * parseInt(e.movementX)
+      this.$emit('on-input-drag', value)
 
-        this.textInput = numberToString({
-          value: value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals
-        })
+      this.textInput = numberToString({
+        value: value && value.length ? value : this.minNumber,
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
+      })
       //this.value=value
-      },
-      stopInteract(e) {
-        e.preventDefault()
-        window.removeEventListener('mousemove', this.interact, false)
-        window.removeEventListener('mouseup', this.stopInteract, false)
-        this.blurInput()
+    },
+    stopInteract(e) {
+      e.preventDefault()
+      window.removeEventListener('mousemove', this.interact, false)
+      window.removeEventListener('mouseup', this.stopInteract, false)
+      this.blurInput()
+    }
+  },
+  created() {
+    if (this.value) {
+      this.textInput = numberToString({
+        value: this.value,
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
+      })
+    } else if (this.defaultNumber !== null) {
+      this.textInput = numberToString({
+        value: this.defaultNumber,
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
+      })
+    } else if (this.minNumber !== null) {
+      this.textInput = numberToString({
+        value: this.minNumber,
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
+      })
+    }
+  },
+  mounted() {
+    if (this.focus) {
+      this.focusInput()
+    }
+  },
+  watch: {
+    focus(value) {
+      if (value) {
+        this.focusInput()
+      }
+    },
+    clearInput: function (value) {
+      if (value) {
+        // If the value is typed, then we should clear the textInput on Continue
+        this.textInput = ''
       }
     }
   }
+}
 </script>