@eturnity/eturnity_reusable_components 8.13.13-EPDM-12459.0 → 8.13.13-EPDM-11600.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.13-EPDM-12459.0",
+  "version": "8.13.13-EPDM-11600.5",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/erase.svg

@@ -1,4 +1,3 @@
-<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" r="7"></circle>
-<path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.4389 3.06113C14.3574 -1.02038 7.64263 -1.02038 3.56113 3.06113C-0.520376 7.14263 -0.520376 13.8574 3.56113 17.9389C7.64263 22.0204 14.3574 22.0204 18.4389 17.9389C22.5204 13.8574 22.5204 7.2743 18.4389 3.06113ZM16.464 14.2524L14.6207 16.0956L10.9342 12.4091L7.24765 16.0956L5.40439 14.2524L9.09091 10.5658L5.40439 6.87931L7.24765 5.03605L10.9342 8.72257L14.6207 5.03605L16.464 6.87931L12.7774 10.5658L16.464 14.2524Z" fill="#FF5656"/>
 </svg>

package/src/components/infoCard/index.vue

@@ -123,7 +123,11 @@
         return this.type === 'error_minor'
       },
       iconName() {
-        return this.type === 'warning' ? 'warning_triangle' : 'info'
+        return this.type === 'warning'
+          ? 'warning_triangle'
+          : this.isErrorMinor
+          ? 'erase'
+          : 'info'
       },
       presetStyles() {
         // the types that doesn't have explicit border anyway have it transparent
@@ -142,8 +146,8 @@
           stylesCollection.iconColor = theme.semanticColors.teal[800]
         } else if (this.isErrorMinor) {
           stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.pureRed
-          stylesCollection.iconColor = theme.colors.pureRed
+          stylesCollection.borderColor = theme.colors.grey4
+          stylesCollection.iconColor = theme.colors.red
         } else {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -3,15 +3,15 @@ import InputNumber from './index.vue'
 export default {
   title: 'InputNumber',
   component: InputNumber,
-  // argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { InputNumber },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-number v-bind="$props" />',
+  setup() {
+    return { args: args }
+  },
+  template: `<InputNumber v-bind="args" />`,
 
   // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
   // How to use:
@@ -73,6 +73,20 @@ Disabled.args = {
   showLinearUnitName: false,
 }
 
+export const DisabledAndPreDefined = Template.bind({})
+DisabledAndPreDefined.args = {
+  placeholder: 'Enter Value',
+  disabled: true,
+  isPreDefined: true,
+  value: '',
+  inputWidth: '200px',
+  isError: false,
+  numberPrecision: 0,
+  noBorder: false,
+  textAlign: 'left',
+  showLinearUnitName: false,
+}
+
 export const LinearUnit = Template.bind({})
 LinearUnit.args = {
   placeholder: 'Enter Value',

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

@@ -43,7 +43,6 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
@@ -53,6 +52,7 @@
         :is-disabled="disabled"
         :is-error="isError"
         :is-interactive="isInteractive"
+        :is-pre-defined="isPreDefined"
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
@@ -133,7 +133,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -195,6 +195,7 @@
     slotSize: String,
     inputHeight: String,
     isInteractive: Boolean,
+    isPreDefined: Boolean,
     alignItems: String,
     labelFontColor: String,
     labelFontWeight: String,
@@ -255,7 +256,7 @@
     color: ${(props) =>
       props.isError
         ? props.theme.colors.grey6
-        : props.isDisabled
+        : props.isDisabled && !props.isPreDefined
         ? props.colorMode === 'transparent'
           ? props.theme.colors.white
           : props.theme.colors.grey2
@@ -529,6 +530,11 @@
         required: false,
         default: 0,
       },
+      isPreDefined: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       minDecimals: {
         type: Number,
         required: false,
@@ -649,12 +655,18 @@
         required: false,
         default: '',
       },
+      labelDataTestId: {
+        type: String,
+        required: false,
+        default: '',
+      },
       inputDataId: {
         type: String,
         required: false,
         default: '',
       },
       dataQaId: {
+        type: String,
         required: false,
         default: '',
       },

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

@@ -109,7 +109,11 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" :color-mode="colorMode">
+          <Caret
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -138,11 +142,12 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                colorMode == 'dark' || colorMode == 'transparent'
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
-              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -162,17 +167,10 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
-              :is-fixed-dropdown-position="isFixedDropdownPosition"
-              :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
-              :style="{
-                transform: `translate(${dropdownPosition?.left}px, ${
-                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
-                })`,
-              }"
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
@@ -210,7 +208,7 @@
   //     </template>
   // </Select>
 
-  import { Teleport, inject } from 'vue'
+  import { Teleport } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import Icon from '../../icon'
@@ -394,17 +392,14 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
-    isParentModal: Boolean,
-    isFixedDropdownPosition: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
-    z-index: ${(props) =>
-      props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
-    position: ${(props) =>
-      props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
-    top: 0px;
-    left: 0px;
+    z-index: ${(props) => (props.isActive ? '2' : '99999')};
+    position: absolute;
+    top: ${(props) =>
+      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+    left: ${(props) => props.dropdownPosition?.left}px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -652,11 +647,6 @@
         type: String,
         required: false,
       },
-      isFixedDropdownPosition: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
     },
 
     data() {
@@ -674,17 +664,6 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
-        isDisplayedAtBottom: true,
-        selectTopPosition: 0,
-        selectAndDropdownDistance: 0,
-        animationFrameId: null,
-      }
-    },
-    setup() {
-      const modalRef = inject('modalRef')
-
-      return {
-        modalRef,
       }
     },
     computed: {
@@ -742,9 +721,6 @@
           /windows phone/i.test(userAgent)
         )
       },
-      isParentModal() {
-        return !!this.modalRef
-      },
     },
     watch: {
       value(val) {
@@ -758,13 +734,8 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
-          if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
-          if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId)
-            this.animationFrameId = null
-          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -777,30 +748,11 @@
           })
         }
       },
-      isSelectDropdownShown(isShown) {
-        if (!isShown) return
-        // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
-        // before getting the distance between the select and the dropdown menu
-        setTimeout(() => {
-          this.getDistanceBetweenSelectAndDropdownMenu()
-        }, 100)
-      },
-      selectTopPosition() {
-        this.dropdownPosition.top =
-          this.selectTopPosition +
-          this.$refs.select.$el.clientHeight +
-          this.selectAndDropdownDistance
-      },
     },
     mounted() {
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
-      if (!this.isFixedDropdownPosition)
-        document.body.addEventListener(
-          'scroll',
-          this.calculateSelectTopPosition
-        )
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -809,12 +761,6 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
-      if (!this.isFixedDropdownPosition) {
-        document.body.removeEventListener(
-          'scroll',
-          this.calculateSelectTopPosition
-        )
-      }
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -920,11 +866,11 @@
           return
         }
         await this.$nextTick()
-        this.isDisplayedAtBottom = await this.generateDropdownPosition()
+        const isDisplayedAtBottom = await this.generateDropdownPosition()
         // If the dropdown menu is going to be displayed at the bottom,
         // we need reverify its position after a dom update (nextTick)
         await this.$nextTick()
-        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
+        if (isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -1017,25 +963,6 @@
           }
         }
       },
-      getDistanceBetweenSelectAndDropdownMenu() {
-        const wholeSelectTopPosition =
-          this.selectTopPosition + this.$refs.select.$el.clientHeight
-        this.selectAndDropdownDistance =
-          this.dropdownPosition.top - wholeSelectTopPosition
-      },
-      calculateSelectTopPosition() {
-        const selectRef = this.$refs.select
-        if (selectRef) {
-          const currentTopPosition =
-            selectRef.$el.getBoundingClientRect().top + window.scrollY
-          if (this.selectTopPosition !== currentTopPosition) {
-            this.selectTopPosition = currentTopPosition
-          }
-        }
-        this.animationFrameId = requestAnimationFrame(
-          this.calculateSelectTopPosition
-        )
-      },
     },
   }
 </script>

package/src/components/modals/modal/index.vue

@@ -1,11 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
-<<<<<<< HEAD
-    ref="modalRef"
-=======
     :add-padding-top="addPaddingTop"
->>>>>>> master
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -40,7 +36,6 @@
   //   <div>Data....</div>
   // </modal>
 
-  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -63,14 +58,14 @@
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
       : 'rgba(255, 255, 255, 0.9)'};
-  z-index: 9999999;
+  z-index: 99999;
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-    @media (max-width: 425px) {
-      background: white;
-    }
-  `
+  @media (max-width: 425px) {
+    background: white;
+  }
+`
 
   const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -168,14 +163,6 @@
         default: false,
       },
     },
-    setup() {
-      const modalRef = ref(null)
-      provide('modalRef', modalRef)
-
-      return {
-        modalRef,
-      }
-    },
     watch: {
       isOpen: {
         immediate: true,

package/src/components/pageSubtitle/index.vue

@@ -5,7 +5,8 @@
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >
-    <span data-test-id="page_subtitle_text">
+    <span v-if="containsHtml" data-test-id="page_subtitle_text" v-html="text"></span>
+    <span v-else data-test-id="page_subtitle_text">
       {{ text }}
     </span>
     <InfoText
@@ -58,6 +59,11 @@
         required: true,
         type: String,
       },
+      containsHtml: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
       color: {
         required: false,
         type: String,