@eturnity/eturnity_reusable_components 8.31.5 → 8.31.6-EPDM-13620.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.31.5",
+  "version": "8.31.6-EPDM-13620.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99866 2C8.2748 2 8.49866 2.22386 8.49866 2.5V12.2939L11.1461 9.64648L11.2242 9.58203C11.4183 9.45391 11.6823 9.4758 11.8532 9.64648C12.024 9.81735 12.0458 10.0813 11.9176 10.2754L11.8532 10.3535L8.35217 13.8535C8.25843 13.9471 8.1311 14 7.99866 14C7.89938 13.9998 7.80269 13.9703 7.72131 13.916L7.64514 13.8535L4.14612 10.3535C3.95114 10.1583 3.95112 9.84168 4.14612 9.64648C4.34132 9.45131 4.65789 9.45143 4.85315 9.64648L7.49866 12.293V2.5C7.49866 2.22412 7.72287 2.00042 7.99866 2Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/ed_socket.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5709 9.96196C23.4773 5.41675 27.3543 2.00041 32 2V3.04166C27.2359 3.04212 23.3735 7.05247 23.3733 11.9995C23.3733 16.9467 27.2358 20.9579 32 20.9583V22L31.5053 21.9868C27.079 21.7538 23.4427 18.417 22.5709 14.0309V22H21.5678V12.5203H0V11.4787H21.5678V2H22.5709V9.96196Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/ed_terminal.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9532 2.75293L19.1309 5.57422C20.6651 7.27562 21.6005 9.52781 21.6006 11.999L21.5879 12.4932C21.3309 17.5655 17.1362 21.5994 12 21.5996L11.5069 21.5869C9.22968 21.4716 7.16375 20.5603 5.5762 19.1289L2.75296 21.9531L2.04593 21.2461L4.86819 18.4229C3.4391 16.8371 2.53095 14.7737 2.41409 12.5H3.05176e-05V11.5H2.41214C2.67203 6.43039 6.86584 2.39962 12 2.39941C14.4706 2.39951 16.7225 3.33393 18.4239 4.86719L21.2461 2.0459L21.9532 2.75293ZM6.28323 18.4219C7.80281 19.7756 9.80491 20.5995 12 20.5996C16.7495 20.5994 20.6006 16.7486 20.6006 11.999C20.6005 9.80399 19.7756 7.80273 18.4219 6.2832L6.28323 18.4219ZM12 3.39941C7.25076 3.39963 3.40074 7.24977 3.40042 11.999C3.40042 14.1935 4.22334 16.1952 5.5762 17.7148L17.7149 5.57617C16.1953 4.2234 14.1944 3.39951 12 3.39941Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/ed_transformer_measurement.svg

@@ -0,0 +1,3 @@
+<svg width="62" height="34" viewBox="0 0 62 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 10C34.6978 10 37.724 12.8674 37.9805 16.5H62V17.5H37.9805C37.7357 20.9674 34.9674 23.7357 31.5 23.9805V34H30.5V23.9805C27.0326 23.7357 24.2643 20.9674 24.0195 17.5H0V16.5H24.0195C24.276 12.8674 27.3022 10 31 10ZM25.0225 17.5C25.2766 20.5797 27.8547 23 31 23C34.1453 23 36.7234 20.5797 36.9775 17.5H25.0225ZM31 11C27.8547 11 25.2766 13.4203 25.0225 16.5H36.9775C36.7234 13.4203 34.1453 11 31 11Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/sorting.svg

@@ -1,4 +1,3 @@
-<svg fill="none" height="14" viewbox="14 13 12 14" width="12" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 14L25 19H15L20 14Z" fill="#263238"></path>
-<path d="M20 26L15 21L25 21L20 26Z" fill="#263238"></path>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.22498 2.08203C4.41903 1.95408 4.6831 1.97571 4.85388 2.14648L7.35388 4.64648L7.41833 4.72461C7.54631 4.91859 7.5245 5.1827 7.35388 5.35352C7.1831 5.52429 6.91903 5.54592 6.72498 5.41797L6.64685 5.35352L5.00037 3.70703V13.5C5.00037 13.776 4.77632 13.9998 4.50037 14C4.22422 14 4.00037 13.7761 4.00037 13.5V3.70703L2.35388 5.35352C2.15869 5.54871 1.84213 5.54857 1.64685 5.35352C1.45159 5.15825 1.45159 4.84175 1.64685 4.64648L4.14685 2.14648L4.22498 2.08203ZM11.5004 2C11.7763 2.00021 12.0004 2.22399 12.0004 2.5V12.293L13.6469 10.6465L13.725 10.582C13.919 10.4541 14.1831 10.4757 14.3539 10.6465C14.5245 10.8173 14.5463 11.0814 14.4183 11.2754L14.3539 11.3535L11.8539 13.8535C11.7602 13.9472 11.6328 13.9999 11.5004 14C11.401 14 11.3045 13.9703 11.223 13.916L11.1469 13.8535L8.64685 11.3535C8.45159 11.1583 8.45159 10.8417 8.64685 10.6465C8.84213 10.4514 9.15869 10.4513 9.35388 10.6465L11.0004 12.293V2.5C11.0004 2.22386 11.2242 2 11.5004 2Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99866 13.9999C8.2748 13.9999 8.49866 13.7761 8.49866 13.4999V3.70599L11.1461 6.35345L11.2242 6.41791C11.4183 6.54603 11.6823 6.52414 11.8532 6.35345C12.024 6.18259 12.0458 5.91861 11.9176 5.72455L11.8532 5.64642L8.35217 2.14642C8.25843 2.05289 8.1311 1.99993 7.99866 1.99994C7.89938 2.00009 7.80269 2.0296 7.72131 2.08392L7.64514 2.14642L4.14612 5.64642C3.95114 5.84164 3.95112 6.15825 4.14612 6.35345C4.34132 6.54863 4.65789 6.54851 4.85315 6.35345L7.49866 3.70697V13.4999C7.49866 13.7758 7.72287 13.9995 7.99866 13.9999Z" fill="#263238"/>
+</svg>

package/src/components/icon/sortingIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <RCIcon v-if="isDescending" :color="color" name="down" :size="size" />
+  <RCIcon v-else-if="isAscending" :color="color" name="up" :size="size" />
+  <RCIcon v-else :color="color" name="sorting" :size="size" />
+</template>
+<script>
+  import RCIcon from './index.vue'
+  export default {
+    name: 'SortingIcon',
+    components: {
+      RCIcon,
+    },
+    props: {
+      isAscending: {
+        type: Boolean,
+        default: false,
+      },
+      isDescending: {
+        type: Boolean,
+        default: false,
+      },
+      color: {
+        type: String,
+        default: 'black',
+      },
+      size: {
+        type: String,
+        default: '16px',
+      },
+    },
+  }
+</script>

package/src/components/infoCard/index.vue

@@ -5,6 +5,7 @@
     :border-style="borderStyle"
     :color="color"
     data-test-id="info_card_wrapper"
+    :min-height="minHeight"
     :min-width="minWidth"
     :padding="padding"
     :preset-styles="presetStyles"
@@ -28,6 +29,7 @@
   import RCIcon from '../icon'
 
   const infoContainerAttrs = {
+    minHeight: String,
     minWidth: String,
     color: String,
     alignItems: String,
@@ -42,6 +44,7 @@
       props.alignItems ? props.alignItems : props.presetStyles.alignItems};
     gap: 16px;
     min-width: ${(props) => props.minWidth};
+    min-height: ${(props) => props.minHeight};
     padding: ${(props) =>
       props.padding ? props.padding : props.presetStyles.padding};
     color: ${(props) => (props.color ? props.color : props.presetStyles.color)};
@@ -85,6 +88,11 @@
         type: String,
         default: '',
       },
+      minHeight: {
+        required: false,
+        type: String,
+        default: '',
+      },
       iconColor: {
         required: false,
         type: String,

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

@@ -24,6 +24,7 @@
 
       <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
+        <IsRequiredLabelStar v-if="isRequiredLabel" />
       </LabelText>
     </Container>
   </ComponentWrapper>
@@ -43,7 +44,7 @@
   //     cursorType="default"
   // />
   import styled from 'vue3-styled-components'
-
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
   const ComponentWrapper = styled.div`
     min-height: 16px;
   `
@@ -193,6 +194,7 @@
       InputCheckbox,
       LabelText,
       CheckWrapper,
+      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -243,6 +245,10 @@
         required: false,
         default: 'left',
       },
+      isRequiredLabel: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       hasLabel() {

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

@@ -10,6 +10,7 @@
       @mousedown="initInteraction"
     >
       <slot name="label"></slot>
+      <IsRequiredLabelStar v-if="isRequiredLabel" />
     </LabelSlotWrapper>
     <LabelWrapper v-if="labelText">
       <LabelText
@@ -19,6 +20,7 @@
         :label-font-weight="labelFontWeight"
       >
         {{ labelText }}
+        <IsRequiredLabelStar v-if="isRequiredLabel" />
       </LabelText>
 
       <InfoText
@@ -238,6 +240,7 @@
   import ErrorMessage from '../../errorMessage'
   import RCSelect from '../select'
   import RCOption from '../select/option'
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
   import warningIcon from '../../../assets/icons/error_icon.png'
   import Icon from '../../icon'
 
@@ -559,6 +562,7 @@
       ArrowButton,
       ArrowDivider,
       InputInfoText,
+      IsRequiredLabelStar,
     },
     inheritAttrs: false,
     props: {
@@ -803,6 +807,10 @@
         type: Boolean,
         default: true,
       },
+      isRequiredLabel: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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

@@ -14,6 +14,7 @@
           :label-font-color="labelFontColor"
         >
           {{ label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional" data-test-id="label_optional">
             ({{ $gettext('Optional') }})
           </OptionalLabel>
@@ -105,6 +106,7 @@
   import Icon from '../../icon'
   import ErrorMessage from '../../errorMessage'
   import InputValidations from '../../../mixins/inputValidations.js'
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const Container = styled.div`
     width: 100%;
@@ -264,6 +266,7 @@
       IconContainer,
       InputErrorWrapper,
       OptionalLabel,
+      IsRequiredLabelStar,
     },
     mixins: [InputValidations],
     props: {
@@ -423,6 +426,11 @@
         default: '',
         type: String,
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {

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

@@ -0,0 +1,13 @@
+<template>
+  <StarElement>*</StarElement>
+</template>
+<script>
+  import styled from 'vue3-styled-components'
+  const StarElement = styled.span`
+    color: ${({ theme }) => theme.colors.red};
+  `
+  export default {
+    name: 'IsRequiredLabelStar',
+    components: { StarElement },
+  }
+</script>

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

@@ -33,6 +33,7 @@
           :is-disabled="isItemDisabled(item)"
         >
           {{ item.label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText
           v-if="item.infoText"
@@ -97,6 +98,7 @@
   import styled from 'vue3-styled-components'
   import Modal from '../../modals/modal'
   import InfoText from '../../infoText'
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const wrapperProps = {
     layout: String,
@@ -259,6 +261,7 @@
       ModalImageContainer,
       InfoText,
       LabelText,
+      IsRequiredLabelStar,
     },
     props: {
       disabled: {
@@ -312,6 +315,11 @@
         required: false,
         type: String,
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     emits: ['on-radio-change'],
     data() {

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

@@ -26,6 +26,7 @@
           "
           :font-size="fontSize"
           >{{ label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
             ({{ $gettext('Optional') }})</OptionalLabel
           >
@@ -200,6 +201,12 @@
             </SelectDropdown>
           </Component>
         </DropdownWrapper>
+        <ErrorMessage
+          v-if="hasError && hasErrorMessage"
+          data-test-id="error_message_wrapper"
+        >
+          {{ dynamicErrorMessage }}
+        </ErrorMessage>
       </SelectButtonWrapper>
     </InputWrapper>
   </Container>
@@ -232,9 +239,11 @@
   import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
+  import ErrorMessage from '../../errorMessage'
   import Icon from '../../icon'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
   import { debounce } from '../../../utils'
 
   const CARET_WIDTH = '30px'
@@ -300,7 +309,6 @@
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
-    display: inline-block;
     text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
@@ -511,6 +519,8 @@
       InputText,
       Teleport,
       DraggableInputHandle,
+      IsRequiredLabelStar,
+      ErrorMessage,
     },
 
     props: {
@@ -529,6 +539,11 @@
       label: {
         required: false,
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       labelOptional: {
         required: false,
         default: false,
@@ -612,9 +627,14 @@
         default: true,
       },
       hasError: {
+        type: Boolean,
         required: false,
         default: false,
       },
+      errorMessage: {
+        type: String,
+        default: '',
+      },
       disabled: {
         required: false,
         type: Boolean,
@@ -727,6 +747,12 @@
       }
     },
     computed: {
+      hasErrorMessage() {
+        return this.errorMessage && this.errorMessage.length > 0
+      },
+      dynamicErrorMessage() {
+        return this.errorMessage
+      },
       optionLength() {
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1

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

@@ -15,6 +15,7 @@
       >
         <LabelText :size="size">
           {{ label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
       </LabelContainer>
@@ -80,6 +81,7 @@
   import InfoText from '../../infoText'
   import theme from '../../../assets/theme'
   import RCIcon from '../../icon'
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
   const OptionIconContainer = styled.div`
     display: flex;
     align-items: center;
@@ -190,6 +192,7 @@
       SwitchOption,
       OptionIconContainer,
       RCIcon,
+      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -235,6 +238,11 @@
         required: false,
         default: null,
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {

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

@@ -7,6 +7,7 @@
       <LabelWrapper v-if="label">
         <InputLabel :data-id="labelDataId" :font-size="fontSize">
           {{ label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </InputLabel>
         <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
       </LabelWrapper>
@@ -24,6 +25,8 @@
           :resize="resize"
           :rows="rowHeight"
           :value="value"
+          @blur="onInputBlur"
+          @focus="onInputFocus"
           @input="onChangeHandler"
         ></textarea>
       </InputContainer>
@@ -53,6 +56,7 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import ErrorMessage from '../../errorMessage'
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const containerProps = { inputWidth: String }
   const Container = styled('div', containerProps)`
@@ -132,6 +136,7 @@
       InfoText,
       LabelWrapper,
       InputLabel,
+      IsRequiredLabelStar,
     },
     props: {
       placeholder: {
@@ -192,6 +197,11 @@
         default: '',
         type: String,
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     methods: {
       onChangeHandler($event) {
@@ -200,6 +210,12 @@
         }
         this.$emit('input-change', $event.target.value)
       },
+      onInputBlur($event) {
+        this.$emit('input-blur', $event.target.value)
+      },
+      onInputFocus($event) {
+        this.$emit('input-focus', $event.target.value)
+      },
     },
   }
 </script>

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

@@ -19,6 +19,7 @@
           :size="size"
         >
           {{ label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
       </LabelContainer>
@@ -89,6 +90,7 @@
 
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
+  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const Container = styled.div`
     display: inline-block;
@@ -254,6 +256,7 @@
       LabelText,
       InfoText,
       LabelContainer,
+      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -309,6 +312,11 @@
         type: String,
         default: '',
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     methods: {
       onToggleChange() {

package/src/components/label/index.vue

@@ -2,6 +2,7 @@
   <LabelWrapper :label-align="labelAlign">
     <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
       <slot></slot>
+      <IsRequiredLabelStar v-if="isRequiredLabel" />
       <OptionalLabel v-if="labelOptional">
         ({{ $gettext('Optional') }})
       </OptionalLabel>
@@ -18,6 +19,7 @@
 <script>
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
+  import IsRequiredLabelStar from '../inputs/isRequiredLabelStar'
 
   const labelAttrs = { fontSize: String, labelFontColor: String }
   const InputLabel = styled('div', labelAttrs)`
@@ -64,6 +66,7 @@
       InputLabel,
       LabelWrapper,
       OptionalLabel,
+      IsRequiredLabelStar,
     },
     props: {
       infoTextMessage: {
@@ -88,6 +91,11 @@
         required: false,
         default: 'vertical',
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {

package/src/components/threeDots/index.vue

@@ -2,9 +2,10 @@
   <PageContainer
     ref="pageContainer"
     :activated="isOpen"
+    :hovered-background-color="hoveredBackgroundColor"
     @click="toggleButton()"
   >
-    <ButtonContainer ref="dropdownItem">
+    <ButtonContainer ref="dropdownItem" :icon-color="iconColor">
       <DotItem />
       <DotItem />
       <DotItem />
@@ -131,9 +132,10 @@
 
   import styled from 'vue3-styled-components'
   import Spinner from '../spinner'
-
+  import theme from '../../assets/theme'
   const PageContainerAttrs = {
     activated: Boolean,
+    hoveredBackgroundColor: String,
   }
   const PageContainer = styled('div', PageContainerAttrs)`
     display: grid;
@@ -143,14 +145,14 @@
     height: 30px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.activated ? props.theme.colors.grey5 : ''};
+      props.activated ? props.hoveredBackgroundColor : ''};
 
     &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
+      background-color: ${(props) => props.hoveredBackgroundColor};
     }
   `
 
-  const ButtonContainer = styled.div`
+  const ButtonContainer = styled('div', { iconColor: String })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -160,7 +162,7 @@
 
     div {
       // This is the dot color
-      background-color: #263238;
+      background-color: ${({ iconColor }) => iconColor};
     }
   `
 
@@ -305,6 +307,14 @@
         required: false,
         default: true,
       },
+      iconColor: {
+        type: String,
+        default: '#263238',
+      },
+      hoveredBackgroundColor: {
+        type: String,
+        default: theme.colors.grey5,
+      },
     },
     data() {
       return {
@@ -312,6 +322,7 @@
         hoverItem: null,
         childOpen: null,
         containerWidth: 16,
+        theme,
       }
     },
     methods: {