@eturnity/eturnity_reusable_components 7.45.5-EPDM-12680.3 → 7.45.5-EPDM-10609.2

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

@@ -27,9 +27,7 @@
           <InputContainer
             ref="inputElement"
             :background-color="backgroundColor"
-            :border-color="borderColor"
             :data-id="inputDataId"
-            :default-padding="defaultPadding"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -60,13 +58,6 @@
           <IconWrapper v-if="hasError" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
-          <IconWrapper
-            v-if="iconName && !hasError && inputType !== 'password'"
-            :default-padding="defaultPadding"
-            size="16px"
-          >
-            <Icon color="white" cursor="default" :name="iconName" size="16px" />
-          </IconWrapper>
         </IconContainer>
         <ErrorMessage v-if="hasError && hasErrorMessage">
           {{ dynamicErrorMessage }}
@@ -131,7 +122,6 @@
     borderColor: String,
     inputHeight: String,
     disabledBackgroundColor: String,
-    defaultPadding: Boolean,
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
@@ -149,8 +139,6 @@
         ? '11px 25px 11px 10px'
         : props.inputType === 'password'
         ? '11px 25px 11px 10px'
-        : props.defaultPadding
-        ? '10px 35px 10px 15px'
         : '11px 5px 11px 10px'};
     border-radius: 4px;
     position: relative;
@@ -197,13 +185,13 @@
       props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
   `
 
-  const IconAttrs = { size: String, defaultPadding: Boolean }
+  const IconAttrs = { size: String }
   const IconWrapper = styled('div', IconAttrs)`
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
-    right: ${(props) => (props.defaultPadding ? '15px' : '5px')};
+    right: 5px;
     height: ${(props) => (props.size ? props.size : 'auto')};
   `
 
@@ -337,15 +325,6 @@
         required: false,
         default: '',
       },
-      iconName: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      defaultPadding: {
-        required: false,
-        default: false,
-      },
     },
     data() {
       return {

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

@@ -36,7 +36,6 @@
           size="16px"
           :text="item.infoText"
         />
-        <slot :name="`input-${item.value}`"></slot>
       </LabelContainer>
       <ImageContainer v-if="item.img">
         <RadioImage

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

@@ -17,9 +17,7 @@
       >
         <InputLabel
           :font-color="
-            labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
-              ? 'white'
-              : 'eturnityGrey'
+            labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :font-size="fontSize"
           >{{ label }}
@@ -42,26 +40,18 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark'
-              ? 'transparentBlack1'
-              : colorMode == 'transparent'
-              ? 'transparent'
-              : 'white'
+            buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
           class="select-button"
-          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
-            buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
-              ? 'white'
-              : 'black'
+            buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
           "
           :font-size="fontSize"
           :has-error="hasError"
           :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
           :height="height"
-          :is-search-bar-visible="isSearchBarVisible"
           :no-relative="noRelative"
           :padding-left="paddingLeft"
           :select-height="selectHeight"
@@ -82,11 +72,7 @@
             ref="searchInput"
             background-color="transparent"
             :font-color="
-              buttonFontColor ||
-              colorMode == 'dark' ||
-              colorMode == 'transparent'
-                ? 'white'
-                : 'black'
+              buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
             :font-size="fontSize"
             input-height="34px"
@@ -106,30 +92,26 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret
-            class="caret_dropdown"
-            :color-mode="colorMode"
-            @click.stop="toggleCaretDropdown"
-          >
+          <Caret class="caret_dropdown" @click.stop="toggleCaretDropdown">
             <Icon
               v-if="isDropdownOpen"
               :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
+                caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_up"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
+              size="12px"
             />
             <Icon
               v-else
               :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
+                caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_down"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
+              size="12px"
             />
           </Caret>
         </SelectButton>
@@ -139,27 +121,15 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
-                  ? 'black'
-                  : 'white'
+                dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
               "
               :dropdown-position="dropdownPosition"
               :font-color="
-                dropdownFontColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
-                  ? 'white'
-                  : 'black'
+                dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
               "
               :font-size="fontSize"
               :hovered-bg-color="
-                colorMode == 'dark'
-                  ? '#000000'
-                  : colorMode == 'transparent'
-                  ? 'grey6'
-                  : dropdownBgColor
+                colorMode == 'dark' ? '#000000' : dropdownBgColor
               "
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
@@ -216,15 +186,12 @@
   const CARET_WIDTH = '30px'
   const BORDER_WIDTH = '1px'
 
-  const CaretAttrs = { colorMode: String }
-  const Caret = styled('div', CaretAttrs)`
+  const Caret = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
-    min-width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+    width: ${CARET_WIDTH};
+    min-width: ${CARET_WIDTH};
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -263,7 +230,6 @@
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
-    text-transform: lowercase;
   `
   const inputProps = {
     selectWidth: String,
@@ -308,8 +274,6 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
-    colorMode: String,
-    isSearchBarVisible: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -317,11 +281,7 @@
     border-radius: 4px;
     max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
     ${(props) =>
-      props.colorMode === 'transparent'
-        ? props.isSearchBarVisible
-          ? 'padding: 10px 15px 10px 5px;'
-          : 'padding: 10px 15px;'
-        : props.isSearchBarVisible
+      props.isSearchBarVisible
         ? ''
         : `padding-left: ${
             props.hasNoPadding
@@ -653,7 +613,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : this.$refs.dropdown.$el.children[0]
+            : !!this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

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

@@ -1,12 +1,6 @@
 <template>
   <OptionContainer
-    :background-color="
-      colorMode == 'dark'
-        ? '#000000'
-        : colorMode == 'transparent'
-        ? 'black'
-        : backgroundColor
-    "
+    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
@@ -14,8 +8,6 @@
     :hovered-bg-color="
       colorMode == 'dark'
         ? '#000000'
-        : colorMode == 'transparent'
-        ? 'grey6'
         : hoveredBgColor
         ? hoveredBgColor
         : 'grey5'
@@ -138,8 +130,7 @@
         default: '12px 10px',
       },
       textColor: {
-        type: String,
-        required: false,
+        type: true,
         default: 'inherit',
       },
     },
@@ -150,12 +141,11 @@
     computed: {},
     methods: {
       clickHandler(e) {
-        if (this.isDisabled) {
+        if (this.isDisabled || !!this.$attrs?.onClick) {
           // 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/spinner/index.vue

@@ -3,7 +3,6 @@
     <Container>
       <SpinnerWrapper data-test-id="spinner_full_wrapper">
         <SpinnerSvg
-          :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
           :style="{ width: size, height: size }"
         />
@@ -17,7 +16,6 @@
   >
     <SpinnerWrapper data-test-id="spinner_wrapper">
       <SpinnerSvg
-        :class="{ white: isWhite }"
         data-test-id="spinner_icon"
         :style="{ width: size, height: size }"
       />
@@ -56,10 +54,6 @@
   const SpinnerWrapper = styled.div`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;
-
-    .white {
-      filter: brightness(0) invert(1);
-    }
   `
 
   export default {
@@ -86,11 +80,6 @@
         default: '60px',
         type: String,
       },
-      isWhite: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
   }
 </script>

package/src/assets/svgIcons/collapse_all.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-  <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
-  <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
-</svg>

package/src/assets/svgIcons/hybrid.svg

@@ -1,4 +0,0 @@
-<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="M4.22998 11.8962H10.5006H12.2505V10.1463V8.97906H14.0004V5.47917H12.2505V4.31283V2.56289V2.55151H10.5006V2.56289H8.58218L7.76617 4.31283H10.5006V10.1463H5.04599L4.22998 11.8962Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.2622 4.79738C6.91629 4.63687 6.53076 4.54729 6.12431 4.54729C4.63054 4.54729 3.41919 5.75796 3.41919 7.25241C3.41919 8.33588 4.05591 9.26984 4.97534 9.70158L7.2622 4.79738ZM5.44786 3.11681C5.44786 3.49042 5.7507 3.79326 6.12431 3.79326C6.49793 3.79326 6.80077 3.49042 6.80077 3.11681V1.76459C6.80077 1.39097 6.49793 1.08813 6.12431 1.08813C5.7507 1.08813 5.44786 1.39097 5.44786 1.76459V3.11681ZM2.02818 7.88939H0.675962C0.302349 7.88939 -0.000488281 7.58655 -0.000488281 7.21294C-0.000488281 6.83932 0.302349 6.53649 0.675962 6.53649H2.02818C2.4018 6.53649 2.70463 6.83932 2.70463 7.21294C2.70463 7.58655 2.4018 7.88939 2.02818 7.88939ZM3.7057 10.5877L2.74955 11.5439C2.4855 11.8079 2.05745 11.8079 1.7934 11.5439C1.52935 11.2798 1.52935 10.8518 1.7934 10.5877L2.74955 9.63155C3.0136 9.36751 3.44165 9.36751 3.7057 9.63155C3.96975 9.8956 3.96975 10.3237 3.7057 10.5877ZM2.74955 4.79432L1.7934 3.83817C1.52935 3.57412 1.52935 3.14607 1.7934 2.88202C2.05745 2.61797 2.4855 2.61797 2.74955 2.88202L3.7057 3.83817C3.96975 4.10222 3.96975 4.53027 3.7057 4.79432C3.44165 5.05837 3.0136 5.05837 2.74955 4.79432Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/module.svg

@@ -1,3 +0,0 @@
-<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="M11.0722 3.6H1.6V10.4H11.0722L7.87332 7.60217L7.18484 7L7.87332 6.39783L11.0722 3.6ZM12.4 9.43572V4.56428L9.61516 7L12.4 9.43572ZM0 2H1.6H12.4H14V3.6V10.4V12H12.4H1.6H0V10.4V3.6V2Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/optimizer.svg

@@ -1,6 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
-<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
-<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
-<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
-</svg>

package/src/assets/svgIcons/string_design.svg

@@ -1,5 +0,0 @@
-<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.85714 1.92857C2.85714 2.71755 2.21755 3.35714 1.42857 3.35714C0.639593 3.35714 0 2.71755 0 1.92857C0 1.13959 0.639593 0.5 1.42857 0.5C2.21755 0.5 2.85714 1.13959 2.85714 1.92857Z" fill="white"/>
-<path d="M10 9.07143C10 9.86041 9.36041 10.5 8.57143 10.5C7.78245 10.5 7.14286 9.86041 7.14286 9.07143C7.14286 8.28245 7.78245 7.64286 8.57143 7.64286C9.36041 7.64286 10 8.28245 10 9.07143Z" fill="white"/>
-<path d="M5.71429 3C5.71429 2.40827 6.19398 1.92857 6.78571 1.92857C7.37745 1.92857 7.85714 2.40827 7.85714 3V6.21429H9.28571V3C9.28571 1.61929 8.16643 0.5 6.78571 0.5C5.405 0.5 4.28571 1.61929 4.28571 3V8C4.28571 8.59173 3.80602 9.07143 3.21429 9.07143C2.62255 9.07143 2.14286 8.59173 2.14286 8V4.78571H0.714286V8C0.714286 9.38071 1.83357 10.5 3.21429 10.5C4.595 10.5 5.71429 9.38071 5.71429 8V3Z" fill="white"/>
-</svg>