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

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

@@ -1,74 +1,94 @@
 <template>
-  <container :inputWidth="inputWidth" :alignItems="alignItems">
-    <label-slot-wrapper
+  <Container
+    :align-items="alignItems"
+    :input-width="inputWidth"
+  >
+    <LabelSlotWrapper
       v-if="hasLabelSlot"
-      :isInteractive="isInteractive"
-      :alignItems="alignItems"
-      :noBorder="noBorder"
-      :isError="isError"
-      :borderColor="borderColor"
+      :align-items="alignItems"
+      :border-color="borderColor"
+      :is-error="isError"
+      :is-interactive="isInteractive"
+      :no-border="noBorder"
       @mousedown="initInteraction"
     >
       <slot name="label"></slot>
-    </label-slot-wrapper>
+    </LabelSlotWrapper>
 
-    <label-wrapper v-if="labelText">
-      <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
+    <LabelWrapper v-if="labelText">
+      <LabelText
+        :data-id="labelDataId"
+        :label-font-color="labelFontColor"
+      >
         {{ labelText }}
-      </label-text>
+      </LabelText>
 
-      <info-text
+      <InfoText
         v-if="labelInfoText"
+        :align-arrow="labelInfoAlign"
         :text="labelInfoText"
-        :alignArrow="labelInfoAlign"
       />
-    </label-wrapper>
-    <input-wrapper>
-      <input-container
+    </LabelWrapper>
+    <InputWrapper>
+      <InputContainer
         v-bind="$attrs"
-        ref="inputField1"
-        :hasUnit="unitName && !!unitName.length"
+        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"
         :placeholder="displayedPlaceholder"
-        :isError="isError"
-        :inputHeight="inputHeight"
-        :minWidth="minWidth"
-        :isInteractive="isInteractive"
+        :show-linear-unit-name="showLinearUnitName"
+        :slot-size="slotSize"
+        :text-align="textAlign"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
-        @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"
+        @keyup.enter="onEnterPress"
       />
-      <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
+      <SlotContainer
+        v-if="hasSlot"
+        :is-error="isError"
+        :slot-size="slotSize"
+      >
         <slot></slot>
-      </slot-container>
+      </SlotContainer>
 
-      <unit-container
+      <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :hasLength="!!textInput.length"
-        :isError="isError"
-        >{{ unitName }}</unit-container
+        :has-length="!!textInput.length"
+        :is-error="isError"
       >
-      <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>
+        {{ 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>
 </template>
 
 <script>
@@ -100,47 +120,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
@@ -150,7 +170,7 @@ const InputContainer = styled('input', inputProps)`
       ? 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;
@@ -161,11 +181,11 @@ const InputContainer = styled('input', inputProps)`
         : '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')};
@@ -176,16 +196,16 @@ const InputContainer = styled('input', inputProps)`
       ? 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 {
@@ -197,18 +217,18 @@ const InputContainer = styled('input', inputProps)`
   }
 `
 
-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;
@@ -219,10 +239,10 @@ const UnitContainer = styled('span', inputProps)`
       ? 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) =>
@@ -230,10 +250,10 @@ const SlotContainer = styled('span', inputProps)`
         ? 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;
@@ -242,17 +262,17 @@ const SlotContainer = styled('span', inputProps)`
       ? 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;
@@ -268,22 +288,22 @@ const LabelSlotWrapper = styled('div', inputProps)`
       ? 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;
@@ -292,419 +312,419 @@ const IconWrapper = styled('div', IconAttrs)`
   height: ${(props) => (props.size ? props.size : 'auto')};
 `
 
-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
-    },
-    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
+  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: ''
       }
-      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)
+    data() {
+      return {
+        textInput: '',
+        isFocused: false,
+        warningIcon: warningIcon
       }
-      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 []
+    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
       }
-      // 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)
+    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 = ''
         }
       }
     },
-    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) {
+    created() {
+      if (this.value) {
         this.textInput = numberToString({
-          value:
-            evaluatedInput && value.length
-              ? evaluatedInput
-              : this.defaultNumber
-              ? this.defaultNumber
-              : this.minNumber,
+          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
         })
       }
-      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
+    mounted() {
+      if (this.focus) {
+        this.focusInput()
       }
-      this.isFocused = true
-      this.$nextTick(() => {
-        this.$refs.inputField1.$el.select()
-      })
-      this.$emit('input-focus')
     },
-    blurInput() {
-      if (this.disabled) {
-        return
-      }
-      this.isFocused = false
-      this.$nextTick(() => {
+    methods: {
+      onEnterPress() {
+        this.$emit('on-enter-click')
         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({
+      },
+      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({
               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()
-    }
-  },
-  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 = ''
+      },
+      stopInteract(e) {
+        e.preventDefault()
+        window.removeEventListener('mousemove', this.interact, false)
+        window.removeEventListener('mouseup', this.stopInteract, false)
+        this.blurInput()
       }
     }
   }
-}
 </script>