@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.3 → 8.19.8-EPDM-12618.7

package/src/components/infoText/index.vue

@@ -15,40 +15,37 @@
         :is-disabled="isDisabled"
         :padding="padding"
       >
-        <template v-if="!$slots.trigger">
-          <LabelWrapper
-            v-if="labelText && labelAlign === 'left'"
-            :color="iconColor || computedIconColor"
-            :size="labelSize"
-          >
-            {{ labelText }}
-          </LabelWrapper>
-          <Dot
-            v-if="type === 'dot'"
-            :color="dotColor"
-            data-test-id="infoText_dot"
-          />
-          <IconComponent
-            v-else-if="!noIcon"
-            :color="iconColor || computedIconColor"
-            :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-            :disabled="isDisabled"
-            :hovered-color="iconColor || computedIconColor"
-            :name="iconName"
-            :size="size"
-          />
-          <LabelWrapper
-            v-if="labelText && labelAlign === 'right'"
-            :color="iconColor || computedIconColor"
-            :size="labelSize"
-          >
-            {{ labelText }}
-          </LabelWrapper>
-        </template>
-        <slot name="trigger"></slot>
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'left'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+        <Dot
+          v-if="type === 'dot'"
+          :color="dotColor"
+          data-test-id="infoText_dot"
+        />
+        <IconComponent
+          v-else-if="!noIcon"
+          :color="iconColor || computedIconColor"
+          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+          :disabled="isDisabled"
+          :hovered-color="iconColor || computedIconColor"
+          :name="iconName"
+          :size="size"
+        />
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'right'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible && !!text" to="body">
+    <Teleport v-if="isVisible" to="body">
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
@@ -230,7 +227,7 @@
       },
       infoPosition: {
         required: false,
-        default: null,
+        default: 'bottom',
         type: String,
       },
       maxWidth: {
@@ -366,9 +363,7 @@
           { position: 'left', space: spaceLeft },
         ].sort((a, b) => b.space - a.space)
 
-        const bestPosition = props.infoPosition
-          ? props.infoPosition
-          : positions[0].position
+        const bestPosition = positions[0].position
 
         let top, left, arrowPosition
 

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

@@ -30,61 +30,7 @@
       />
     </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"
@@ -97,23 +43,20 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :disabled="disabled && !isDisabledStyledOnly"
+        :disabled="disabled"
         :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"
@@ -126,7 +69,6 @@
         @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
-
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
         <slot></slot>
       </SlotContainer>
@@ -138,7 +80,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
+        v-if="isError && !showLinearUnitName"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -192,9 +134,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
+    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -265,8 +205,6 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
-    isBorderErrorOnly: Boolean,
-    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -279,9 +217,7 @@
 
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isInfoBorder
-        ? '1px solid ' + props.theme.semanticColors.blue[500]
-        : props.isError
+      props.isError
         ? '1px solid ' + props.theme.colors.red
         : props.noBorder
         ? 'none'
@@ -300,17 +236,16 @@
       showLinearUnitName,
       colorMode,
       showArrowControls,
-      isBorderErrorOnly,
     }) =>
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
         ? '0'
         : slotSize
-        ? isError && !showLinearUnitName && !isBorderErrorOnly
+        ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName && !isBorderErrorOnly
+        : isError && !showLinearUnitName
         ? '24px'
         : '5px'};
     border-radius: ${(props) =>
@@ -522,10 +457,6 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
-  const InputInfoText = styled(InfoText)`
-    width: 100%;
-  `
-
   export default {
     name: 'InputNumber',
     components: {
@@ -549,7 +480,6 @@
       ArrowControls,
       ArrowButton,
       ArrowDivider,
-      InputInfoText,
     },
     inheritAttrs: false,
     props: {
@@ -769,22 +699,6 @@
         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 {

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

@@ -179,9 +179,7 @@
     position: relative;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
     color: ${(props) =>
-      props.isError
-        ? props.theme.colors.grey6
-        : props.isDisabled
+      props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'

package/src/components/pageTitle/index.vue

@@ -46,6 +46,7 @@
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
     font-weight: 600;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
+    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {

package/src/components/tableDropdown/index.vue

@@ -78,10 +78,13 @@
               v-else
               class="inputField"
               :disabled="customInputDisabled"
+              :error-message="item.errorMessage"
               :font-color="showArchived ? theme.colors.red : 'black'"
+              :is-error="item.isError"
               :min-width="item.value.length + 'ch'"
-              :no-border="true"
+              :no-border="item.noBorder || item.noBorder === undefined"
               :value="item.value"
+              @input-blur="onCustomInputChange($event.trim())"
               @input-change="onCustomInputChange($event)"
             />
           </InputContainer>
@@ -162,7 +165,7 @@
             </OptionsItem>
           </OptionsWrapper>
           <CustomContainer
-            v-if="inputText.length && allowFreeInputs"
+            v-if="getCustomName.length && allowFreeInputs"
             @click="onCustomNameClick()"
           >
             <CustomName>{{ getCustomName }}</CustomName>
@@ -226,7 +229,6 @@
   const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
   const ComponentItem = styled('td', ItemAttrs)`
     padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
-    overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 0 !important;
     color: ${(props) =>
@@ -558,7 +560,7 @@
     },
     computed: {
       getCustomName() {
-        return this.inputText
+        return this.inputText.trim()
       },
       theme() {
         return theme
@@ -652,7 +654,7 @@
       },
       onCustomNameClick() {
         this.wasClicked = true
-        this.$emit('on-custom-input-name', this.inputText)
+        this.$emit('on-custom-input-name', this.getCustomName)
         this.$emit('toggle-dropdown-open', { close: true })
         this.inputText = ''
       },