@eturnity/eturnity_reusable_components 8.16.9-EPDM-11600.7 → 8.16.9-EPDM-6306.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.9-EPDM-11600.7",
+  "version": "8.16.9-EPDM-6306.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/erase.svg

@@ -1,3 +1,4 @@
-<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M18.4389 3.06113C14.3574 -1.02038 7.64263 -1.02038 3.56113 3.06113C-0.520376 7.14263 -0.520376 13.8574 3.56113 17.9389C7.64263 22.0204 14.3574 22.0204 18.4389 17.9389C22.5204 13.8574 22.5204 7.2743 18.4389 3.06113ZM16.464 14.2524L14.6207 16.0956L10.9342 12.4091L7.24765 16.0956L5.40439 14.2524L9.09091 10.5658L5.40439 6.87931L7.24765 5.03605L10.9342 8.72257L14.6207 5.03605L16.464 6.87931L12.7774 10.5658L16.464 14.2524Z" fill="#FF5656"/>
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="7"></circle>
+<path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
 </svg>

package/src/assets/theme.js

@@ -333,7 +333,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             active: {
-              backgroundColor: semanticColors.purple[50],
+              backgroundColor: semanticColors.blue[100],
               textColor: semanticColors.purple[600],
               borderColor: semanticColors.grey[600],
             },

package/src/components/infoCard/index.vue

@@ -123,11 +123,7 @@
         return this.type === 'error_minor'
       },
       iconName() {
-        return this.type === 'warning'
-          ? 'warning_triangle'
-          : this.isErrorMinor
-          ? 'erase'
-          : 'info'
+        return this.type === 'warning' ? 'warning_triangle' : 'info'
       },
       presetStyles() {
         // the types that doesn't have explicit border anyway have it transparent
@@ -146,8 +142,8 @@
           stylesCollection.iconColor = theme.semanticColors.teal[800]
         } else if (this.isErrorMinor) {
           stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.grey4
-          stylesCollection.iconColor = theme.colors.red
+          stylesCollection.borderColor = theme.colors.pureRed
+          stylesCollection.iconColor = theme.colors.pureRed
         } else {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -3,15 +3,15 @@ import InputNumber from './index.vue'
 export default {
   title: 'InputNumber',
   component: InputNumber,
+  // argTypes: {},
 }
 
-const Template = (args) => ({
+const Template = (args, { argTypes }) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { InputNumber },
-  setup() {
-    return { args: args }
-  },
-  template: `<InputNumber v-bind="args" />`,
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<input-number v-bind="$props" />',
 
   // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
   // How to use:
@@ -73,20 +73,6 @@ Disabled.args = {
   showLinearUnitName: false,
 }
 
-export const DisabledAndPreDefined = Template.bind({})
-DisabledAndPreDefined.args = {
-  placeholder: 'Enter Value',
-  disabled: true,
-  isPreDefined: true,
-  value: '',
-  inputWidth: '200px',
-  isError: false,
-  numberPrecision: 0,
-  noBorder: false,
-  textAlign: 'left',
-  showLinearUnitName: false,
-}
-
 export const LinearUnit = Template.bind({})
 LinearUnit.args = {
   placeholder: 'Enter Value',

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

@@ -43,6 +43,7 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
+        :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
@@ -52,7 +53,6 @@
         :is-disabled="disabled"
         :is-error="isError"
         :is-interactive="isInteractive"
-        :is-pre-defined="isPreDefined"
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
@@ -61,7 +61,7 @@
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formatWithCurrency(value)"
+        :value="formattedValue"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -75,7 +75,7 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="!!textInput.length"
+        :has-length="hasLength"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
@@ -92,7 +92,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="$emit('select-change', $event)"
+          @input-change="handleSelectChange"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -134,7 +134,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{ errorMessage }}</ErrorMessage>
+    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -197,7 +197,6 @@
     slotSize: String,
     inputHeight: String,
     isInteractive: Boolean,
-    isPreDefined: Boolean,
     alignItems: String,
     labelFontColor: String,
     labelFontWeight: String,
@@ -260,7 +259,7 @@
     color: ${(props) =>
       props.isError
         ? props.theme.colors.grey6
-        : props.isDisabled && !props.isPreDefined
+        : props.isDisabled
         ? props.colorMode === 'transparent'
           ? props.theme.colors.white
           : props.theme.colors.grey2
@@ -458,8 +457,18 @@
     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',
+  }
+
   export default {
     name: 'InputNumber',
+    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -538,11 +547,6 @@
         required: false,
         default: 0,
       },
-      isPreDefined: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
       minDecimals: {
         type: Number,
         required: false,
@@ -663,18 +667,12 @@
         required: false,
         default: '',
       },
-      labelDataTestId: {
-        type: String,
-        required: false,
-        default: '',
-      },
       inputDataId: {
         type: String,
         required: false,
         default: '',
       },
       dataQaId: {
-        type: String,
         required: false,
         default: '',
       },
@@ -713,9 +711,10 @@
     },
     data() {
       return {
-        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
+        inputValue: null,
+        enteredValue: null,
       }
     },
     computed: {
@@ -738,6 +737,14 @@
 
         return item ? item.label : '-'
       },
+      formattedValue() {
+        return this.isFocused
+          ? this.enteredValue
+          : this.formatWithCurrency(this.value)
+      },
+      hasLength() {
+        return this.formattedValue !== null && this.formattedValue.length > 0
+      },
     },
     watch: {
       focus(value) {
@@ -748,30 +755,19 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.textInput = ''
+          this.inputValue = ''
+          this.enteredValue = ''
         }
       },
-    },
-    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,
-        })
-      }
+      value: {
+        immediate: true,
+        handler(val) {
+          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
+            this.inputValue = this.value
+            this.enteredValue = Number(this.value.toFixed(this.numberPrecision))
+          }
+        },
+      },
     },
     mounted() {
       if (this.focus) {
@@ -810,29 +806,28 @@
         }
       },
       onEnterPress() {
-        this.$emit('on-enter-click')
+        this.$emit(EVENT_TYPES.PRESS_ENTER)
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(event) {
-        if (isNaN(event) || event === '') {
-          event = this.defaultNumber
+      onChangeHandler(value) {
+        if (isNaN(value) || value === '') {
+          value = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : event
+            : value
         }
         if (!this.allowNegative) {
-          event = Math.abs(event)
+          value = Math.abs(value)
         }
-        event = parseFloat(event)
+        value = parseFloat(value)
         // Need to return an integer rather than a string
-        this.$emit('input-change', event)
+        return parseFloat(value)
       },
-      onEvaluateCode(event) {
+      onEvaluateCode(value) {
         // 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, '')
+        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -890,48 +885,32 @@
         return array
       },
       onInput(event) {
-        if (!this.isFocused) {
+        console.log('onInput', event.target.value)
+        this.enteredValue = event.target.value
+        if (!this.isFocused || this.enteredValue === this.inputValue) {
           return
         }
-        if (event.target.value === '') {
-          this.$emit('on-input', '')
-        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(event)
+          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
         } finally {
-          if (evaluatedVal && this.value != evaluatedVal) {
-            this.$emit('on-input', evaluatedVal)
+          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) {
         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,
-          })
+        if (!Number.isNaN(this.inputValue)) {
+          this.enteredValue = this.inputValue
         }
-        let adjustedMinValue =
-          evaluatedInput && evaluatedInput.length
-            ? evaluatedInput
-            : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
-        this.$emit('input-blur', adjustedMinValue)
+        this.$emit(
+          EVENT_TYPES.INPUT_BLUR,
+          Number(this.onEvaluateCode(String(this.inputValue)))
+        )
       },
       focusInput() {
         if (this.disabled) {
@@ -941,7 +920,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit('input-focus')
+        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
       },
       blurInput() {
         if (this.disabled) {
@@ -961,7 +940,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+        if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -974,6 +953,8 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
+        } else if (this.isFocused) {
+          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -994,14 +975,7 @@
         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.value=value
+        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
       },
       stopInteract(e) {
         e.preventDefault()
@@ -1009,6 +983,9 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
+      handleSelectChange(value) {
+        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
+      },
     },
   }
 </script>

package/src/components/pageSubtitle/index.vue

@@ -5,8 +5,7 @@
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >
-    <span v-if="containsHtml" data-test-id="page_subtitle_text" v-html="text"></span>
-    <span v-else data-test-id="page_subtitle_text">
+    <span data-test-id="page_subtitle_text">
       {{ text }}
     </span>
     <InfoText
@@ -59,11 +58,6 @@
         required: true,
         type: String,
       },
-      containsHtml: {
-        required: false,
-        type: Boolean,
-        default: false,
-      },
       color: {
         required: false,
         type: String,

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = parseFloat(value)
+  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits: