@eturnity/eturnity_reusable_components 7.48.0 → 7.48.1-EPDM-12680.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.0",
+  "version": "7.48.1-EPDM-12680.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/collapse_all.svg

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,5 @@
+<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>

package/src/components/buttons/buttonIcon/index.vue

@@ -52,7 +52,9 @@
       props.isDisabled
         ? props.theme.colors.disabled
         : props.customColor
-        ? props.customColor
+        ? props.theme.colors[props.customColor]
+          ? props.theme.colors[props.customColor]
+          : props.customColor
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;

package/src/components/icon/index.vue

@@ -35,6 +35,7 @@
     },
     name: {
       required: true,
+      type: String,
     },
     color: {
       required: false,

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: false,
+      },
     },
     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/InputText.stories.js

@@ -3,73 +3,68 @@ import InputText from './index.vue'
 export default {
   title: 'InputText',
   component: InputText,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { InputText },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-text v-bind="$props" />',
+// import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+// To use:
+// <input-text
+//   placeholder="Company name"
+//   :value="companyName"
+//   @input-change="onInputChange({ value: $event, type: 'companyName' })"
+//   :isError="checkErrors()"
+//   :errorMessage="This is my error message"
+//   infoTextAlign="right" // left by default
+//   infoTextMessage="My info message"
+//   label="Question 5"
+//   alignItems="horizontal" // horizontal, vertical
+//   inputWidth="250px"
+//   minWidth="100px"
+// />
 
-  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
-  // To use:
-  // <input-text
-  //   placeholder="Company name"
-  //   :value="companyName"
-  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
-  //   :isError="checkErrors()"
-  //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
-  //   infoTextMessage="My info message"
-  //   label="Question 5"
-  //   alignItems="horizontal" // horizontal, vertical
-  //   inputWidth="250px"
-  //   minWidth="100px"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  value: '',
-  inputWidth: '200px',
-  minWidth: '10ch',
-  unitName: 'pc',
-  isError: false,
-  textAlign: 'left',
+export const Default = {
+  args: {
+    placeholder: 'Company name',
+    disabled: false,
+    value: '',
+    inputWidth: '200px',
+    minWidth: '10ch',
+    isError: false,
+    label: 'label test',
+    labelOptional: true,
+  },
 }
 
-export const hasError = Template.bind({})
-hasError.args = {
-  placeholder: 'Enter Value',
-  errorMessage: 'This field is required',
-  isError: true,
-  disabled: false,
-  inputWidth: '200px',
+export const HasError = {
+  args: {
+    placeholder: 'Enter Value',
+    errorMessage: 'This field is required',
+    isError: true,
+    disabled: false,
+    inputWidth: '200px',
+  },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: 'Enter Value',
-  disabled: true,
-  value: '',
-  inputWidth: '200px',
-  isError: false,
+export const Disabled = {
+  args: {
+    placeholder: 'Enter Value',
+    disabled: true,
+    value: '',
+    inputWidth: '200px',
+    isError: false,
+  },
 }
 
-export const WithLabel = Template.bind({})
-WithLabel.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  label: 'What is the best company in Switzerland?',
-  value: 'Eturnity',
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
-  errorMessage: 'Maximum 5 characters',
-  textAlign: 'left',
-  alignItems: 'vertical',
+export const WithLabel = {
+  args: {
+    placeholder: 'Company name',
+    disabled: false,
+    label: 'What is the best company in Switzerland?',
+    value: 'Eturnity',
+    inputWidth: '200px',
+    unitName: 'pc',
+    isError: false,
+    errorMessage: 'Maximum 5 characters',
+    alignItems: 'vertical',
+  },
 }