@eturnity/eturnity_reusable_components 8.22.23-EPDM-15709.0 → 8.22.23-EPDM-13618.0

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

@@ -1,1111 +1,1111 @@
-<template>
-  <Container :align-items="alignItems" :input-width="inputWidth">
-    <LabelSlotWrapper
-      v-if="hasLabelSlot"
-      :align-items="alignItems"
-      :border-color="borderColor"
-      :is-error="isError"
-      :is-interactive="isInteractive"
-      :no-border="noBorder"
-      @mousedown="initInteraction"
-    >
-      <slot name="label"></slot>
-    </LabelSlotWrapper>
-    <LabelWrapper v-if="labelText">
-      <LabelText
-        :data-id="labelDataId"
-        :data-test-id="labelDataTestId"
-        :label-font-color="labelFontColor"
-        :label-font-weight="labelFontWeight"
-      >
-        {{ labelText }}
-      </LabelText>
-
-      <InfoText
-        v-if="labelInfoText"
-        :align-arrow="labelInfoAlign"
-        :app-theme="appTheme"
-        :text="labelInfoText"
-      />
-    </LabelWrapper>
-    <InputWrapper>
-      <InputInfoText
-        v-if="!!inputInfoText"
-        info-position="bottom"
-        :text="inputInfoText"
-      >
-        <template #trigger>
-          <InputContainer
-            v-bind="$attrs"
-            ref="inputField1"
-            :align-items="alignItems"
-            :background-color="
-              colorMode === 'transparent' ? 'transparent' : backgroundColor
-            "
-            :border-color="
-              colorMode === 'transparent' && !borderColor
-                ? 'white'
-                : borderColor
-            "
-            :color-mode="colorMode"
-            :data-id="inputDataId"
-            :data-qa-id="dataQaId"
-            :disabled="disabled && !isDisabledStyledOnly"
-            :font-color="colorMode === 'transparent' ? 'white' : fontColor"
-            :font-size="fontSize"
-            :has-label-slot="hasLabelSlot"
-            :has-slot="hasSlot"
-            :has-unit="unitName && !!unitName.length"
-            :input-height="inputHeight"
-            :is-border-error-only="isBorderErrorOnly"
-            :is-disabled="disabled"
-            :is-error="isError"
-            :is-info-border="isInfoBorder"
-            :is-interactive="isInteractive"
-            :min-width="minWidth"
-            :no-border="noBorder"
-            :placeholder="displayedPlaceholder"
-            :read-only="isReadOnly"
-            :readonly="isReadOnly"
-            :show-arrow-controls="showArrowControls"
-            :show-linear-unit-name="showLinearUnitName"
-            :slot-size="slotSize"
-            :text-align="textAlign"
-            :value="formatWithCurrency(value)"
-            @blur="onInputBlur($event)"
-            @focus="focusInput()"
-            @input="onInput($event)"
-            @keydown.down="decrementValue"
-            @keydown.up="incrementValue"
-            @keyup.enter="onEnterPress"
-          />
-        </template>
-      </InputInfoText>
-
-      <InputContainer
-        v-else
-        v-bind="$attrs"
-        ref="inputField1"
-        :align-items="alignItems"
-        :background-color="
-          colorMode === 'transparent' ? 'transparent' : backgroundColor
-        "
-        :border-color="
-          colorMode === 'transparent' && !borderColor ? 'white' : borderColor
-        "
-        :color-mode="colorMode"
-        :data-id="inputDataId"
-        :data-qa-id="dataQaId"
-        :disabled="disabled && !isDisabledStyledOnly"
-        :font-color="colorMode === 'transparent' ? 'white' : fontColor"
-        :font-size="fontSize"
-        :has-label-slot="hasLabelSlot"
-        :has-slot="hasSlot"
-        :has-unit="unitName && !!unitName.length"
-        :input-height="inputHeight"
-        :is-border-error-only="isBorderErrorOnly"
-        :is-disabled="disabled"
-        :is-error="isError"
-        :is-info-border="isInfoBorder"
-        :is-interactive="isInteractive"
-        :min-width="minWidth"
-        :no-border="noBorder"
-        :placeholder="displayedPlaceholder"
-        :read-only="isReadOnly"
-        :readonly="isReadOnly"
-        :show-arrow-controls="showArrowControls"
-        :show-linear-unit-name="showLinearUnitName"
-        :slot-size="slotSize"
-        :text-align="textAlign"
-        :value="formattedValue"
-        @blur="onInputBlur($event)"
-        @focus="focusInput()"
-        @input="onInput($event)"
-        @keydown.down="decrementValue"
-        @keydown.up="incrementValue"
-        @keyup.enter="onEnterPress"
-      />
-
-      <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
-        <slot></slot>
-      </SlotContainer>
-
-      <UnitContainer
-        v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="hasLength"
-        :is-error="isError"
-        >{{ unitName }}</UnitContainer
-      >
-      <IconWrapper
-        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
-        :margin-right="showSelect ? selectWidth : 0"
-        size="16px"
-      >
-        <Icon cursor="default" name="warning" size="16px" />
-      </IconWrapper>
-      <SelectWrapper v-if="showSelect">
-        <Divider />
-        <RCSelect
-          :disabled="isSelectDisabled"
-          :select-width="`${selectWidth}px`"
-          :show-border="false"
-          @input-change="handleSelectChange"
-        >
-          <template #selector>
-            <SelectText>{{ getSelectValue }}</SelectText>
-          </template>
-          <template #dropdown>
-            <RCOption
-              v-for="item in selectOptions"
-              :key="item.value"
-              :value="item.value"
-            >
-              {{ item.label }}
-            </RCOption>
-          </template>
-        </RCSelect>
-      </SelectWrapper>
-
-      <ArrowControls
-        v-if="!disabled && showArrowControls"
-        :color-mode="colorMode"
-      >
-        <ArrowButton @click="incrementValue">
-          <Icon
-            :color="colorMode === 'transparent' ? 'white' : undefined"
-            name="arrow_up"
-            size="8px"
-          />
-        </ArrowButton>
-        <ArrowDivider :color-mode="colorMode" />
-        <ArrowButton
-          :is-disabled="textInput <= minNumber"
-          @click="decrementValue"
-        >
-          <Icon
-            :color="colorMode === 'transparent' ? 'white' : undefined"
-            :disabled="textInput <= minNumber"
-            name="arrow_down"
-            size="8px"
-          />
-        </ArrowButton>
-      </ArrowControls>
-    </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
-  </Container>
-</template>
-
-<script>
-  // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
-  //This component should be used for questions with input fields only
-  //How to use:
-  // <input-number
-  //     placeholder="Enter distance"
-  //     :isError="false" //default is false
-  //     inputWidth="150px" //by default, this is 100%
-  //     minWidth="100px"
-  //     :numberPrecision="3"
-  //     minDecimals="2"
-  //     unitName="pc"
-  //     :value="inputValue" //required -- String
-  //     @input-change="onInputChange($event)" //required
-  //     @on-enter-click="onInputSubmit()"
-  //     :errorMessage="Enter a number between 1 and 10"
-  //     :disabled="false"
-  //     :noBorder="true"
-  //     textAlign="left" // "left, right, center"
-  //     :showLinearUnitName="true"
-  //     fontSize="13px"
-  //     labelText="Number of Modules"
-  //     labelInfoText="Here is some information for you..."
-  //     labelInfoAlign="left"
-  //     :minNumber="0"
-  //     fontColor="blue"
-  //     :isReadOnly="true"
-  //     colorMode="transparent" // Makes background transparent, border white, and font white
-  // >
-  //<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 RCSelect from '../select'
-  import RCOption from '../select/option'
-  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,
-    labelFontWeight: String,
-    borderColor: String,
-    showLinearUnitName: Boolean,
-    colorMode: String,
-    showArrowControls: Boolean,
-    readOnly: Boolean,
-    isBorderErrorOnly: Boolean,
-    isInfoBorder: Boolean,
-  }
-
-  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'};
-  `
-
-  const InputContainer = styled('input', inputProps)`
-    border: ${(props) =>
-      props.isInfoBorder
-        ? '1px solid ' + props.theme.semanticColors.blue[500]
-        : props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
-        ? 'none'
-        : props.borderColor
-        ? props.theme.colors[props.borderColor]
-          ? '1px solid ' + props.theme.colors[props.borderColor]
-          : '1px solid ' + props.borderColor
-        : '1px solid ' + props.theme.colors.grey4};
-    height: ${(props) => props.inputHeight};
-    max-height: ${(props) => props.inputHeight};
-    padding: ${({ colorMode }) =>
-      colorMode === 'transparent' ? '10px 15px' : '0 10px'};
-    padding-right: ${({
-      slotSize,
-      isError,
-      showLinearUnitName,
-      colorMode,
-      showArrowControls,
-      isBorderErrorOnly,
-    }) =>
-      showArrowControls
-        ? '40px'
-        : colorMode === 'transparent'
-        ? '0'
-        : slotSize
-        ? isError && !showLinearUnitName && !isBorderErrorOnly
-          ? 'calc(' + slotSize + ' + 24px)'
-          : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName && !isBorderErrorOnly
-        ? '24px'
-        : '5px'};
-    border-radius: ${(props) =>
-      props.isInteractive && props.alignItems != 'vertical'
-        ? '0 4px 4px 0'
-        : '4px'};
-    text-align: ${(props) => props.textAlign};
-    cursor: ${(props) =>
-      props.isDisabled || props.readOnly ? 'not-allowed' : 'auto'};
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-    color: ${(props) =>
-      props.isError
-        ? props.theme.colors.grey6
-        : props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? props.theme.colors.white
-          : props.theme.colors.grey2
-        : props.fontColor
-        ? props.fontColor + ' !important'
-        : props.theme.colors.black};
-    background-color: ${(props) =>
-      props.readOnly
-        ? props.theme.semanticColors.grey[300]
-        : props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? 'transparent'
-          : props.theme.colors.grey5
-        : props.backgroundColor
-        ? props.backgroundColor + ' !important'
-        : props.theme.colors.white};
-    width: ${(props) =>
-      props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
-    box-sizing: border-box;
-    opacity: ${(props) =>
-      props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
-    pointer-events: ${(props) => (props.readOnly ? 'none' : 'auto')};
-    user-select: ${(props) => (props.readOnly ? 'none' : 'auto')};
-
-    &::placeholder {
-      color: ${(props) => props.theme.colors.grey2};
-    }
-
-    &:focus {
-      outline: none;
-    }
-  `
-
-  const ArrowControlsProps = {
-    colorMode: String,
-  }
-  const ArrowControls = styled('div', ArrowControlsProps)`
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: grid;
-    grid-template-rows: 1fr auto 1fr;
-    align-items: center;
-    justify-items: center;
-    cursor: pointer;
-    width: 30px;
-    background-color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? 'transparent'
-        : props.theme.colors.white};
-    border-left: 1px solid
-      ${(props) =>
-        props.colorMode === 'transparent'
-          ? props.theme.colors.white
-          : props.theme.colors.black};
-  `
-
-  const ArrowButtonProps = {
-    isDisabled: Boolean,
-  }
-  const ArrowButton = styled('button', ArrowButtonProps)`
-    background: transparent;
-    opacity: ${(props) => (props.isDisabled ? '0.2' : '1')};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-  `
-
-  const ArrowDivider = styled('div', ArrowControlsProps)`
-    width: 100%;
-    height: 1px;
-    background-color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? props.theme.colors.white
-        : props.theme.colors.black};
-  `
-
-  const InputWrapper = styled.span`
-    position: relative;
-  `
-
-  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};
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    padding-left: 10px;
-    text-align: right;
-    color: ${(props) =>
-      props.isError
-        ? props.theme.colors.red
-        : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
-  `
-
-  const SlotContainer = styled('span', inputProps)`
-    text-align: right;
-    border-left: 1px solid
-      ${(props) =>
-        props.isError
-          ? props.theme.colors.red
-          : props.hasLength
-          ? props.theme.colors.black
-          : props.theme.colors.mediumGray};
-    position: absolute;
-    width: ${(props) =>
-      props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
-    right: 10px;
-    top: 10px;
-    padding-left: 10px;
-    color: ${(props) =>
-      props.isError
-        ? props.theme.colors.red
-        : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
-  `
-
-  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)`
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
-    border: ${(props) =>
-      props.alignItems == 'vertical'
-        ? 'none'
-        : props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
-        ? 'none'
-        : props.borderColor
-        ? props.theme.colors[props.borderColor]
-          ? '1px solid ' + props.theme.colors[props.borderColor]
-          : '1px solid ' + props.borderColor
-        : '1px solid ' + props.theme.colors.grey4};
-    border-radius: 4px 0 0 4px;
-    border-right: none;
-  `
-
-  const LabelText = styled('div', inputProps)`
-    font-size: 13px;
-    color: ${(props) =>
-      props.theme.colors[props.labelFontColor]
-        ? props.theme.colors[props.labelFontColor]
-        : props.labelFontColor};
-    font-weight: ${(props) => props.labelFontWeight};
-  `
-
-  const IconAttrs = { size: String, marginRight: Number }
-  const IconWrapper = styled('div', IconAttrs)`
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    right: ${(props) => props.marginRight + 10}px;
-    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};
-  `
-
-  const EVENT_TYPES = {
-    INPUT_FOCUS: 'input-focus',
-    INPUT_CHANGE: 'input-change',
-    INPUT_BLUR: 'input-blur',
-    PRESS_ENTER: 'on-enter-click',
-    INPUT_DRAG: 'on-input-drag',
-    SELECT_CHANGE: 'select-change',
-  }
-  const InputInfoText = styled(InfoText)`
-    width: 100%;
-  `
-
-  export default {
-    name: 'InputNumber',
-    emits: [...Object.values(EVENT_TYPES)],
-    components: {
-      Container,
-      InputContainer,
-      InputWrapper,
-      UnitContainer,
-      ErrorMessage,
-      LabelWrapper,
-      LabelSlotWrapper,
-      LabelText,
-      InfoText,
-      Icon,
-      SlotContainer,
-      IconWrapper,
-      RCSelect,
-      RCOption,
-      SelectWrapper,
-      SelectText,
-      Divider,
-      ArrowControls,
-      ArrowButton,
-      ArrowDivider,
-      InputInfoText,
-    },
-    inheritAttrs: false,
-    props: {
-      appTheme: {
-        type: String,
-        required: false,
-      },
-      placeholder: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      isError: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      inputWidth: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      minWidth: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      inputHeight: {
-        type: String,
-        required: false,
-        default: '40px',
-      },
-      value: {
-        required: true,
-        default: null,
-        validator: (val) =>
-          typeof val === 'string' || typeof val === 'number' || val === null,
-      },
-      clearInput: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      alignItems: {
-        type: String,
-        required: false,
-        default: 'vertical',
-      },
-      errorMessage: {
-        type: String,
-        required: false,
-        default: 'Please insert a correct number',
-      },
-      numberPrecision: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      minDecimals: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      unitName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      showLinearUnitName: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      noBorder: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      borderColor: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      textAlign: {
-        type: String,
-        required: false,
-        default: 'left',
-      },
-      fontSize: {
-        type: String,
-        required: false,
-        default: '13px',
-      },
-      isInteractive: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      interactionStep: {
-        type: Number,
-        required: false,
-        default: 1,
-      },
-      labelText: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      labelInfoText: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      labelInfoAlign: {
-        type: String,
-        required: false,
-        default: 'left',
-      },
-      defaultNumber: {
-        type: Number,
-        required: false,
-        default: null,
-      },
-      minNumber: {
-        type: Number,
-        required: false,
-        default: null,
-      },
-      fontColor: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      backgroundColor: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      numberToStringEnabled: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      allowNegative: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      slotSize: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      labelFontColor: {
-        type: String,
-        required: false,
-        default: 'eturnityGrey',
-      },
-      labelFontWeight: {
-        type: String,
-        required: false,
-        default: '700',
-      },
-      focus: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      labelDataId: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      labelDataTestId: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      inputDataId: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      dataQaId: {
-        required: false,
-        default: '',
-      },
-      showSelect: {
-        type: Boolean,
-        default: false,
-      },
-      selectWidth: {
-        type: Number,
-        default: 70,
-      },
-      selectOptions: {
-        type: Array,
-        default: () => [],
-      },
-      selectValue: {
-        type: [String, Number],
-        default: null,
-      },
-      isSelectDisabled: {
-        type: Boolean,
-        default: false,
-      },
-      colorMode: {
-        type: String,
-        default: '',
-      },
-      showArrowControls: {
-        type: Boolean,
-        default: false,
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false,
-      },
-      isBorderErrorOnly: {
-        type: Boolean,
-        default: false,
-      },
-      isInfoBorder: {
-        type: Boolean,
-        default: false,
-      },
-      inputInfoText: {
-        type: String,
-        default: '',
-      },
-      isDisabledStyledOnly: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    data() {
-      return {
-        isFocused: false,
-        warningIcon: warningIcon,
-        inputValue: null,
-        enteredValue: null,
-      }
-    },
-    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
-      },
-      getSelectValue() {
-        const item = this.selectOptions.find(
-          ({ value }) => value === this.selectValue
-        )
-
-        return item ? item.label : '-'
-      },
-      formattedValue() {
-        return this.isFocused
-          ? this.enteredValue
-          : this.formatWithCurrency(this.value)
-      },
-      hasLength() {
-        return this.formattedValue !== null && this.formattedValue.length > 0
-      },
-    },
-    watch: {
-      disabled(value) {
-        if (this.isFocused) {
-          this.focusInput()
-        }
-      },
-      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.inputValue = ''
-          this.enteredValue = ''
-        }
-      },
-      value: {
-        immediate: true,
-        handler(val) {
-          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
-            this.inputValue = this.value
-            this.enteredValue =
-              typeof this.value === 'number' && !isNaN(this.value)
-                ? Number(this.value.toFixed(this.numberPrecision))
-                : this.value
-          }
-        },
-      },
-    },
-    mounted() {
-      if (this.focus) {
-        this.focusInput()
-      }
-    },
-    methods: {
-      incrementValue() {
-        const currentValue = Math.max(
-          parseFloat(this.textInput || 0),
-          this.minNumber || 0
-        )
-        const newValue = currentValue + this.interactionStep
-        this.textInput = numberToString({
-          value: newValue,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-        this.$emit('on-input', newValue)
-        this.$emit('input-change', newValue)
-      },
-      decrementValue() {
-        const currentValue = Math.max(
-          parseFloat(this.textInput || 0),
-          this.minNumber || 0
-        )
-        const newValue = currentValue - this.interactionStep
-        if (this.allowNegative || newValue >= 0) {
-          this.textInput = numberToString({
-            value: newValue,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals,
-          })
-          this.$emit('on-input', newValue)
-          this.$emit('input-change', newValue)
-        }
-      },
-      onEnterPress() {
-        this.$emit(EVENT_TYPES.PRESS_ENTER)
-        this.$refs.inputField1.$el.blur()
-      },
-      onChangeHandler(value) {
-        if (value === undefined || isNaN(value) || value === '') {
-          value =
-            this.defaultNumber || this.defaultNumber === 0
-              ? this.defaultNumber
-              : this.minNumber || this.minNumber === 0
-              ? this.minNumber
-              : value
-        }
-        if (!this.allowNegative) {
-          value = Math.abs(value)
-        }
-        value = parseFloat(value)
-        // Need to return an integer rather than a string
-        return value
-      },
-      onEvaluateCode(value) {
-        // function to perform math on the code
-        // filter the string in case of any malicious content
-        if (typeof value == 'number') {
-          return value
-        }
-        let filtered = value.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)
-        try {
-          evaluated = eval(formatted.join(' '))
-        } catch (e) {
-          evaluated = 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) {
-        this.enteredValue = event.target.value
-        if (!this.isFocused || this.enteredValue === this.inputValue) {
-          return
-        }
-        let evaluatedVal
-        try {
-          evaluatedVal = this.onEvaluateCode(this.enteredValue)
-        } finally {
-          this.inputValue = this.onChangeHandler(evaluatedVal)
-          if (this.isFocused && typeof this.enteredValue !== 'number') {
-            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
-          }
-        }
-        this.textInput = evaluatedVal
-      },
-      onInputBlur(e) {
-        const defaultNumber =
-          [this.defaultNumber, this.minNumber].find((v) => v || v === 0) ?? null
-        this.isFocused = false
-
-        if (isNaN(this.inputValue) && this.enteredval === undefined) {
-          this.$emit(EVENT_TYPES.INPUT_BLUR, defaultNumber)
-        } else if (!isNaN(this.inputValue)) {
-          if (this.minNumber && this.inputValue < this.minNumber) {
-            this.inputValue = this.minNumber
-          }
-          this.$emit(EVENT_TYPES.INPUT_BLUR, this.inputValue)
-        }
-      },
-      focusInput() {
-        this.isFocused = true
-        if (this.disabled) {
-          return
-        }
-        this.textInput = this.formatWithCurrency(this.value)
-        this.enteredValue = stringToNumber({
-          value: this.textInput,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-        if (isNaN(this.enteredValue)) {
-          this.enteredValue = ''
-        }
-        this.$nextTick(() => {
-          this.$refs.inputField1.$el.select()
-        })
-        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
-      },
-      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) {
-          let input = this.numberToStringEnabled
-            ? numberToString({
-                value: adjustedMinValue,
-                numberPrecision: this.numberPrecision,
-                minDecimals: this.minDecimals,
-              })
-            : adjustedMinValue
-          let unit = this.showLinearUnitName ? '' : this.unitName
-          //return input + ' ' + unit
-          if (unit) {
-            return input + ' ' + unit
-          }
-          return input
-        } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-          return ''
-        } else if (this.isFocused) {
-          return value
-        } 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(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
-      },
-      stopInteract(e) {
-        e.preventDefault()
-        window.removeEventListener('mousemove', this.interact, false)
-        window.removeEventListener('mouseup', this.stopInteract, false)
-        this.blurInput()
-      },
-      handleSelectChange(value) {
-        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
-      },
-    },
-  }
-</script>
+<template>
+  <Container :align-items="alignItems" :input-width="inputWidth">
+    <LabelSlotWrapper
+      v-if="hasLabelSlot"
+      :align-items="alignItems"
+      :border-color="borderColor"
+      :is-error="isError"
+      :is-interactive="isInteractive"
+      :no-border="noBorder"
+      @mousedown="initInteraction"
+    >
+      <slot name="label"></slot>
+    </LabelSlotWrapper>
+    <LabelWrapper v-if="labelText">
+      <LabelText
+        :data-id="labelDataId"
+        :data-test-id="labelDataTestId"
+        :label-font-color="labelFontColor"
+        :label-font-weight="labelFontWeight"
+      >
+        {{ labelText }}
+      </LabelText>
+
+      <InfoText
+        v-if="labelInfoText"
+        :align-arrow="labelInfoAlign"
+        :app-theme="appTheme"
+        :text="labelInfoText"
+      />
+    </LabelWrapper>
+    <InputWrapper>
+      <InputInfoText
+        v-if="!!inputInfoText"
+        info-position="bottom"
+        :text="inputInfoText"
+      >
+        <template #trigger>
+          <InputContainer
+            v-bind="$attrs"
+            ref="inputField1"
+            :align-items="alignItems"
+            :background-color="
+              colorMode === 'transparent' ? 'transparent' : backgroundColor
+            "
+            :border-color="
+              colorMode === 'transparent' && !borderColor
+                ? 'white'
+                : borderColor
+            "
+            :color-mode="colorMode"
+            :data-id="inputDataId"
+            :data-qa-id="dataQaId"
+            :disabled="disabled && !isDisabledStyledOnly"
+            :font-color="colorMode === 'transparent' ? 'white' : fontColor"
+            :font-size="fontSize"
+            :has-label-slot="hasLabelSlot"
+            :has-slot="hasSlot"
+            :has-unit="unitName && !!unitName.length"
+            :input-height="inputHeight"
+            :is-border-error-only="isBorderErrorOnly"
+            :is-disabled="disabled"
+            :is-error="isError"
+            :is-info-border="isInfoBorder"
+            :is-interactive="isInteractive"
+            :min-width="minWidth"
+            :no-border="noBorder"
+            :placeholder="displayedPlaceholder"
+            :read-only="isReadOnly"
+            :readonly="isReadOnly"
+            :show-arrow-controls="showArrowControls"
+            :show-linear-unit-name="showLinearUnitName"
+            :slot-size="slotSize"
+            :text-align="textAlign"
+            :value="formatWithCurrency(value)"
+            @blur="onInputBlur($event)"
+            @focus="focusInput()"
+            @input="onInput($event)"
+            @keydown.down="decrementValue"
+            @keydown.up="incrementValue"
+            @keyup.enter="onEnterPress"
+          />
+        </template>
+      </InputInfoText>
+
+      <InputContainer
+        v-else
+        v-bind="$attrs"
+        ref="inputField1"
+        :align-items="alignItems"
+        :background-color="
+          colorMode === 'transparent' ? 'transparent' : backgroundColor
+        "
+        :border-color="
+          colorMode === 'transparent' && !borderColor ? 'white' : borderColor
+        "
+        :color-mode="colorMode"
+        :data-id="inputDataId"
+        :data-qa-id="dataQaId"
+        :disabled="disabled && !isDisabledStyledOnly"
+        :font-color="colorMode === 'transparent' ? 'white' : fontColor"
+        :font-size="fontSize"
+        :has-label-slot="hasLabelSlot"
+        :has-slot="hasSlot"
+        :has-unit="unitName && !!unitName.length"
+        :input-height="inputHeight"
+        :is-border-error-only="isBorderErrorOnly"
+        :is-disabled="disabled"
+        :is-error="isError"
+        :is-info-border="isInfoBorder"
+        :is-interactive="isInteractive"
+        :min-width="minWidth"
+        :no-border="noBorder"
+        :placeholder="displayedPlaceholder"
+        :read-only="isReadOnly"
+        :readonly="isReadOnly"
+        :show-arrow-controls="showArrowControls"
+        :show-linear-unit-name="showLinearUnitName"
+        :slot-size="slotSize"
+        :text-align="textAlign"
+        :value="formattedValue"
+        @blur="onInputBlur($event)"
+        @focus="focusInput()"
+        @input="onInput($event)"
+        @keydown.down="decrementValue"
+        @keydown.up="incrementValue"
+        @keyup.enter="onEnterPress"
+      />
+
+      <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
+        <slot></slot>
+      </SlotContainer>
+
+      <UnitContainer
+        v-if="unitName && showLinearUnitName && !hasSlot"
+        :has-length="hasLength"
+        :is-error="isError"
+        >{{ unitName }}</UnitContainer
+      >
+      <IconWrapper
+        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
+        :margin-right="showSelect ? selectWidth : 0"
+        size="16px"
+      >
+        <Icon cursor="default" name="warning" size="16px" />
+      </IconWrapper>
+      <SelectWrapper v-if="showSelect">
+        <Divider />
+        <RCSelect
+          :disabled="isSelectDisabled"
+          :select-width="`${selectWidth}px`"
+          :show-border="false"
+          @input-change="handleSelectChange"
+        >
+          <template #selector>
+            <SelectText>{{ getSelectValue }}</SelectText>
+          </template>
+          <template #dropdown>
+            <RCOption
+              v-for="item in selectOptions"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </RCOption>
+          </template>
+        </RCSelect>
+      </SelectWrapper>
+
+      <ArrowControls
+        v-if="!disabled && showArrowControls"
+        :color-mode="colorMode"
+      >
+        <ArrowButton @click="incrementValue">
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            name="arrow_up"
+            size="8px"
+          />
+        </ArrowButton>
+        <ArrowDivider :color-mode="colorMode" />
+        <ArrowButton
+          :is-disabled="textInput <= minNumber"
+          @click="decrementValue"
+        >
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            :disabled="textInput <= minNumber"
+            name="arrow_down"
+            size="8px"
+          />
+        </ArrowButton>
+      </ArrowControls>
+    </InputWrapper>
+    <ErrorMessage v-if="isError && errorMessage">{{
+      errorMessage
+    }}</ErrorMessage>
+  </Container>
+</template>
+
+<script>
+  // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
+  //This component should be used for questions with input fields only
+  //How to use:
+  // <input-number
+  //     placeholder="Enter distance"
+  //     :isError="false" //default is false
+  //     inputWidth="150px" //by default, this is 100%
+  //     minWidth="100px"
+  //     :numberPrecision="3"
+  //     minDecimals="2"
+  //     unitName="pc"
+  //     :value="inputValue" //required -- String
+  //     @input-change="onInputChange($event)" //required
+  //     @on-enter-click="onInputSubmit()"
+  //     :errorMessage="Enter a number between 1 and 10"
+  //     :disabled="false"
+  //     :noBorder="true"
+  //     textAlign="left" // "left, right, center"
+  //     :showLinearUnitName="true"
+  //     fontSize="13px"
+  //     labelText="Number of Modules"
+  //     labelInfoText="Here is some information for you..."
+  //     labelInfoAlign="left"
+  //     :minNumber="0"
+  //     fontColor="blue"
+  //     :isReadOnly="true"
+  //     colorMode="transparent" // Makes background transparent, border white, and font white
+  // >
+  //<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 RCSelect from '../select'
+  import RCOption from '../select/option'
+  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,
+    labelFontWeight: String,
+    borderColor: String,
+    showLinearUnitName: Boolean,
+    colorMode: String,
+    showArrowControls: Boolean,
+    readOnly: Boolean,
+    isBorderErrorOnly: Boolean,
+    isInfoBorder: Boolean,
+  }
+
+  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'};
+  `
+
+  const InputContainer = styled('input', inputProps)`
+    border: ${(props) =>
+      props.isInfoBorder
+        ? '1px solid ' + props.theme.semanticColors.blue[500]
+        : props.isError
+        ? '1px solid ' + props.theme.colors.red
+        : props.noBorder
+        ? 'none'
+        : props.borderColor
+        ? props.theme.colors[props.borderColor]
+          ? '1px solid ' + props.theme.colors[props.borderColor]
+          : '1px solid ' + props.borderColor
+        : '1px solid ' + props.theme.colors.grey4};
+    height: ${(props) => props.inputHeight};
+    max-height: ${(props) => props.inputHeight};
+    padding: ${({ colorMode }) =>
+      colorMode === 'transparent' ? '10px 15px' : '0 10px'};
+    padding-right: ${({
+      slotSize,
+      isError,
+      showLinearUnitName,
+      colorMode,
+      showArrowControls,
+      isBorderErrorOnly,
+    }) =>
+      showArrowControls
+        ? '40px'
+        : colorMode === 'transparent'
+        ? '0'
+        : slotSize
+        ? isError && !showLinearUnitName && !isBorderErrorOnly
+          ? 'calc(' + slotSize + ' + 24px)'
+          : 'calc(' + slotSize + ' + 10px)'
+        : isError && !showLinearUnitName && !isBorderErrorOnly
+        ? '24px'
+        : '5px'};
+    border-radius: ${(props) =>
+      props.isInteractive && props.alignItems != 'vertical'
+        ? '0 4px 4px 0'
+        : '4px'};
+    text-align: ${(props) => props.textAlign};
+    cursor: ${(props) =>
+      props.isDisabled || props.readOnly ? 'not-allowed' : 'auto'};
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+    color: ${(props) =>
+      props.isError
+        ? props.theme.colors.grey6
+        : props.isDisabled
+        ? props.colorMode === 'transparent'
+          ? props.theme.colors.white
+          : props.theme.colors.grey2
+        : props.fontColor
+        ? props.fontColor + ' !important'
+        : props.theme.colors.black};
+    background-color: ${(props) =>
+      props.readOnly
+        ? props.theme.semanticColors.grey[300]
+        : props.isDisabled
+        ? props.colorMode === 'transparent'
+          ? 'transparent'
+          : props.theme.colors.grey5
+        : props.backgroundColor
+        ? props.backgroundColor + ' !important'
+        : props.theme.colors.white};
+    width: ${(props) =>
+      props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
+    box-sizing: border-box;
+    opacity: ${(props) =>
+      props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
+    pointer-events: ${(props) => (props.readOnly ? 'none' : 'auto')};
+    user-select: ${(props) => (props.readOnly ? 'none' : 'auto')};
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.grey2};
+    }
+
+    &:focus {
+      outline: none;
+    }
+  `
+
+  const ArrowControlsProps = {
+    colorMode: String,
+  }
+  const ArrowControls = styled('div', ArrowControlsProps)`
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-rows: 1fr auto 1fr;
+    align-items: center;
+    justify-items: center;
+    cursor: pointer;
+    width: 30px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? 'transparent'
+        : props.theme.colors.white};
+    border-left: 1px solid
+      ${(props) =>
+        props.colorMode === 'transparent'
+          ? props.theme.colors.white
+          : props.theme.colors.black};
+  `
+
+  const ArrowButtonProps = {
+    isDisabled: Boolean,
+  }
+  const ArrowButton = styled('button', ArrowButtonProps)`
+    background: transparent;
+    opacity: ${(props) => (props.isDisabled ? '0.2' : '1')};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  `
+
+  const ArrowDivider = styled('div', ArrowControlsProps)`
+    width: 100%;
+    height: 1px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.theme.colors.black};
+  `
+
+  const InputWrapper = styled.span`
+    position: relative;
+  `
+
+  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};
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    padding-left: 10px;
+    text-align: right;
+    color: ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.black
+        : props.theme.colors.mediumGray};
+  `
+
+  const SlotContainer = styled('span', inputProps)`
+    text-align: right;
+    border-left: 1px solid
+      ${(props) =>
+        props.isError
+          ? props.theme.colors.red
+          : props.hasLength
+          ? props.theme.colors.black
+          : props.theme.colors.mediumGray};
+    position: absolute;
+    width: ${(props) =>
+      props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
+    right: 10px;
+    top: 10px;
+    padding-left: 10px;
+    color: ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.black
+        : props.theme.colors.mediumGray};
+  `
+
+  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)`
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
+    border: ${(props) =>
+      props.alignItems == 'vertical'
+        ? 'none'
+        : props.isError
+        ? '1px solid ' + props.theme.colors.red
+        : props.noBorder
+        ? 'none'
+        : props.borderColor
+        ? props.theme.colors[props.borderColor]
+          ? '1px solid ' + props.theme.colors[props.borderColor]
+          : '1px solid ' + props.borderColor
+        : '1px solid ' + props.theme.colors.grey4};
+    border-radius: 4px 0 0 4px;
+    border-right: none;
+  `
+
+  const LabelText = styled('div', inputProps)`
+    font-size: 13px;
+    color: ${(props) =>
+      props.theme.colors[props.labelFontColor]
+        ? props.theme.colors[props.labelFontColor]
+        : props.labelFontColor};
+    font-weight: ${(props) => props.labelFontWeight};
+  `
+
+  const IconAttrs = { size: String, marginRight: Number }
+  const IconWrapper = styled('div', IconAttrs)`
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    right: ${(props) => props.marginRight + 10}px;
+    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};
+  `
+
+  const EVENT_TYPES = {
+    INPUT_FOCUS: 'input-focus',
+    INPUT_CHANGE: 'input-change',
+    INPUT_BLUR: 'input-blur',
+    PRESS_ENTER: 'on-enter-click',
+    INPUT_DRAG: 'on-input-drag',
+    SELECT_CHANGE: 'select-change',
+  }
+  const InputInfoText = styled(InfoText)`
+    width: 100%;
+  `
+
+  export default {
+    name: 'InputNumber',
+    emits: [...Object.values(EVENT_TYPES)],
+    components: {
+      Container,
+      InputContainer,
+      InputWrapper,
+      UnitContainer,
+      ErrorMessage,
+      LabelWrapper,
+      LabelSlotWrapper,
+      LabelText,
+      InfoText,
+      Icon,
+      SlotContainer,
+      IconWrapper,
+      RCSelect,
+      RCOption,
+      SelectWrapper,
+      SelectText,
+      Divider,
+      ArrowControls,
+      ArrowButton,
+      ArrowDivider,
+      InputInfoText,
+    },
+    inheritAttrs: false,
+    props: {
+      appTheme: {
+        type: String,
+        required: false,
+      },
+      placeholder: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      isError: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      inputWidth: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      minWidth: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      inputHeight: {
+        type: String,
+        required: false,
+        default: '40px',
+      },
+      value: {
+        required: true,
+        default: null,
+        validator: (val) =>
+          typeof val === 'string' || typeof val === 'number' || val === null,
+      },
+      clearInput: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      alignItems: {
+        type: String,
+        required: false,
+        default: 'vertical',
+      },
+      errorMessage: {
+        type: String,
+        required: false,
+        default: 'Please insert a correct number',
+      },
+      numberPrecision: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
+      minDecimals: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
+      unitName: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      showLinearUnitName: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      noBorder: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      borderColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      textAlign: {
+        type: String,
+        required: false,
+        default: 'left',
+      },
+      fontSize: {
+        type: String,
+        required: false,
+        default: '13px',
+      },
+      isInteractive: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      interactionStep: {
+        type: Number,
+        required: false,
+        default: 1,
+      },
+      labelText: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      labelInfoText: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      labelInfoAlign: {
+        type: String,
+        required: false,
+        default: 'left',
+      },
+      defaultNumber: {
+        type: Number,
+        required: false,
+        default: null,
+      },
+      minNumber: {
+        type: Number,
+        required: false,
+        default: null,
+      },
+      fontColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      backgroundColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      numberToStringEnabled: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      allowNegative: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      slotSize: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      labelFontColor: {
+        type: String,
+        required: false,
+        default: 'eturnityGrey',
+      },
+      labelFontWeight: {
+        type: String,
+        required: false,
+        default: '700',
+      },
+      focus: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      labelDataId: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      labelDataTestId: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      inputDataId: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+      },
+      showSelect: {
+        type: Boolean,
+        default: false,
+      },
+      selectWidth: {
+        type: Number,
+        default: 70,
+      },
+      selectOptions: {
+        type: Array,
+        default: () => [],
+      },
+      selectValue: {
+        type: [String, Number],
+        default: null,
+      },
+      isSelectDisabled: {
+        type: Boolean,
+        default: false,
+      },
+      colorMode: {
+        type: String,
+        default: '',
+      },
+      showArrowControls: {
+        type: Boolean,
+        default: false,
+      },
+      isReadOnly: {
+        type: Boolean,
+        default: false,
+      },
+      isBorderErrorOnly: {
+        type: Boolean,
+        default: false,
+      },
+      isInfoBorder: {
+        type: Boolean,
+        default: false,
+      },
+      inputInfoText: {
+        type: String,
+        default: '',
+      },
+      isDisabledStyledOnly: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isFocused: false,
+        warningIcon: warningIcon,
+        inputValue: null,
+        enteredValue: null,
+      }
+    },
+    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
+      },
+      getSelectValue() {
+        const item = this.selectOptions.find(
+          ({ value }) => value === this.selectValue
+        )
+
+        return item ? item.label : '-'
+      },
+      formattedValue() {
+        return this.isFocused
+          ? this.enteredValue
+          : this.formatWithCurrency(this.value)
+      },
+      hasLength() {
+        return this.formattedValue !== null && this.formattedValue.length > 0
+      },
+    },
+    watch: {
+      disabled(value) {
+        if (this.isFocused) {
+          this.focusInput()
+        }
+      },
+      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.inputValue = ''
+          this.enteredValue = ''
+        }
+      },
+      value: {
+        immediate: true,
+        handler(val) {
+          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
+            this.inputValue = this.value
+            this.enteredValue =
+              typeof this.value === 'number' && !isNaN(this.value)
+                ? Number(this.value.toFixed(this.numberPrecision))
+                : this.value
+          }
+        },
+      },
+    },
+    mounted() {
+      if (this.focus) {
+        this.focusInput()
+      }
+    },
+    methods: {
+      incrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue + this.interactionStep
+        this.textInput = numberToString({
+          value: newValue,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        this.$emit('on-input', newValue)
+        this.$emit('input-change', newValue)
+      },
+      decrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue - this.interactionStep
+        if (this.allowNegative || newValue >= 0) {
+          this.textInput = numberToString({
+            value: newValue,
+            numberPrecision: this.numberPrecision,
+            minDecimals: this.minDecimals,
+          })
+          this.$emit('on-input', newValue)
+          this.$emit('input-change', newValue)
+        }
+      },
+      onEnterPress() {
+        this.$emit(EVENT_TYPES.PRESS_ENTER)
+        this.$refs.inputField1.$el.blur()
+      },
+      onChangeHandler(value) {
+        if (value === undefined || isNaN(value) || value === '') {
+          value =
+            this.defaultNumber || this.defaultNumber === 0
+              ? this.defaultNumber
+              : this.minNumber || this.minNumber === 0
+              ? this.minNumber
+              : value
+        }
+        if (!this.allowNegative) {
+          value = Math.abs(value)
+        }
+        value = parseFloat(value)
+        // Need to return an integer rather than a string
+        return value
+      },
+      onEvaluateCode(value) {
+        // function to perform math on the code
+        // filter the string in case of any malicious content
+        if (typeof value == 'number') {
+          return value
+        }
+        let filtered = value.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)
+        try {
+          evaluated = eval(formatted.join(' '))
+        } catch (e) {
+          evaluated = 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) {
+        this.enteredValue = event.target.value
+        if (!this.isFocused || this.enteredValue === this.inputValue) {
+          return
+        }
+        let evaluatedVal
+        try {
+          evaluatedVal = this.onEvaluateCode(this.enteredValue)
+        } finally {
+          this.inputValue = this.onChangeHandler(evaluatedVal)
+          if (this.isFocused && typeof this.enteredValue !== 'number') {
+            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
+          }
+        }
+        this.textInput = evaluatedVal
+      },
+      onInputBlur(e) {
+        const defaultNumber =
+          [this.defaultNumber, this.minNumber].find((v) => v || v === 0) ?? null
+        this.isFocused = false
+
+        if (isNaN(this.inputValue) && this.enteredval === undefined) {
+          this.$emit(EVENT_TYPES.INPUT_BLUR, defaultNumber)
+        } else if (!isNaN(this.inputValue)) {
+          if (this.minNumber && this.inputValue < this.minNumber) {
+            this.inputValue = this.minNumber
+          }
+          this.$emit(EVENT_TYPES.INPUT_BLUR, this.inputValue)
+        }
+      },
+      focusInput() {
+        this.isFocused = true
+        if (this.disabled) {
+          return
+        }
+        this.textInput = this.formatWithCurrency(this.value)
+        this.enteredValue = stringToNumber({
+          value: this.textInput,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        if (isNaN(this.enteredValue)) {
+          this.enteredValue = ''
+        }
+        this.$nextTick(() => {
+          this.$refs.inputField1.$el.select()
+        })
+        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
+      },
+      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) {
+          let input = this.numberToStringEnabled
+            ? numberToString({
+                value: adjustedMinValue,
+                numberPrecision: this.numberPrecision,
+                minDecimals: this.minDecimals,
+              })
+            : adjustedMinValue
+          let unit = this.showLinearUnitName ? '' : this.unitName
+          //return input + ' ' + unit
+          if (unit) {
+            return input + ' ' + unit
+          }
+          return input
+        } else if (!adjustedMinValue && adjustedMinValue !== 0) {
+          return ''
+        } else if (this.isFocused) {
+          return value
+        } 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(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
+      },
+      stopInteract(e) {
+        e.preventDefault()
+        window.removeEventListener('mousemove', this.interact, false)
+        window.removeEventListener('mouseup', this.stopInteract, false)
+        this.blurInput()
+      },
+      handleSelectChange(value) {
+        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
+      },
+    },
+  }
+</script>