@eturnity/eturnity_reusable_components 7.45.5-EPDM-10609.1 → 7.45.5-EPDM-12680.0

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

@@ -28,11 +28,14 @@
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
-        :background-color="backgroundColor"
-        :border-color="borderColor"
+        :background-color="
+          colorMode === 'transparent' ? 'transparent' : backgroundColor
+        "
+        :border-color="colorMode === 'transparent' ? 'white' : borderColor"
+        :color-mode="colorMode"
         :data-id="inputDataId"
         :disabled="disabled"
-        :font-color="fontColor"
+        :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
@@ -51,6 +54,8 @@
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
+        @keydown.down="decrementValue"
+        @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
@@ -92,6 +97,31 @@
           </template>
         </RCSelect>
       </SelectWrapper>
+
+      <ArrowControls
+        v-if="!disabled && showArrowControls"
+        :color-mode="colorMode"
+      >
+        <ArrowButton @click="incrementValue">
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            name="arrow_up"
+            size="8px"
+          />
+        </ArrowButton>
+        <ArrowDivider :color-mode="colorMode" />
+        <ArrowButton
+          :is-disabled="textInput <= minNumber"
+          @click="decrementValue"
+        >
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            :disabled="textInput <= minNumber"
+            name="arrow_down"
+            size="8px"
+          />
+        </ArrowButton>
+      </ArrowControls>
     </InputWrapper>
     <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
@@ -123,6 +153,7 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
+  //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
   //</inputNumber>
@@ -158,6 +189,7 @@
     labelFontColor: String,
     borderColor: String,
     showLinearUnitName: Boolean,
+    colorMode: String,
   }
 
   const Container = styled('div', inputProps)`
@@ -181,15 +213,18 @@
         : '1px solid ' + props.theme.colors.grey4};
     height: ${(props) => props.inputHeight};
     max-height: ${(props) => props.inputHeight};
-    padding: 0 10px;
-    padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
-      slotSize
+    padding: ${({ colorMode }) =>
+      colorMode === 'transparent' ? '10px 15px' : '0 10px'};
+    padding-right: ${({ slotSize, isError, showLinearUnitName, colorMode }) =>
+      colorMode === 'transparent'
+        ? '0'
+        : slotSize
         ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
         : isError && !showLinearUnitName
         ? '24px'
-        : '5px'};
+        : '40px'};
     border-radius: ${(props) =>
       props.isInteractive && props.alignItems != 'vertical'
         ? '0 4px 4px 0'
@@ -213,7 +248,7 @@
       props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
     background-color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey5 : '#fff'};
+      props.isDisabled ? props.theme.colors.grey5 : props.theme.colors.white};
     box-sizing: border-box;
 
     &::placeholder {
@@ -225,6 +260,55 @@
     }
   `
 
+  const ArrowControlsProps = {
+    colorMode: String,
+  }
+  const ArrowControls = styled('div', ArrowControlsProps)`
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-rows: 1fr auto 1fr;
+    align-items: center;
+    justify-items: center;
+    cursor: pointer;
+    width: 30px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? 'transparent'
+        : props.theme.colors.white};
+    border-left: 1px solid
+      ${(props) =>
+        props.colorMode === 'transparent'
+          ? props.theme.colors.white
+          : props.theme.colors.black};
+  `
+
+  const ArrowButtonProps = {
+    isDisabled: Boolean,
+  }
+  const ArrowButton = styled('button', ArrowButtonProps)`
+    background: ${(props) =>
+      props.isDisabled ? props.theme.colors.disabled : 'transparent'};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  `
+
+  const ArrowDivider = styled('div', ArrowControlsProps)`
+    width: 100%;
+    height: 1px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.theme.colors.black};
+  `
+
   const InputWrapper = styled.span`
     position: relative;
   `
@@ -359,140 +443,179 @@
       SelectWrapper,
       SelectText,
       Divider,
+      ArrowControls,
+      ArrowButton,
+      ArrowDivider,
     },
     inheritAttrs: false,
     props: {
       placeholder: {
+        type: String,
         required: false,
         default: '',
       },
       isError: {
+        type: Boolean,
         required: false,
         default: false,
       },
       inputWidth: {
+        type: String,
         required: false,
         default: null,
       },
       minWidth: {
+        type: String,
         required: false,
         default: null,
       },
       inputHeight: {
+        type: String,
         required: false,
         default: '40px',
       },
       value: {
+        type: [String, Number],
         required: true,
         default: null,
       },
       clearInput: {
+        type: Boolean,
         required: false,
         default: false,
       },
       alignItems: {
+        type: String,
         required: false,
         default: 'vertical',
       },
       errorMessage: {
+        type: String,
         required: false,
         default: 'Please insert a correct number',
       },
       numberPrecision: {
+        type: Number,
         required: false,
         default: 0,
       },
       minDecimals: {
+        type: Number,
         required: false,
         default: 0,
       },
       unitName: {
+        type: String,
         required: false,
         default: '',
       },
       showLinearUnitName: {
+        type: Boolean,
         required: false,
         default: false,
       },
       disabled: {
+        type: Boolean,
         required: false,
         default: false,
       },
       noBorder: {
+        type: Boolean,
         required: false,
         default: false,
       },
       borderColor: {
+        type: String,
         required: false,
+        default: null,
       },
       textAlign: {
+        type: String,
         required: false,
         default: 'left',
       },
       fontSize: {
+        type: String,
         required: false,
         default: '13px',
       },
       isInteractive: {
+        type: Boolean,
         required: false,
         default: false,
       },
       interactionStep: {
+        type: Number,
         required: false,
         default: 1,
       },
       labelText: {
+        type: String,
         required: false,
         default: null,
       },
       labelInfoText: {
+        type: String,
         required: false,
         default: null,
       },
       labelInfoAlign: {
+        type: String,
         required: false,
         default: 'left',
       },
       defaultNumber: {
+        type: Number,
         required: false,
         default: null,
       },
       minNumber: {
+        type: Number,
         required: false,
         default: null,
       },
       fontColor: {
+        type: String,
         required: false,
         default: null,
       },
       backgroundColor: {
+        type: String,
         required: false,
         default: null,
       },
       numberToStringEnabled: {
+        type: Boolean,
         required: false,
         default: true,
       },
       allowNegative: {
+        type: Boolean,
         required: false,
         default: true,
       },
       slotSize: {
+        type: String,
         required: false,
+        default: null,
       },
       labelFontColor: {
+        type: String,
         required: false,
         default: 'eturnityGrey',
       },
       focus: {
+        type: Boolean,
         required: false,
         default: false,
       },
       labelDataId: {
+        type: String,
         required: false,
         default: '',
       },
       inputDataId: {
+        type: String,
         required: false,
         default: '',
       },
@@ -516,6 +639,14 @@
         type: Boolean,
         default: false,
       },
+      colorMode: {
+        type: String,
+        default: '',
+      },
+      showArrowControls: {
+        type: Boolean,
+        default: true,
+      },
     },
     data() {
       return {
@@ -585,6 +716,36 @@
       }
     },
     methods: {
+      incrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue + this.interactionStep
+        this.textInput = numberToString({
+          value: newValue,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        this.$emit('on-input', newValue)
+        this.$emit('input-change', newValue)
+      },
+      decrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue - this.interactionStep
+        if (this.allowNegative || newValue >= 0) {
+          this.textInput = numberToString({
+            value: newValue,
+            numberPrecision: this.numberPrecision,
+            minDecimals: this.minDecimals,
+          })
+          this.$emit('on-input', newValue)
+          this.$emit('input-change', newValue)
+        }
+      },
       onEnterPress() {
         this.$emit('on-enter-click')
         this.$refs.inputField1.$el.blur()
@@ -680,6 +841,7 @@
             this.$emit('on-input', evaluatedVal)
           }
         }
+        this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false

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

@@ -27,7 +27,9 @@
           <InputContainer
             ref="inputElement"
             :background-color="backgroundColor"
+            :border-color="borderColor"
             :data-id="inputDataId"
+            :default-padding="defaultPadding"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -58,6 +60,13 @@
           <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 }}
@@ -122,6 +131,7 @@
     borderColor: String,
     inputHeight: String,
     disabledBackgroundColor: String,
+    defaultPadding: Boolean,
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
@@ -139,6 +149,8 @@
         ? '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;
@@ -185,13 +197,13 @@
       props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
   `
 
-  const IconAttrs = { size: String }
+  const IconAttrs = { size: String, defaultPadding: Boolean }
   const IconWrapper = styled('div', IconAttrs)`
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
-    right: 5px;
+    right: ${(props) => (props.defaultPadding ? '15px' : '5px')};
     height: ${(props) => (props.size ? props.size : 'auto')};
   `
 
@@ -325,6 +337,15 @@
         required: false,
         default: '',
       },
+      iconName: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      defaultPadding: {
+        required: false,
+        default: false,
+      },
     },
     data() {
       return {

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

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