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

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.0",
   "files": [
     "dist",
     "src"

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/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/select/index.vue

@@ -135,7 +135,7 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Teleport to="body">
+          <Teleport to="#portal-target">
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"

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/sideMenu/index.vue

@@ -9,12 +9,10 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
-          :is-active="activeTab === item.key || activeParentTab === item.key"
+          :is-active="activeTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <IconContainer
-            :is-active="activeTab === item.key || activeParentTab === item.key"
-          >
+          <IconContainer :is-active="activeTab === item.key">
             <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
           </IconContainer>
           <ListText>{{ $gettext(item.label) }}</ListText>

package/src/components/spinner/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
+  <SpinnerContainer
+    v-if="fullWidth"
+    data-test-id="spinner_full_container"
+    :size="size"
+  >
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
-        <SpinnerSvg
-          :class="{ white: isWhite }"
-          data-test-id="spinner_full_icon"
-          :style="{ width: size, height: size }"
-        />
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
+        <SpinnerCircle :is-white="isWhite" :size="size" />
       </SpinnerWrapper>
     </Container>
   </SpinnerContainer>
@@ -15,21 +15,14 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
-      <SpinnerSvg
-        :class="{ white: isWhite }"
-        data-test-id="spinner_icon"
-        :style="{ width: size, height: size }"
-      />
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
+      <SpinnerCircle :is-white="isWhite" :size="size" />
     </SpinnerWrapper>
   </Container>
 </template>
 
 <script>
-  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
-  // <spinner size="30px" />
   import styled from 'vue3-styled-components'
-  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
 
   const SpinnerContainer = styled.div`
     position: fixed;
@@ -43,35 +36,72 @@
     justify-items: center;
     z-index: 100;
   `
+
   const containerAttrs = { limitedToModal: Boolean }
   const Container = styled('div', containerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
   `
 
-  const SpinnerWrapper = styled.div`
-    width: ${(props) => (props.size ? props.size : '60px')};
-    height: auto;
+  const wrapperAttrs = { size: String }
+  const SpinnerWrapper = styled('div', wrapperAttrs)`
+    width: ${(props) =>
+      props.size === 'large'
+        ? '56px'
+        : props.size === 'medium'
+        ? '40px'
+        : '24px'};
+    height: ${(props) =>
+      props.size === 'large'
+        ? '56px'
+        : props.size === 'medium'
+        ? '40px'
+        : '24px'};
+  `
+
+  const circleAttrs = { size: String, isWhite: Boolean }
+  const SpinnerCircle = styled('div', circleAttrs)`
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    border: ${(props) => (props.size === 'large' ? '4px' : '2px')} solid
+      ${(props) =>
+        props.isWhite ? props.theme.colors.grey5 : props.theme.colors.white};
+    border-top-color: ${(props) =>
+      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+    border-right-color: ${(props) =>
+      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+    border-bottom-color: ${(props) =>
+      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+    animation: spin 1s linear infinite;
+    transform: rotate(90deg);
 
-    .white {
-      filter: brightness(0) invert(1);
+    @keyframes spin {
+      to {
+        transform: rotate(450deg);
+      }
     }
   `
 
   export default {
-    name: 'SpinnerComponent',
+    name: 'NewSpinner',
     components: {
+      SpinnerContainer,
+      SpinnerCircle,
       Container,
       SpinnerWrapper,
-      SpinnerContainer,
-      SpinnerSvg,
     },
     props: {
-      fullWidth: {
+      size: {
+        type: String,
+        default: 'medium',
+        validator: (value) => ['small', 'medium', 'large'].includes(value),
+      },
+      isWhite: {
         required: false,
         default: false,
         type: Boolean,
@@ -81,12 +111,7 @@
         default: false,
         type: Boolean,
       },
-      size: {
-        required: false,
-        default: '60px',
-        type: String,
-      },
-      isWhite: {
+      fullWidth: {
         required: false,
         default: false,
         type: Boolean,

package/src/components/tableDropdown/index.vue

@@ -119,7 +119,7 @@
                 @on-change="onSearch($event)"
               />
             </SearchContainer>
-            <Spinner v-if="optionsLoading" />
+            <Spinner v-if="optionsLoading" size="small" />
             <EmptyText v-else-if="!optionsLoading && !optionItems.length">
               {{ emptyText ? emptyText : $gettext('No components found.') }}
             </EmptyText>

package/src/assets/svgIcons/plus_button.svg

@@ -1,4 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
-<path d="M10 0H12V22H10V0Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/star.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9.46199L9.708 11.7L8.724 7.48199L12 4.64399L7.686 4.27799L6 0.299988L4.314 4.27799L0 4.64399L3.276 7.48199L2.292 11.7L6 9.46199Z" fill="#FDB813"/>
-</svg>

package/src/components/infoText/constants.js

@@ -1,4 +0,0 @@
-export const TEXT_OVERLAY_TOP_OFFSET = 35
-export const TEXT_OVERLAY_LEFT_OFFSET = 3
-export const TEXT_OVERLAY_ARROW_LEFT_OFFSET = 62
-export const TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET = 68

package/src/components/infoText/infoText.spec.js

@@ -1,62 +0,0 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import InfoText from '@/components/infoText'
-import theme from '@/assets/theme'
-
-jest.mock('@/components/icon/iconCache.mjs', () => ({
-  // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('close_for_modals,_tool_tips.svg')),
-}))
-
-describe('InfoText Component', () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(InfoText, {
-      props: {
-        text: 'default text',
-        size: '14px',
-        infoPosition: 'bottom',
-        alignArrow: 'center',
-        openTrigger: 'onHover',
-        width: '165px',
-        maxWidth: '165px',
-        shouldUseTeleport: false,
-        dotColor: '#00009f',
-        type: 'info',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-  })
-
-  test('renders InfoText component with default props', () => {
-    expect(wrapper.find('[data-test-id="infoText_info"]').exists()).toBe(true)
-    expect(wrapper.vm.text).toContain('default text')
-    expect(wrapper.vm.size).toContain('14px')
-    expect(wrapper.vm.infoPosition).toContain('bottom')
-    expect(wrapper.vm.alignArrow).toContain('center')
-  })
-
-  test('openTrigger prop is set to onClick', async () => {
-    await wrapper.setProps({ openTrigger: 'onClick' })
-
-    //should not see text upon hover
-    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
-      false
-    )
-    //should see text upon click
-    await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
-    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
-      true
-    )
-  })
-
-  test('position type is dot', async () => {
-    await wrapper.setProps({ type: 'dot' })
-    expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
-  })
-})

package/src/components/infoText/infoText.stories.js

@@ -1,48 +0,0 @@
-import InfoText from './index.vue'
-
-export default {
-  title: 'infoText',
-  component: InfoText,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-}
-
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-//To use:
-// <info-text
-//     text="Veritatis et quasi architecto beatae vitae"
-//     size="20px"
-//     alignArrow="right" // which side the arrow should be on
-// />
-
-export const Default = {
-  args: {
-    text: 'default text',
-    size: '14px',
-    infoPosition: 'bottom',
-    alignArrow: 'center',
-    openTrigger: 'onHover',
-    width: '165px',
-    maxWidth: '165px',
-    shouldUseTeleport: false,
-    dotColor: '#00009f',
-    type: 'info',
-  },
-}
-
-export const Dot = {
-  args: {
-    ...Default.args,
-    type: 'dot',
-  },
-}
-
-//will only show the info text on click
-export const OnClick = {
-  args: {
-    ...Default.args,
-    openTrigger: 'onClick',
-  },
-}