@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.26 → 7.48.1-EPDM-4900.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.26",
+  "version": "7.48.1-EPDM-4900.0",
   "files": [
     "dist",
     "src"
@@ -16,7 +16,8 @@
     "build-storybook": "storybook build",
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
-    "test-coverage": "jest --coverage"
+    "test-coverage": "jest --coverage",
+    "prepublishOnly": "npm run test"
   },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",

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

@@ -52,9 +52,7 @@
       props.isDisabled
         ? props.theme.colors.disabled
         : props.customColor
-        ? props.theme.colors[props.customColor]
-          ? props.theme.colors[props.customColor]
-          : props.customColor
+        ? props.customColor
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;

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

@@ -5,7 +5,6 @@
       :custom-color="customColor"
       :data-id="dataId"
       :font-color="fontColor"
-      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
@@ -44,19 +43,12 @@
     customColor: String,
     fontColor: String,
     noWrap: Boolean,
-    height: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
-    display: flex;
-    justify-content: center;
     padding: 7px 15px;
     font-size: 13px;
     color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors.white
-        : props.fontColor
-        ? props.fontColor
-        : props.theme.colors.white};
+      props.fontColor ? props.fontColor : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
         ? props.theme.colors.disabled
@@ -75,7 +67,6 @@
     user-select: none;
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
-    height: ${(props) => props.height};
 
     &:hover {
       opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
@@ -145,11 +136,6 @@
         default: null,
         type: String,
       },
-      height: {
-        required: false,
-        default: 'auto',
-        type: String,
-      },
       id: {
         required: false,
         default: null,

package/src/components/icon/index.vue

@@ -35,7 +35,6 @@
     },
     name: {
       required: true,
-      type: String,
     },
     color: {
       required: false,

package/src/components/infoText/index.vue

@@ -2,16 +2,14 @@
   <PageContainer ref="container">
     <div
       ref="icon"
-      data-test-id="infoText_trigger"
-      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
+      @click="openTrigger === 'onClick' && toggleInfo()"
+      @mouseenter="openTrigger === 'onHover' && showInfo()"
+      @mouseleave="openTrigger === 'onHover' && hideInfo()"
     >
       <IconComponent
-        :color="iconColor || computedIconColor"
-        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-        :disabled="isDisabled"
-        :name="iconName"
+        :color="iconColor"
+        cursor="pointer"
+        name="info"
         :size="size"
       />
     </div>
@@ -113,9 +111,8 @@
     },
     props: {
       text: {
-        required: false,
-        default: '',
         type: String,
+        default: '',
       },
       size: {
         type: String,
@@ -145,20 +142,6 @@
         type: String,
         default: '',
       },
-      iconName: {
-        type: String,
-        default: 'info',
-      },
-      iconColor: {
-        type: String,
-        default: null,
-        required: false,
-      },
-      isDisabled: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -172,7 +155,6 @@
       const boxStyle = ref({})
       const arrowStyle = ref({})
       const wrapperStyle = ref({})
-      const isMobile = ref(window.innerWidth <= 768)
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
@@ -305,10 +287,7 @@
       }
 
       const handleClickOutside = (event) => {
-        if (
-          (props.openTrigger === 'onClick' || isMobile.value) &&
-          isVisible.value
-        ) {
+        if (props.openTrigger === 'onClick' && isVisible.value) {
           const clickedElement = event.target
           if (
             infoBox.value &&
@@ -320,14 +299,9 @@
         }
       }
 
-      const handleResize = () => {
-        isMobile.value = window.innerWidth <= 768
-        updatePosition()
-      }
-
       onMounted(() => {
         window.addEventListener('scroll', handleScroll, { passive: true })
-        window.addEventListener('resize', handleResize)
+        window.addEventListener('resize', updatePosition)
         document.addEventListener('scroll', handleScroll, {
           passive: true,
           capture: true,
@@ -337,7 +311,7 @@
 
       onUnmounted(() => {
         window.removeEventListener('scroll', handleScroll)
-        window.removeEventListener('resize', handleResize)
+        window.removeEventListener('resize', updatePosition)
         document.removeEventListener('scroll', handleScroll, { capture: true })
         document.removeEventListener('click', handleClickOutside)
       })
@@ -365,11 +339,10 @@
         wrapperStyle,
         textStyle,
         onImageLoad,
-        isMobile,
       }
     },
     computed: {
-      computedIconColor() {
+      iconColor() {
         return this.buttonType === 'error'
           ? theme.colors.red
           : theme.colors.mediumGray

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

@@ -163,7 +163,7 @@
   const LabelText = styled.div`
     font-size: 13px;
     display: grid;
-    align-items: center;
+    align-items: flex-start;
     min-height: 18px;
   `
 

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

@@ -13,11 +13,7 @@
     </LabelSlotWrapper>
 
     <LabelWrapper v-if="labelText">
-      <LabelText
-        :data-id="labelDataId"
-        :label-font-color="labelFontColor"
-        :label-font-weight="labelFontWeight"
-      >
+      <LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
         {{ labelText }}
       </LabelText>
 
@@ -32,14 +28,11 @@
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
-        :background-color="
-          colorMode === 'transparent' ? 'transparent' : backgroundColor
-        "
-        :border-color="colorMode === 'transparent' ? 'white' : borderColor"
-        :color-mode="colorMode"
+        :background-color="backgroundColor"
+        :border-color="borderColor"
         :data-id="inputDataId"
         :disabled="disabled"
-        :font-color="colorMode === 'transparent' ? 'white' : fontColor"
+        :font-color="fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
@@ -51,7 +44,6 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
-        :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
@@ -59,8 +51,6 @@
         @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">
@@ -102,31 +92,6 @@
           </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>
   </Container>
@@ -158,7 +123,6 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
-  //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
   //</inputNumber>
@@ -192,11 +156,8 @@
     isInteractive: Boolean,
     alignItems: String,
     labelFontColor: String,
-    labelFontWeight: String,
     borderColor: String,
     showLinearUnitName: Boolean,
-    colorMode: String,
-    showArrowControls: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -220,20 +181,9 @@
         : '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,
-    }) =>
-      showArrowControls
-        ? '40px'
-        : colorMode === 'transparent'
-        ? '0'
-        : slotSize
+    padding: 0 10px;
+    padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
+      slotSize
         ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
@@ -251,26 +201,20 @@
       props.isError
         ? props.theme.colors.grey6
         : props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? props.theme.colors.white
-          : props.theme.colors.grey2
+        ? props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? 'transparent'
-          : props.theme.colors.disabled
-        : props.backgroundColor
+      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')};
+    background-color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey5 : '#fff'};
     box-sizing: border-box;
-    opacity: ${(props) =>
-      props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
 
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
@@ -281,55 +225,6 @@
     }
   `
 
-  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;
   `
@@ -412,7 +307,7 @@
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor};
-    font-weight: ${(props) => props.labelFontWeight};
+    font-weight: 700;
   `
 
   const IconAttrs = { size: String, marginRight: Number }
@@ -464,184 +359,140 @@
       SelectWrapper,
       SelectText,
       Divider,
-      ArrowControls,
-      ArrowButton,
-      ArrowDivider,
     },
     inheritAttrs: false,
     props: {
       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: {
-        type: [String, Number],
         required: true,
         default: 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: '',
       },
       inputDataId: {
-        type: String,
         required: false,
         default: '',
       },
@@ -665,14 +516,6 @@
         type: Boolean,
         default: false,
       },
-      colorMode: {
-        type: String,
-        default: '',
-      },
-      showArrowControls: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {
@@ -742,36 +585,6 @@
       }
     },
     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('on-enter-click')
         this.$refs.inputField1.$el.blur()
@@ -867,7 +680,6 @@
             this.$emit('on-input', evaluatedVal)
           }
         }
-        this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false