@eturnity/eturnity_reusable_components 8.26.4--EPDM-15979.0 → 8.26.4--EPDM-15979.2

package/dist/main.es15.js

@@ -10,11 +10,13 @@ const ButtonAttrs = {
   type: String,
   isDisabled: Boolean,
   minWidth: String,
+  width: String,
   noWrap: Boolean,
   height: String,
   variant: String,
   buttonSize: String,
-  appTheme: String
+  appTheme: String,
+  isActive: Boolean
 };
 const ButtonContainer = styled("div", ButtonAttrs)`
     display: flex;
@@ -28,7 +30,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
   return (_d = (_c = (_b = (_a = props.theme) == null ? void 0 : _a.mainButton) == null ? void 0 : _b.size) == null ? void 0 : _c[props.buttonSize]) == null ? void 0 : _d.fontSize;
 }};
     color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.textColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.textColor};
-    background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.backgroundColor};
+    background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.isActive ? props.theme.mainButton[props.appTheme][props.type][props.variant].active.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.backgroundColor};
     border: ${(props) => {
   const borderValue = props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.borderColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.borderColor;
   return borderValue ? "1px solid " + borderValue : "none";
@@ -41,7 +43,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
     ${(props) => props.noWrap ? `white-space: nowrap;` : ""};
     height: ${(props) => props.height};
     line-height: 1;
-
+    width: ${(props) => props.width};
     &:hover {
       background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].hover.backgroundColor};
     }
@@ -105,6 +107,11 @@ const _sfc_main = {
       default: false,
       type: Boolean
     },
+    isActive: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
     icon: {
       required: false,
       default: null,
@@ -139,6 +146,11 @@ const _sfc_main = {
       default: null,
       type: String
     },
+    width: {
+      required: false,
+      default: "auto",
+      type: String
+    },
     height: {
       required: false,
       default: "auto",
@@ -189,11 +201,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-id": $props.dataId,
       "data-qa-id": $props.dataQaId,
       height: $props.height,
+      "is-active": $props.isActive,
       "is-disabled": $props.isDisabled,
       "min-width": $props.minWidth,
       "no-wrap": $props.noWrap,
       type: $props.type,
-      variant: $props.variant
+      variant: $props.variant,
+      width: $props.width
     }, {
       default: withCtx(() => [createVNode(_component_LabelComponent, {
         "has-icon": Boolean($props.icon)
@@ -208,7 +222,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["has-icon"])]),
       _: 1
-    }, 8, ["id", "app-theme", "button-size", "data-id", "data-qa-id", "height", "is-disabled", "min-width", "no-wrap", "type", "variant"])]),
+    }, 8, ["id", "app-theme", "button-size", "data-id", "data-qa-id", "height", "is-active", "is-disabled", "min-width", "no-wrap", "type", "variant", "width"])]),
     _: 1
   });
 }

package/dist/main.es21.js

@@ -503,7 +503,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["color", "size"])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createTextVNode(), renderSlot(_ctx.$slots, "trigger")]),
       _: 3
-    }, 8, ["background-color", "border-radius", "hovered-icon", "is-active", "is-disabled", "padding"])], 512), createTextVNode(), $setup.isVisible && (!!$props.text || _ctx.$slots.default) ? (openBlock(), createBlock(Teleport, {
+    }, 8, ["background-color", "border-radius", "hovered-icon", "is-active", "is-disabled", "padding"])], 512), createTextVNode(), !$props.hideInfoText && $setup.isVisible && (!!$props.text || _ctx.$slots.default) ? (openBlock(), createBlock(Teleport, {
       key: 0,
       to: "body"
     }, [createVNode(_component_TextWrapper, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.26.4--EPDM-15979.0",
+  "version": "8.26.4--EPDM-15979.2",
   "files": [
     "dist",
     "src"

package/src/components/barchart/BottomFields.vue

@@ -22,7 +22,7 @@
         <!-- For stacked bar chart -->
         <template v-if="seriesData.length">
           <InputRow
-            v-for="series in seriesData"
+            v-for="(series, seriesIndex) in seriesData"
             :key="series.name"
             :data-series-name="series.name"
           >
@@ -36,8 +36,10 @@
                 :allow-negative="false"
                 :default-number="0"
                 :disabled="isInputsDisabled"
+                :error-message="getInputErrorMessage(series.data, item.label)"
                 input-height="36px"
                 :is-disabled-styled-only="true"
+                :is-error="getIsError(series.data, item.label)"
                 :is-info-border="
                   fieldMode === 'percentage'
                     ? calculatePercentageTotal(item.label) !== 100
@@ -117,8 +119,10 @@
               <InputNumber
                 :allow-negative="false"
                 :disabled="isInputsDisabled"
+                :error-message="item.errorMessage"
                 input-height="36px"
                 :is-disabled-styled-only="true"
+                :is-error="item.isError"
                 :min-decimals="0"
                 :number-precision="0"
                 text-align="center"
@@ -142,6 +146,11 @@
       </InfoCardBody>
     </InfoCard>
   </InfoCardContainer>
+  <InfoCardContainer v-if="hasInputErrors" :y-axis-width="yAxisWidth">
+    <InfoCard align-items="center" type="error_minor">
+      <InfoCardBody> {{ inputErrorMessage }} </InfoCardBody>
+    </InfoCard>
+  </InfoCardContainer>
 </template>
 
 <script setup>
@@ -204,6 +213,10 @@
       type: String,
       default: '',
     },
+    inputErrorMessage: {
+      type: String,
+      default: '',
+    },
   })
 
   const seriesData = ref([])
@@ -229,6 +242,8 @@
         label: d.label,
         value: d.value,
         percentage: d.percentage,
+        isError: d.isError,
+        errorMessage: d.errorMessage,
         originalValue: currentSeriesData.length
           ? currentSeriesData[itemIndex].data[dIndex].originalValue
           : d.value,
@@ -275,7 +290,7 @@
     }
   }
 
-  const getDisplayValue = (data, label, shouldRound = true) => {
+  const getDisplayValue = (data, label) => {
     if (props.fieldMode === 'absolute') {
       return data.find((d) => d.label === label)?.value
     }
@@ -283,6 +298,13 @@
     return data.find((d) => d.label === label)?.percentage
   }
 
+  const getIsError = (data, label) => {
+    return data.find((d) => d.label === label)?.isError
+  }
+  const getInputErrorMessage = (data, label) => {
+    return data.find((d) => d.label === label)?.errorMessage
+  }
+
   const calculatePercentageTotal = (label) => {
     const percentageTotal = seriesData.value.reduce((sum, series) => {
       const percentage =
@@ -336,6 +358,14 @@
       return calculatePercentageTotal(d.label) !== 100
     })
   })
+  const hasInputErrors = computed(() => {
+    if (seriesData.value.length) {
+      return seriesData.value.some((serie) =>
+        serie.data.some((item) => item.isError)
+      )
+    }
+    return props.data.some((item) => item.isError)
+  })
 
   const handleFieldsScroll = (event) => {
     emit('sync-scroll', event.target.scrollLeft)

package/src/components/barchart/index.vue

@@ -166,6 +166,7 @@
       :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
       :percentage-error-message="percentageErrorMessage"
+      :input-error-message="inputErrorMessage"
       :series="series"
       :y-axis-width="yAxisWidth"
       @input-blur="handleInputBlur"
@@ -307,6 +308,10 @@
       type: String,
       default: '',
     },
+    inputErrorMessage: {
+      type: String,
+      default: '',
+    },
   })
 
   const generateChartId = () =>

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

@@ -7,11 +7,13 @@
       :data-id="dataId"
       :data-qa-id="dataQaId"
       :height="height"
+      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
       :variant="variant"
+      :width="width"
     >
       <LabelComponent :has-icon="Boolean(icon)">
         <Icon
@@ -50,11 +52,13 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
+    width: String,
     noWrap: Boolean,
     height: String,
     variant: String,
     buttonSize: String,
     appTheme: String,
+    isActive: Boolean,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
@@ -73,6 +77,9 @@
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
+        : props.isActive
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .active.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -91,7 +98,7 @@
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
     line-height: 1;
-
+    width: ${(props) => props.width};
     &:hover {
       background-color: ${(props) =>
         props.isDisabled
@@ -170,6 +177,11 @@
         default: false,
         type: Boolean,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       icon: {
         required: false,
         default: null,
@@ -204,6 +216,11 @@
         default: null,
         type: String,
       },
+      width: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
       height: {
         required: false,
         default: 'auto',

package/src/components/infoText/index.vue

@@ -49,7 +49,10 @@
         <slot name="trigger"></slot>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible && (!!text || $slots.default)" to="body">
+    <Teleport
+      v-if="!hideInfoText && isVisible && (!!text || $slots.default)"
+      to="body"
+    >
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"

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

@@ -799,6 +799,10 @@
         type: Boolean,
         default: false,
       },
+      hasSpaceBetweenUnit: {
+        type: Boolean,
+        default: true,
+      },
     },
     data() {
       return {
@@ -812,8 +816,12 @@
       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 : ''}`
+          return `${this.defaultNumber}${this.hasSpaceBetweenUnit ? ' ' : ''}${
+            this.unitName ? this.unitName : ''
+          }`
+        return `${this.minNumber || 0}${this.hasSpaceBetweenUnit ? ' ' : ''}${
+          this.unitName ? this.unitName : ''
+        }`
       },
       hasSlot() {
         return !!this.$slots.default
@@ -1027,8 +1035,9 @@
           return
         }
         this.textInput = this.formatWithCurrency(this.value)
+        const textInputWithoutUnit = this.formatWithoutUnit(this.value)
         this.enteredValue = stringToNumber({
-          value: this.textInput,
+          value: textInputWithoutUnit,
           numberPrecision: this.numberPrecision,
           minDecimals: this.minDecimals,
         })
@@ -1049,6 +1058,38 @@
           this.$refs.inputField1.$el.blur()
         })
       },
+      formatWithoutUnit(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
+          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
+        }
+      },
       formatWithCurrency(value) {
         let adjustedMinValue =
           value || value === 0
@@ -1069,7 +1110,7 @@
           let unit = this.showLinearUnitName ? '' : this.unitName
           //return input + ' ' + unit
           if (unit) {
-            return input + ' ' + unit
+            return `${input}${this.hasSpaceBetweenUnit ? ' ' : ''}${unit}`
           }
           return input
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {

package/src/components/tabsHeader/index.vue

@@ -10,7 +10,8 @@
         data-test-id="tab-item"
         :full-size="fullSize"
         :is-active="activeTab === item.id"
-        @click="onTabClick({ id: item.id })"
+        :is-disabled="item.isDisabled"
+        @click="onTabClick({ id: item.id, isDisabled: item.isDisabled })"
       >
         <RCIcon
           v-if="item.icon"
@@ -28,7 +29,12 @@
           :name="item.icon"
           size="14px"
         />
-        <div data-test-id="tab-text">{{ item.text }}</div>
+        <TabText
+          data-test-id="tab-text"
+          :is-active="activeTab === item.id"
+          :is-disabled="item.isDisabled"
+          >{{ item.text }}</TabText
+        >
         <DotIcon
           v-if="item.subText"
           data-test-id="dot-icon"
@@ -43,6 +49,16 @@
           name="warning"
           size="14px"
         />
+        <ConversionTag
+          v-if="item.showUpgradeTag"
+          :data-id="
+            item.isTrialEnded || item.isTrialActive
+              ? `${item.upgradeName}_upgrade_only`
+              : `conversion_tag_import_${item.upgradeName}_available_trial_${item.isTrialAvailable}`
+          "
+          :is-capitalized="true"
+          :text="item.upgradeTagText"
+        />
       </TabItem>
     </TabsContainer>
   </PageContainer>
@@ -69,13 +85,7 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
   import theme from '@/assets/theme'
-
-  const NameContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-  `
+  import ConversionTag from '../tag/conversionTag'
 
   const DotIconAttrs = { isActive: Boolean }
   const DotIcon = styled('div', DotIconAttrs)`
@@ -101,7 +111,7 @@
     border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
   `
 
-  const TabAttrs = { isActive: Boolean, fullSize: Boolean }
+  const TabAttrs = { isActive: Boolean, fullSize: Boolean, isDisabled: Boolean }
   const TabItem = styled('div', TabAttrs)`
     display: flex;
     align-items: center;
@@ -109,6 +119,7 @@
     gap: 8px;
     padding: 10px 25px;
     font-size: 14px;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     font-weight: ${(props) => (props.isActive ? '500' : '400')};
     color: ${(props) =>
       props.isActive
@@ -122,6 +133,19 @@
         : '1px solid' + props.theme.semanticColors.grey[400]};
   `
 
+  const TabTextAttrs = { isActive: Boolean, isDisabled: Boolean }
+  const TabText = styled('div', TabTextAttrs)`
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.isDisabled
+        ? props.theme.semanticColors.grey[600]
+        : props.theme.semanticColors.teal[700]};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  `
+
   export default {
     name: 'RCTabsHeader',
     components: {
@@ -131,6 +155,8 @@
       SubText,
       DotIcon,
       RCIcon,
+      ConversionTag,
+      TabText,
     },
     props: {
       tabsData: {
@@ -153,8 +179,8 @@
       }
     },
     methods: {
-      onTabClick({ id }) {
-        if (id === this.activeTab) {
+      onTabClick({ id, isDisabled }) {
+        if (id === this.activeTab || isDisabled) {
           return
         }
         this.$emit('on-tab-change', id)