@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.27 → 7.48.1-qa-elisee-7.51.0

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

@@ -4,6 +4,7 @@
       v-if="hasLabelSlot"
       :align-items="alignItems"
       :border-color="borderColor"
+      :is-disabled="disabled"
       :is-error="isError"
       :is-interactive="isInteractive"
       :no-border="noBorder"
@@ -13,11 +14,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 +29,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 +45,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 +52,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 +93,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 +124,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 +157,8 @@
     isInteractive: Boolean,
     alignItems: String,
     labelFontColor: String,
-    labelFontWeight: String,
     borderColor: String,
     showLinearUnitName: Boolean,
-    colorMode: String,
-    showArrowControls: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -220,20 +182,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 +202,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 +226,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;
   `
@@ -378,18 +274,22 @@
         : props.theme.colors.mediumGray};
   `
 
-  const LabelWrapper = styled('div', inputProps)`
+  const LabelWrapper = styled('div')`
     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')};
+    cursor: ${(props) =>
+      props.isDisabled
+        ? 'not-allowed'
+        : props.isInteractive
+        ? 'ew-resize'
+        : 'auto'};
     border: ${(props) =>
       props.alignItems == 'vertical'
         ? 'none'
@@ -412,7 +312,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 +364,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 +521,6 @@
         type: Boolean,
         default: false,
       },
-      colorMode: {
-        type: String,
-        default: '',
-      },
-      showArrowControls: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {
@@ -742,36 +590,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 +685,6 @@
             this.$emit('on-input', evaluatedVal)
           }
         }
-        this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
@@ -948,12 +765,18 @@
         }
       },
       initInteraction(e) {
+        if (this.disabled) {
+          return
+        }
         this.focusInput()
         e.preventDefault()
         window.addEventListener('mousemove', this.interact, false)
         window.addEventListener('mouseup', this.stopInteract, false)
       },
       interact(e) {
+        if (this.disabled) {
+          return
+        }
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)

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

@@ -31,10 +31,8 @@
           <InputContainer
             ref="inputElement"
             :background-color="backgroundColor"
-            :border-color="borderColor"
             :data-id="inputDataId"
             data-test-id="input"
-            :default-padding="defaultPadding"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -66,13 +64,6 @@
           <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
-          <IconWrapper
-            v-if="iconName && !hasError && inputType !== 'password'"
-            :default-padding="defaultPadding"
-            size="16px"
-          >
-            <Icon color="white" cursor="default" :name="iconName" size="16px" />
-          </IconWrapper>
         </IconContainer>
         <ErrorMessage
           v-if="hasError && hasErrorMessage"
@@ -140,7 +131,6 @@
     borderColor: String,
     inputHeight: String,
     disabledBackgroundColor: String,
-    defaultPadding: Boolean,
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
@@ -158,8 +148,6 @@
         ? '11px 25px 11px 10px'
         : props.inputType === 'password'
         ? '11px 25px 11px 10px'
-        : props.defaultPadding
-        ? '10px 35px 10px 15px'
         : '11px 5px 11px 10px'};
     border-radius: 4px;
     position: relative;
@@ -206,13 +194,13 @@
       props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
   `
 
-  const IconAttrs = { size: String, defaultPadding: Boolean }
+  const IconAttrs = { size: String }
   const IconWrapper = styled('div', IconAttrs)`
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
-    right: ${(props) => (props.defaultPadding ? '15px' : '5px')};
+    right: 5px;
     height: ${(props) => (props.size ? props.size : 'auto')};
   `
 
@@ -376,15 +364,6 @@
         default: '',
         type: String,
       },
-      iconName: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      defaultPadding: {
-        required: false,
-        default: false,
-      },
     },
     data() {
       return {

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

@@ -1,5 +1,5 @@
 <template>
-  <ComponentWrapper :color-mode="colorMode" :layout="layout">
+  <ComponentWrapper :layout="layout">
     <RadioWrapper
       v-for="(item, index) in options"
       :key="item.value"
@@ -7,9 +7,7 @@
     >
       <LabelContainer
         :checkmark-color="checkmarkColor"
-        :color-mode="colorMode"
         :has-label="!!item.label"
-        :has-slots="!!$slots[`input-${item.value}`]"
         :is-checked="selectedOption === item.value"
         :is-disabled="item.disabled"
         :size="size"
@@ -27,7 +25,6 @@
         <span class="checkmark"></span>
         <LabelText
           v-if="item.label"
-          :color-mode="colorMode"
           :data-test-id="'radioLabel_' + item.value"
           :is-disabled="item.disabled"
         >
@@ -39,7 +36,6 @@
           size="16px"
           :text="item.infoText"
         />
-        <slot :name="`input-${item.value}`"></slot>
       </LabelContainer>
       <ImageContainer v-if="item.img">
         <RadioImage
@@ -99,14 +95,12 @@
 
   const wrapperProps = {
     layout: String,
-    colorMode: String,
   }
   const ComponentWrapper = styled('div', wrapperProps)`
     display: flex;
     flex-direction: ${(props) =>
       props.layout === 'vertical' ? 'column' : 'row'};
-    grid-gap: ${(props) =>
-      props.colorMode === 'transparent' ? '16px 5px' : '10px 5px'};
+    grid-gap: 10px 5px;
     flex-wrap: wrap;
   `
 
@@ -129,20 +123,14 @@
     isChecked: Boolean,
     checkmarkColor: String,
     hasLabel: Boolean,
-    colorMode: String,
-    hasSlots: Boolean,
   }
   const LabelContainer = styled('label', containerProps)`
     display: grid;
     grid-template-columns: auto 1fr auto;
-    grid-gap: ${(props) => (props.hasLabel || props.hasSlots ? '15px' : 0)};
+    grid-gap: ${(props) => (props.hasLabel ? '15px' : 0)};
     align-items: center;
     color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors.grey2
-        : props.colorMode === 'transparent'
-        ? props.theme.colors.white
-        : props.theme.colors.black};
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
     position: relative;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     font-size: ${(props) =>
@@ -199,14 +187,10 @@
     }
   `
 
-  const textAttrs = { isDisabled: Boolean, colorMode: String }
+  const textAttrs = { isDisabled: Boolean }
   const LabelText = styled('div', textAttrs)`
     color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors.grey2
-        : props.colorMode === 'transparent'
-        ? props.theme.colors.white
-        : props.theme.colors.black};
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `
 
   const RadioImage = styled.img`
@@ -296,11 +280,6 @@
         required: false,
         type: String,
       },
-      colorMode: {
-        default: '',
-        required: false,
-        type: String,
-      },
     },
     emits: ['on-radio-change'],
     data() {