@eturnity/eturnity_reusable_components 8.22.23-EPDM-15709.0 → 8.22.23-EPDM-13618.0

package/src/components/infoText/placeholder.vue

@@ -1,225 +1,225 @@
-<template>
-  <ComponentWrapper>
-    <IconWrapper :size="size">
-      <IconImg
-        ref="iconImg"
-        @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-      >
-        <IconComponent
-          :color="iconColor"
-          cursor="pointer"
-          name="info"
-          :size="size"
-        />
-      </IconImg>
-      <TextOverlay
-        v-if="showInfo"
-        :arrow-position="arrowPosition"
-        :icon-size="size"
-        :max-width="maxWidth"
-        :position="overlayPosition"
-        :style="overlayStyle"
-        :width="width"
-        ><slot></slot>
-        <span v-html="text"></span>
-      </TextOverlay>
-    </IconWrapper>
-  </ComponentWrapper>
-</template>
-
-<script>
-  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-  //To use:
-  // <info-text
-  //     text="Veritatis et quasi architecto beatae vitae"
-  //     size="20px"
-  // />
-  import theme from '../../assets/theme.js'
-  import styled from 'vue3-styled-components'
-  import IconComponent from '../icon'
-
-  const textAttrs = {
-    iconSize: String,
-    width: String,
-    position: String,
-    arrowPosition: String,
-  }
-  const TextOverlay = styled('div', textAttrs)`
-    position: absolute;
-    text-align: left;
-    background: ${(props) => props.theme.colors.black};
-    padding: 10px;
-    width: ${(props) => props.width};
-    max-width: ${(props) => props.maxWidth};
-    font-size: 13px;
-    font-weight: 400;
-    line-height: normal;
-    border-radius: 4px;
-    z-index: 9999;
-    color: ${(props) => props.theme.colors.white};
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-
-    :before {
-      content: '';
-      background-color: ${(props) => props.theme.colors.black};
-      position: absolute;
-      ${(props) => (props.position === 'top' ? 'bottom: -4px;' : 'top: -4px;')}
-      ${(props) => {
-        switch (props.arrowPosition) {
-          case 'left':
-            return 'left: 40px;'
-          case 'center':
-            return 'left: calc(50% - 4px);'
-          case 'right':
-            return 'right: 40px;'
-          default:
-            return 'left: calc(50% - 4px);'
-        }
-      }}
-      height: 8px;
-      width: 8px;
-      transform-origin: center center;
-      transform: rotate(45deg);
-    }
-
-    span a {
-      color: #2cc0eb;
-    }
-  `
-
-  const iconAttrs = { size: String }
-  const IconWrapper = styled('div', iconAttrs)`
-    position: relative;
-    height: ${(props) => props.size};
-  `
-
-  const IconImg = styled.div`
-    line-height: 0;
-  `
-
-  const ComponentWrapper = styled.div`
-    display: inline-block;
-  `
-
-  export default {
-    name: 'InfoText',
-    components: {
-      IconWrapper,
-      TextOverlay,
-      ComponentWrapper,
-      IconImg,
-      IconComponent,
-    },
-    props: {
-      text: {
-        required: false,
-      },
-      size: {
-        required: false,
-        default: '14px',
-      },
-      openTrigger: {
-        required: false,
-        default: 'onHover', // onHover, onClick
-      },
-      width: {
-        required: false,
-        default: '200px',
-      },
-      maxWidth: {
-        type: String,
-        default: '400px',
-      },
-    },
-    data() {
-      return {
-        showInfo: false,
-        overlayStyle: {},
-        overlayPosition: 'top',
-        arrowPosition: 'center',
-      }
-    },
-    computed: {
-      iconColor() {
-        return theme.colors.mediumGray
-      },
-    },
-    mounted() {
-      window.addEventListener('resize', this.positionOverlay)
-    },
-    beforeUnmount() {
-      window.removeEventListener('resize', this.positionOverlay)
-    },
-    methods: {
-      toggleShowInfo() {
-        this.showInfo = !this.showInfo
-
-        if (this.showInfo) {
-          document.addEventListener('click', this.clickOutside)
-          this.$nextTick(() => {
-            this.positionOverlay()
-          })
-        } else {
-          document.removeEventListener('click', this.clickOutside)
-        }
-      },
-      clickOutside(event) {
-        if (this.$el.contains(event.target)) {
-          return
-        }
-        this.toggleShowInfo()
-      },
-      positionOverlay() {
-        const iconRect = this.$refs.iconImg.getBoundingClientRect()
-        const overlayRect = this.$el
-          .querySelector('.TextOverlay')
-          .getBoundingClientRect()
-
-        let top, left
-
-        // Check if there's enough space above the icon
-        if (
-          iconRect.top > overlayRect.height + 10 &&
-          iconRect.top > window.innerHeight / 2
-        ) {
-          top = -overlayRect.height - 10
-          this.overlayPosition = 'top'
-        } else {
-          // If not, position it below the icon
-          top = iconRect.height + 10
-          this.overlayPosition = 'bottom'
-        }
-
-        left = -(overlayRect.width / 2) + iconRect.width / 2
-
-        // Ensure the overlay doesn't go off-screen horizontally
-        if (iconRect.left + left < 0) {
-          left = -iconRect.left
-          this.arrowPosition = 'left'
-        } else if (
-          iconRect.left + left + overlayRect.width >
-          window.innerWidth
-        ) {
-          left = window.innerWidth - (iconRect.left + overlayRect.width)
-          this.arrowPosition = 'right'
-        } else {
-          this.arrowPosition = 'center'
-        }
-
-        // Adjust vertical position if it goes off-screen
-        const totalHeight = iconRect.top + top + overlayRect.height
-        if (totalHeight > window.innerHeight) {
-          top -= totalHeight - window.innerHeight + 10
-        }
-
-        this.overlayStyle = {
-          top: `${top}px`,
-          left: `${left}px`,
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <ComponentWrapper>
+    <IconWrapper :size="size">
+      <IconImg
+        ref="iconImg"
+        @click.prevent="toggleShowInfo()"
+        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+      >
+        <IconComponent
+          :color="iconColor"
+          cursor="pointer"
+          name="info"
+          :size="size"
+        />
+      </IconImg>
+      <TextOverlay
+        v-if="showInfo"
+        :arrow-position="arrowPosition"
+        :icon-size="size"
+        :max-width="maxWidth"
+        :position="overlayPosition"
+        :style="overlayStyle"
+        :width="width"
+        ><slot></slot>
+        <span v-html="text"></span>
+      </TextOverlay>
+    </IconWrapper>
+  </ComponentWrapper>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  //To use:
+  // <info-text
+  //     text="Veritatis et quasi architecto beatae vitae"
+  //     size="20px"
+  // />
+  import theme from '../../assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import IconComponent from '../icon'
+
+  const textAttrs = {
+    iconSize: String,
+    width: String,
+    position: String,
+    arrowPosition: String,
+  }
+  const TextOverlay = styled('div', textAttrs)`
+    position: absolute;
+    text-align: left;
+    background: ${(props) => props.theme.colors.black};
+    padding: 10px;
+    width: ${(props) => props.width};
+    max-width: ${(props) => props.maxWidth};
+    font-size: 13px;
+    font-weight: 400;
+    line-height: normal;
+    border-radius: 4px;
+    z-index: 9999;
+    color: ${(props) => props.theme.colors.white};
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+
+    :before {
+      content: '';
+      background-color: ${(props) => props.theme.colors.black};
+      position: absolute;
+      ${(props) => (props.position === 'top' ? 'bottom: -4px;' : 'top: -4px;')}
+      ${(props) => {
+        switch (props.arrowPosition) {
+          case 'left':
+            return 'left: 40px;'
+          case 'center':
+            return 'left: calc(50% - 4px);'
+          case 'right':
+            return 'right: 40px;'
+          default:
+            return 'left: calc(50% - 4px);'
+        }
+      }}
+      height: 8px;
+      width: 8px;
+      transform-origin: center center;
+      transform: rotate(45deg);
+    }
+
+    span a {
+      color: #2cc0eb;
+    }
+  `
+
+  const iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
+    position: relative;
+    height: ${(props) => props.size};
+  `
+
+  const IconImg = styled.div`
+    line-height: 0;
+  `
+
+  const ComponentWrapper = styled.div`
+    display: inline-block;
+  `
+
+  export default {
+    name: 'InfoText',
+    components: {
+      IconWrapper,
+      TextOverlay,
+      ComponentWrapper,
+      IconImg,
+      IconComponent,
+    },
+    props: {
+      text: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: '14px',
+      },
+      openTrigger: {
+        required: false,
+        default: 'onHover', // onHover, onClick
+      },
+      width: {
+        required: false,
+        default: '200px',
+      },
+      maxWidth: {
+        type: String,
+        default: '400px',
+      },
+    },
+    data() {
+      return {
+        showInfo: false,
+        overlayStyle: {},
+        overlayPosition: 'top',
+        arrowPosition: 'center',
+      }
+    },
+    computed: {
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+    },
+    mounted() {
+      window.addEventListener('resize', this.positionOverlay)
+    },
+    beforeUnmount() {
+      window.removeEventListener('resize', this.positionOverlay)
+    },
+    methods: {
+      toggleShowInfo() {
+        this.showInfo = !this.showInfo
+
+        if (this.showInfo) {
+          document.addEventListener('click', this.clickOutside)
+          this.$nextTick(() => {
+            this.positionOverlay()
+          })
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+        }
+      },
+      clickOutside(event) {
+        if (this.$el.contains(event.target)) {
+          return
+        }
+        this.toggleShowInfo()
+      },
+      positionOverlay() {
+        const iconRect = this.$refs.iconImg.getBoundingClientRect()
+        const overlayRect = this.$el
+          .querySelector('.TextOverlay')
+          .getBoundingClientRect()
+
+        let top, left
+
+        // Check if there's enough space above the icon
+        if (
+          iconRect.top > overlayRect.height + 10 &&
+          iconRect.top > window.innerHeight / 2
+        ) {
+          top = -overlayRect.height - 10
+          this.overlayPosition = 'top'
+        } else {
+          // If not, position it below the icon
+          top = iconRect.height + 10
+          this.overlayPosition = 'bottom'
+        }
+
+        left = -(overlayRect.width / 2) + iconRect.width / 2
+
+        // Ensure the overlay doesn't go off-screen horizontally
+        if (iconRect.left + left < 0) {
+          left = -iconRect.left
+          this.arrowPosition = 'left'
+        } else if (
+          iconRect.left + left + overlayRect.width >
+          window.innerWidth
+        ) {
+          left = window.innerWidth - (iconRect.left + overlayRect.width)
+          this.arrowPosition = 'right'
+        } else {
+          this.arrowPosition = 'center'
+        }
+
+        // Adjust vertical position if it goes off-screen
+        const totalHeight = iconRect.top + top + overlayRect.height
+        if (totalHeight > window.innerHeight) {
+          top -= totalHeight - window.innerHeight + 10
+        }
+
+        this.overlayStyle = {
+          top: `${top}px`,
+          left: `${left}px`,
+        }
+      },
+    },
+  }
+</script>

package/src/components/infoText/templates/iconTextContent.vue

@@ -1,105 +1,105 @@
-<template>
-  <Container data-test-id="iconTextContent_container">
-    <RCIcon
-      :color="iconColor"
-      data-test-id="iconTextContent_icon"
-      :name="iconName"
-      :size="iconSize"
-    />
-    <TextWrapper
-      data-test-id="iconTextContent_text"
-      :font-color="fontColor"
-      :font-size="fontSize"
-    >
-      {{ text }}
-      <slot data-test-id="iconTextContent_slot"></slot>
-    </TextWrapper>
-  </Container>
-</template>
-
-<script>
-  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-  // import IconTextContent from "@eturnity/eturnity_reusable_components/src/components/infoText/templates/iconTextContent"
-  //To use:
-  // <InfoText
-  //      icon-color="red"
-  //      icon-name="error"
-  //      size="20px"
-  //      open-trigger="onClick"
-  // >
-  //   <IconTextContent
-  //     icon-name="error"
-  //     text="Text"
-  //     icon-size="18px"
-  //     icon-color="red"
-  //   />
-  // </InfoText>
-
-  import styled from 'vue3-styled-components'
-  import theme from '../../../assets/theme.js'
-  import RCIcon from '../../icon'
-
-  const Container = styled('div')`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 8px;
-  `
-
-  const TextAttrs = {
-    fontSize: String,
-    fontColor: String,
-  }
-  const TextWrapper = styled('div', TextAttrs)`
-    font-size: ${(props) => props.fontSize};
-    color: ${(props) => props.fontColor};
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    font-weight: 400;
-    line-height: 150%;
-    letter-spacing: 0%;
-    vertical-align: middle;
-  `
-
-  export default {
-    name: 'IconTextContent',
-    components: {
-      Container,
-      TextWrapper,
-      RCIcon,
-    },
-    props: {
-      iconName: {
-        type: String,
-        required: true,
-      },
-      text: {
-        type: String,
-        required: true,
-      },
-      iconSize: {
-        type: String,
-        required: false,
-        default: '18px',
-      },
-      iconColor: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      fontSize: {
-        type: String,
-        required: false,
-        default: '11px',
-      },
-      fontColor: {
-        type: String,
-        required: false,
-        default: theme.colors.white,
-      },
-    },
-  }
-</script>
+<template>
+  <Container data-test-id="iconTextContent_container">
+    <RCIcon
+      :color="iconColor"
+      data-test-id="iconTextContent_icon"
+      :name="iconName"
+      :size="iconSize"
+    />
+    <TextWrapper
+      data-test-id="iconTextContent_text"
+      :font-color="fontColor"
+      :font-size="fontSize"
+    >
+      {{ text }}
+      <slot data-test-id="iconTextContent_slot"></slot>
+    </TextWrapper>
+  </Container>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  // import IconTextContent from "@eturnity/eturnity_reusable_components/src/components/infoText/templates/iconTextContent"
+  //To use:
+  // <InfoText
+  //      icon-color="red"
+  //      icon-name="error"
+  //      size="20px"
+  //      open-trigger="onClick"
+  // >
+  //   <IconTextContent
+  //     icon-name="error"
+  //     text="Text"
+  //     icon-size="18px"
+  //     icon-color="red"
+  //   />
+  // </InfoText>
+
+  import styled from 'vue3-styled-components'
+  import theme from '../../../assets/theme.js'
+  import RCIcon from '../../icon'
+
+  const Container = styled('div')`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+  `
+
+  const TextAttrs = {
+    fontSize: String,
+    fontColor: String,
+  }
+  const TextWrapper = styled('div', TextAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) => props.fontColor};
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    font-weight: 400;
+    line-height: 150%;
+    letter-spacing: 0%;
+    vertical-align: middle;
+  `
+
+  export default {
+    name: 'IconTextContent',
+    components: {
+      Container,
+      TextWrapper,
+      RCIcon,
+    },
+    props: {
+      iconName: {
+        type: String,
+        required: true,
+      },
+      text: {
+        type: String,
+        required: true,
+      },
+      iconSize: {
+        type: String,
+        required: false,
+        default: '18px',
+      },
+      iconColor: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      fontSize: {
+        type: String,
+        required: false,
+        default: '11px',
+      },
+      fontColor: {
+        type: String,
+        required: false,
+        default: theme.colors.white,
+      },
+    },
+  }
+</script>