@eturnity/eturnity_reusable_components 7.51.16-EPDM-10609.13 → 7.51.16-EPDM-13568.1

package/dist/main.es92.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "6",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu = { render };
+export {
+  context_menu as default,
+  render
+};

package/dist/main.es93.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "6",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu_tabs = { render };
+export {
+  context_menu_tabs as default,
+  render
+};

package/dist/main.es94.js

@@ -0,0 +1,24 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const copy = { render };
+export {
+  copy as default,
+  render
+};

package/dist/main.es95.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "10",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const cross = { render };
+export {
+  cross as default,
+  render
+};

package/dist/main.es96.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "14",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const current_variant = { render };
+export {
+  current_variant as default,
+  render
+};

package/dist/main.es97.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#fff",
+  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const dashboard = { render };
+export {
+  dashboard as default,
+  render
+};

package/dist/main.es98.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const data_transfer = { render };
+export {
+  data_transfer as default,
+  render
+};

package/dist/main.es99.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M15 13h2v14h-2z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const deadline = { render };
+export {
+  deadline as default,
+  render
+};

package/dist/style.css

@@ -0,0 +1 @@
+html,body{height:100%;margin:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-10609.13",
+  "version": "7.51.16-EPDM-13568.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/bell_alt.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 12.75C5.5 13.4404 6.17157 14 7 14C7.82843 14 8.5 13.4404 8.5 12.75H5.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8 0.559644 7.55228 -3.91405e-08 7 -8.74228e-08C6.44772 -1.35705e-07 6 0.559644 6 1.25L8 1.25Z" fill="white"/>
+<path d="M7 1C4.79086 1 3 2.64162 3 4.66667V6.55904C3 8.11545 2.54599 9.63806 1.69361 10.9403L1 12H13L12.3064 10.9403C11.454 9.63806 11 8.11545 11 6.55904V4.66667C11 2.64162 9.20914 1 7 1Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -11,7 +11,6 @@ const theme = {
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
-    blue2: '#6CD4D4',
     red: '#ff5656',
     blue1: '#e4efff',
     brightBlue: '#0068DE',

package/src/components/addNewButton/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageContainer :should-position="shouldPosition">
-    <ButtonContainer :data-id="dataId">
+    <ButtonContainer :data-id="dataId" :data-qa-id="dataQaId">
       <PlusButtonSvg />
     </ButtonContainer>
   </PageContainer>
@@ -57,6 +57,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

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

@@ -4,6 +4,7 @@
       :id="id"
       :custom-color="customColor"
       :data-id="dataId"
+      :data-qa-id="dataQaId"
       :font-color="fontColor"
       :height="height"
       :is-disabled="isDisabled"
@@ -164,6 +165,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

package/src/components/icon/index.vue

@@ -19,6 +19,9 @@
       :color="color"
       data-test-id="icon_striked_line"
     />
+    <CountWrapper v-if="count > 0" data-test-id="icon_count">
+      {{ counter }}
+    </CountWrapper>
   </Wrapper>
 </template>
 
@@ -34,7 +37,7 @@
   //   isStriked = "true"
   // />
 
-  import { onMounted, reactive, watch } from 'vue'
+  import { computed, onMounted, reactive, watch } from 'vue'
   import styled from 'vue3-styled-components'
   import { fetchIcon } from './iconCache.mjs'
 
@@ -69,6 +72,10 @@
       required: false,
       default: null,
     },
+    count: {
+      required: false,
+      default: 0,
+    },
     animation: {
       required: false,
       default: 'none',
@@ -92,6 +99,21 @@
     line-height: 0;
   `
 
+  const CountWrapper = styled('div')`
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    background-color: ${({ theme }) => theme.colors.red};
+    color: ${({ theme }) => theme.colors.white};
+    border-radius: 4px;
+    width: 15px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  `
+
   const StrikedLine = styled('div', { color: String })`
     display: flex;
     position: absolute;
@@ -145,6 +167,10 @@
     icon.html = await fetchIcon(props.name.toLowerCase())
   }
 
+  const counter = computed(() =>
+    props.count > 9 ? '9+' : props.count.toString()
+  )
+
   onMounted(() => loadSvg())
 
   watch(() => props.name, loadSvg)

package/src/components/iconWrapper/index.vue

@@ -4,6 +4,7 @@
     :border-radius="borderRadius"
     :color="iconColor"
     :data-id="dataId"
+    :data-qa-id="dataQaId"
     :disabled="disabled"
     :has-border="hasBorder"
     :hovered-background-color="hoveredBackgroundColor"
@@ -154,6 +155,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       isHovered: {
         required: false,
         default: false,

package/src/components/infoText/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageContainer ref="container" :type="type">
+  <PageContainer ref="container">
     <div
       ref="icon"
       data-test-id="infoText_trigger"
@@ -7,13 +7,7 @@
       @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
       @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
     >
-      <Dot
-        v-if="type === 'dot'"
-        :color="dotColor"
-        data-test-id="infoText_dot"
-      />
       <IconComponent
-        v-else
         :color="iconColor || computedIconColor"
         :cursor="isDisabled ? 'not-allowed' : 'pointer'"
         :disabled="isDisabled"
@@ -100,7 +94,7 @@
   `
 
   const PageContainer = styled('div')`
-    display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
+    display: inline-block;
     position: relative;
   `
 
@@ -114,20 +108,12 @@
     height: auto;
   `
 
-  const Dot = styled('div')`
-    width: 5px;
-    height: 5px;
-    background-color: ${(props) => props.color};
-    border-radius: 50%;
-  `
-
   export default {
     name: 'InfoText',
     components: {
       IconComponent,
       TextOverlay,
       Arrow,
-      Dot,
       PageContainer,
       TextWrapper,
       OverlayImage,
@@ -179,16 +165,6 @@
         default: false,
         required: false,
       },
-      dotColor: {
-        type: String,
-        required: false,
-        default: theme.colors.blue2,
-      },
-      type: {
-        type: String,
-        required: false,
-        default: 'info', // info, dot
-      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -378,6 +354,7 @@
       }
 
       const updatePosition = async () => {
+        console.log('updatePosition')
         if (!infoBox.value || !textContent.value) return
 
         // First make the content visible but hidden to get accurate measurements

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

@@ -13,6 +13,7 @@
       <InputCheckbox
         :checked="isChecked"
         :data-id="dataId"
+        :data-qa-id="dataQaId"
         type="checkbox"
         @change="onChangeHandler(!isChecked)"
       />
@@ -214,6 +215,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       cursorType: {
         type: String,
         default: 'pointer',

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

@@ -15,6 +15,7 @@
     <LabelWrapper v-if="labelText">
       <LabelText
         :data-id="labelDataId"
+        :data-test-id="labelDataTestId"
         :label-font-color="labelFontColor"
         :label-font-weight="labelFontWeight"
       >
@@ -40,6 +41,7 @@
         "
         :color-mode="colorMode"
         :data-id="inputDataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
@@ -647,6 +649,10 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+      },
       showSelect: {
         type: Boolean,
         default: false,

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

@@ -34,6 +34,7 @@
             :background-color="backgroundColor"
             :border-color="borderColor"
             :data-id="inputDataId"
+            :data-qa-id="dataQaId"
             data-test-id="input"
             :default-padding="defaultPadding"
             :disabled="disabled"
@@ -378,6 +379,11 @@
         default: '',
         type: String,
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       iconName: {
         required: false,
         default: null,

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

@@ -17,6 +17,7 @@
         <Radio
           :checked="selectedOption === item.value"
           :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :data-qa-id="dataQaId"
           :data-test-id="'radioInput_' + item.value"
           :disabled="item.disabled"
           :name="'radioButtons_' + radioName"
@@ -296,6 +297,11 @@
         required: false,
         type: String,
       },
+      dataQaId: {
+        type: String,
+        default: '',
+        required: false,
+      },
       colorMode: {
         default: '',
         required: false,

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

@@ -5,6 +5,7 @@
       <InputContainer
         ref="inputElement"
         :data-id="dataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :has-focus="hasFocus"
         :input-width="inputWidth"
@@ -128,6 +129,11 @@
         default: '',
         type: [String, Number],
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       iconPosition: {
         type: String,
         default: 'right',

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

@@ -13,6 +13,7 @@
       <LabelWrapper
         v-if="label"
         :data-id="labelDataId"
+        :data-qa-id="dataQaId + '_label'"
         :info-text-message="!!infoTextMessage || !!$slots.infoText"
       >
         <InputLabel
@@ -51,6 +52,7 @@
           class="select-button"
           :color-mode="colorMode"
           :data-id="dataId"
+          :data-qa-id="dataQaId"
           :disabled="disabled"
           :font-color="
             buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
@@ -135,7 +137,7 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Teleport to="body">
+          <Teleport to="#portal-target">
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
@@ -605,6 +607,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       hasSelectButtonPadding: {
         required: false,
         type: Boolean,

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

@@ -150,11 +150,12 @@
     computed: {},
     methods: {
       clickHandler(e) {
-        if (this.isDisabled || !!this.$attrs?.onClick) {
+        if (this.isDisabled) {
           // prevent emitter if the option is disabled
           return
+        } else {
+          this.$parent.$emit('option-selected', this.value, e)
         }
-        this.$parent.$emit('option-selected', this.value, e)
       },
       hoverHandler() {
         this.$parent.$emit('option-hovered', this.value)

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

@@ -18,6 +18,7 @@
       >
         <textarea
           :data-id="inputDataId"
+          :data-qa-id="dataQaId"
           :disabled="isDisabled"
           :placeholder="placeholder"
           :resize="resize"
@@ -185,6 +186,11 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     methods: {
       onChangeHandler($event) {

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

@@ -2,6 +2,7 @@
   <Container>
     <FlexWrapper
       :data-id="dataId"
+      :data-qa-id="dataQaId"
       data-test-id="page_wrapper"
       :disabled="disabled"
       :size="size"
@@ -304,6 +305,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
     methods: {
       onToggleChange() {

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

@@ -2,10 +2,9 @@
   <PageWrapper
     :backdrop="backdrop"
     :class="{ visible: isOpen, hidden: !isOpen }"
-    :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
+    <ModalContainer v-if="isOpen" :overflow="overflowRule" @click="onClickModalContainer">
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer :visible="!isLoading">
         <slot></slot>
@@ -35,7 +34,7 @@
     visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
   `
 
-  const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
+  const pageAttrs = { backdrop: String, position: String }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/rangeSlider/Slider.vue

@@ -2,6 +2,7 @@
   <div
     :class="className"
     :data-id="dataId"
+    :data-qa-id="dataQaId"
     :style="style"
     @mousedown="elementMouseDown"
     @touchstart="elementTouchDown"
@@ -64,6 +65,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       className: {
         type: String,
         default: 'vdr',