@eturnity/eturnity_reusable_components 8.13.13-qa-16-03-26.1 → 8.13.13-qa-16-03-26.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.13-qa-16-03-26.1",
+  "version": "8.13.13-qa-16-03-26.3",
   "files": [
     "dist",
     "src"

package/src/components/barchart/index.vue

@@ -48,6 +48,9 @@
           :is-scrollable="isScrollable"
           :total-bars="normalizedData.length"
         >
+          <LoadingOverlay v-if="isLoading">
+            <Spinner size="60px" />
+          </LoadingOverlay>
           <SelectionBox
             v-if="selectionSize && isSelectionEnabled"
             :bar-width="barWidth"
@@ -173,6 +176,7 @@
   import ChartControls from './ChartControls'
   import BottomFields from './BottomFields'
   import SelectionBox from './SelectionBox'
+  import Spinner from '../spinner'
 
   import {
     useTooltip,
@@ -205,6 +209,7 @@
     TooltipRow,
     TooltipGradientBox,
     ChartControlsWrapper,
+    LoadingOverlay,
   } from './styles/chart'
 
   const props = defineProps({
@@ -287,6 +292,10 @@
       default: 'absolute',
       validator: (value) => ['absolute', 'percentage'].includes(value),
     },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const generateChartId = () =>

package/src/components/barchart/styles/chart.js

@@ -257,3 +257,16 @@ export const BottomFieldsContainer = styled.div`
   margin-top: 16px;
   width: 100%;
 `
+
+export const LoadingOverlay = styled('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+`

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

@@ -21,6 +21,7 @@
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
           "
+          :disable-hover="disableIconHover"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -231,6 +232,10 @@
         default: false,
         type: Boolean,
       },
+      disableIconHover: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

package/src/components/icon/index.vue

@@ -10,6 +10,7 @@
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
+      :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
@@ -97,6 +98,10 @@
       default: 'fill',
       type: String,
     },
+    disableHover: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const Wrapper = styled('div', {
@@ -152,6 +157,7 @@
     hoveredColor: String,
     animation: String,
     fillType: String,
+    disableHover: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -168,12 +174,17 @@
       ${({ theme, color, fillType }) =>
         color && `${fillType}: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
-      ${(props) => `${props.fillType}: ${props.hoveredColor || props.color};`}
+    ${(props) =>
+      !props.disableHover &&
+      `
+     &:hover svg path:not(.fix) {
+      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
     }
     &:hover + div {
-      background-color: ${(props) => props.hoveredColor};
+      background-color: ${props.hoveredColor};
     }
+    `}
+
     @keyframes fade {
       50% {
         opacity: 0.3;

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

@@ -1,6 +1,10 @@
 <template>
   <Container :input-width="inputWidth">
-    <InputWrapper :icon-color="iconColor" :icon-position="iconPosition">
+    <InputWrapper
+      :icon-color="iconColor"
+      :icon-position="iconPosition"
+      :is-full-height="isFullHeight"
+    >
       <SearchIconSvg class="search-icn" />
       <InputContainer
         ref="inputElement"
@@ -11,6 +15,7 @@
         :input-width="inputWidth"
         :is-disabled="disabled"
         :is-filter="isFilter"
+        :is-full-height="isFullHeight"
         :placeholder="placeholder"
         :value="value"
         @input="onChangeHandler($event)"
@@ -41,6 +46,7 @@
     isDisabled: Boolean,
     inputWidth: String,
     isFilter: Boolean,
+    isFullHeight: Boolean,
   }
   const Container = styled('div', inputAttrs)`
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
@@ -55,6 +61,7 @@
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
     box-sizing: border-box;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
     background: ${(props) => props.theme.colors.white} !important;
@@ -67,9 +74,14 @@
     }
   `
 
-  const wrapperAttrs = { iconColor: String, iconPosition: String }
+  const wrapperAttrs = {
+    iconColor: String,
+    iconPosition: String,
+    isFullHeight: Boolean,
+  }
   const InputWrapper = styled('div', wrapperAttrs)`
     position: relative;
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
 
     svg {
       position: absolute;
@@ -142,6 +154,10 @@
         type: String,
         default: 'black',
       },
+      isFullHeight: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['on-change'],
     watch: {