@eturnity/eturnity_reusable_components 8.16.9-SLD.2 → 8.16.9-qa-16-03-26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.9-SLD.2",
+  "version": "8.16.9-qa-16-03-26.1",
   "files": [
     "dist",
     "src"

package/src/TestChart.vue

@@ -0,0 +1,234 @@
+<template>
+  <div
+    style="
+      margin-top: 100px;
+      margin-left: 80px;
+      padding-bottom: 100px;
+      display: flex;
+      flex-direction: column;
+    "
+  >
+    <!-- Simple bar chart -->
+    <BarChart
+      :data="monthlyData"
+      width="700px"
+      height="400px"
+      :valueFormatter="valueFormatter"
+      :barWidth="60"
+      :isScrollable="false"
+      chartControlsPosition="bottom"
+      :isBottomFieldsShown="true"
+      :isSelectionEnabled="true"
+      :selectionSize="3"
+      @selection-change="handleSelectionChange"
+    >
+    </BarChart>
+    <br />
+    <br />
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      yAxisTitle="Energy (kWh)"
+      :data="monthLabels"
+      :series="tariffZones"
+      width="700px"
+      height="400px"
+      :barWidth="60"
+      :valueFormatter="valueFormatter"
+      :legendsItemPerRow="4"
+      :splitButtonOptions="options"
+      :selectedSplitButton="selectedTimeFrame"
+      :showPercentageOnTooltip="true"
+      :isBottomFieldsShown="true"
+      :isLegendShown="true"
+      @select-split-button="handleSelectSplitButton"
+      @input-blur="handleInputBlur"
+    >
+    </BarChart>
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      :data="monthLabels"
+      :series="tariffZones"
+      width="700px"
+      height="400px"
+      :barWidth="60"
+      :valueFormatter="valueFormatter"
+      :legendsItemPerRow="4"
+      :isBottomFieldsShown="true"
+      :isLegendShown="false"
+      fieldMode="percentage"
+      @select-split-button="handleSelectSplitButton"
+      @input-blur="handleInputBlur"
+    >
+      <!-- <template #tooltip="{ item, segment }">
+        <div style="display: flex; flex-direction: column">
+          {{ $c.log(item, segment) }}
+          <div>{{ item.label }}</div>
+          <div>{{ item.segments[0].value }} kWh</div>
+        </div>
+      </template> -->
+    </BarChart>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import BarChart from '@/components/barchart/index.vue'
+
+  const options = [
+    { label: 'Day', value: 'day' },
+    { label: 'Month', value: 'month' },
+    { label: 'Year', value: 'year' },
+  ]
+
+  const selectedTimeFrame = ref('day')
+
+  const handleSelectSplitButton = (value) => {
+    selectedTimeFrame.value = value
+  }
+
+  const monthlyData = [
+    { label: 'Jan', value: 300 },
+    { label: 'Feb', value: 600 },
+    { label: 'Mar', value: 1000 },
+    { label: 'Apr', value: 1200 },
+    { label: 'May', value: 1400 },
+    { label: 'Jun', value: 1810 },
+    { label: 'Jul', value: 1400 },
+    { label: 'Aug', value: 1200 },
+    { label: 'Sep', value: 1000 },
+    // { label: 'Oct', value: 800 },
+    // { label: 'Nov', value: 600 },
+    // { label: 'Dec', value: 400 },
+    // { label: 'Jan', value: 300 },
+    // { label: 'Feb', value: 600 },
+    // { label: 'Mar', value: 1000 },
+    // { label: 'Apr', value: 1200 },
+    // { label: 'May', value: 1400 },
+    // { label: 'Jun', value: 1810 },
+    // { label: 'Jul', value: 1400 },
+    // { label: 'Aug', value: 1200 },
+    // { label: 'Sep', value: 1000 },
+    // { label: 'Oct', value: 800 },
+    // { label: 'Nov', value: 600 },
+    // { label: 'Dec', value: 400 },
+
+    // ... more months
+  ]
+
+  const monthLabels = [
+    { label: 'Jan' },
+    { label: 'Feb' },
+    { label: 'Mar' },
+    { label: 'Apr' },
+    { label: 'May' },
+    { label: 'Jun' },
+    // ... more months
+  ]
+
+  const tariffZones = ref([
+    {
+      name: 'Tariff Zone 1',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 130 },
+        { label: 'Mar', value: 220 },
+        { label: 'Apr', value: 230 },
+        { label: 'May', value: 200 },
+        { label: 'Jun', value: 210 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 2',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 270 },
+        { label: 'Apr', value: 180 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 250 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 3',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 4',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 5',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 6',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    // ... more tariff zones
+  ])
+
+  const valueFormatter = (value) => {
+    return `${value} kWh`
+  }
+
+  const handleSelectionChange = (selectedBars) => {
+    console.log('selectedBars', selectedBars)
+  }
+
+  const handleInputBlur = (payload) => {
+    console.log({ payload })
+    const newVal = [...tariffZones.value].map((zone) => {
+      if (zone.name === payload.seriesName) {
+        zone.data = zone.data.map((item) => {
+          if (item.label === payload.label) {
+            item.value = payload.value
+          }
+          return item
+        })
+      }
+      return zone
+    })
+
+    console.log({ newVal })
+
+    tariffZones.value = newVal
+  }
+</script>
+
+<style lang="scss" scoped></style>

package/src/assets/svgIcons/duplicate.svg

@@ -1,3 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 0.874878C11.3284 0.874878 12 1.54645 12 2.37488V3.87488H13.5C14.3284 3.87488 15 4.54645 15 5.37488V13.3749C15 14.2033 14.3284 14.8749 13.5 14.8749H5.5C4.67157 14.8749 4 14.2033 4 13.3749V11.8749H2.5C1.67157 11.8749 1 11.2033 1 10.3749V2.37488C1 1.54645 1.67157 0.874878 2.5 0.874878H10.5ZM4 10.8749H2.5C2.22386 10.8749 2 10.651 2 10.3749V2.37488C2 2.09874 2.22386 1.87488 2.5 1.87488H10.5C10.7761 1.87488 11 2.09874 11 2.37488V3.87488H5.5C4.67157 3.87488 4 4.54645 4 5.37488V10.8749ZM14 5.37488C14 5.09874 13.7761 4.87488 13.5 4.87488H5.5C5.22386 4.87488 5 5.09874 5 5.37488V13.3749C5 13.651 5.22386 13.8749 5.5 13.8749H13.5C13.7761 13.8749 14 13.651 14 13.3749V5.37488Z" fill="black"/>
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 17.8751V25.8749C27 26.4374 26.5625 26.8749 26 26.8749H18.0626C17.5001 26.8749 17.0626 26.4374 17.0626 25.8749V17.8751C17.0626 17.3126 17.5001 16.8751 18.0626 16.8751H26.0625C26.5625 16.9376 27 17.3751 27 17.8751Z" fill="#B2B9C5"></path>
+<path d="M22.9374 14.1251V16.3126H18.0624C17.1874 16.3126 16.4375 17.0626 16.4375 17.9376V23.125H14C13.4375 23.125 13 22.6875 13 22.125V14.1251C13 13.5626 13.4375 13.1251 14 13.1251H21.9999C22.4999 13.1251 22.9374 13.5626 22.9374 14.1251Z" fill="#B2B9C5"></path>
 </svg>

package/src/assets/svgIcons/text_icon.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 1C1.22386 1 1 1.22386 1 1.5V2.5C1 2.77614 0.776142 3 0.5 3C0.223858 3 0 2.77614 0 2.5V1.5C0 0.671573 0.671573 0 1.5 0H6H10.5C11.3284 0 12 0.671573 12 1.5V2.5C12 2.77614 11.7761 3 11.5 3C11.2239 3 11 2.77614 11 2.5V1.5C11 1.22386 10.7761 1 10.5 1H6.5V11H8.5C8.77614 11 9 11.2239 9 11.5C9 11.7761 8.77614 12 8.5 12H6H3.5C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H5.5V1H1.5Z" fill="black"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3C3.22386 3 3 3.22386 3 3.5V4.5C3 4.77614 2.77614 5 2.5 5C2.22386 5 2 4.77614 2 4.5V3.5C2 2.67157 2.67157 2 3.5 2H8H12.5C13.3284 2 14 2.67157 14 3.5V4.5C14 4.77614 13.7761 5 13.5 5C13.2239 5 13 4.77614 13 4.5V3.5C13 3.22386 12.7761 3 12.5 3H8.5V13H10.5C10.7761 13 11 13.2239 11 13.5C11 13.7761 10.7761 14 10.5 14H8H5.5C5.22386 14 5 13.7761 5 13.5C5 13.2239 5.22386 13 5.5 13H7.5V3H3.5Z" fill="white"/>
 </svg>

package/src/components/barchart/BottomFields.vue

@@ -1,13 +1,13 @@
 <template>
   <Container :is-chart-controls-shown-in-bottom="isChartControlsShownInBottom">
     <LabelsColumn :width="yAxisWidth">
-      <LabelRow v-for="series in props.series" :key="series.name">
+      <LabelRow v-for="series in seriesData" :key="series.name">
         {{ series.name }}
       </LabelRow>
-      <TotalRow v-if="props.series.length && fieldMode === 'percentage'">
+      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
         {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
       </TotalRow>
-      <TotalRow v-if="props.series.length">
+      <TotalRow v-if="seriesData.length">
         {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
       </TotalRow>
     </LabelsColumn>
@@ -18,9 +18,9 @@
     >
       <FieldsWrapper>
         <!-- For stacked bar chart -->
-        <template v-if="props.series.length">
+        <template v-if="seriesData.length">
           <InputRow
-            v-for="series in props.series"
+            v-for="series in seriesData"
             :key="series.name"
             :data-series-name="series.name"
           >
@@ -32,7 +32,14 @@
             >
               <InputNumber
                 :allow-negative="false"
+                :error-message="null"
                 input-height="36px"
+                :is-border-error-only="true"
+                :is-error="
+                  fieldMode === 'percentage'
+                    ? calculatePercentageTotal(item.label) !== 100
+                    : false
+                "
                 :number-precision="0"
                 :min-decimals="0"
                 text-align="center"
@@ -61,6 +68,7 @@
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="calculatePercentageTotal(item.label)"
               />
+              {{ $c.log(calculatePercentageTotal(item.label)) }}
             </InputGroup>
           </TotalInputRow>
 
@@ -72,12 +80,19 @@
               :key="index"
             >
               <InputNumber
+                error-message="The entered values don’t add up to 100% so we will automatically scale the total kWh"
                 input-height="36px"
+                :is-border-error-only="true"
+                :is-error="
+                  fieldMode === 'percentage'
+                    ? calculatePercentageTotal(item.label) !== 100
+                    : false
+                "
                 :is-read-only="true"
                 :number-precision="2"
                 :min-decimals="0"
                 text-align="center"
-                :value="calculateTotal(item.label)"
+                :value="calculateTotalValue(item.label)"
               />
             </InputGroup>
           </TotalInputRow>
@@ -110,7 +125,8 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { ref, watch, onMounted } from 'vue'
+  import styled from 'vue3-styled-components'
   import InputNumber from '../inputs/inputNumber'
 
   import {
@@ -161,6 +177,43 @@
     },
   })
 
+  const seriesData = ref([])
+
+  onMounted(() => {
+    seriesData.value = props.series.map((item) => {
+      const data = item.data.map((d) => ({
+        label: d.label,
+        value: d.value,
+        originalValue: d.value,
+      }))
+
+      return {
+        name: item.name,
+        data,
+      }
+    })
+  })
+
+  watch(props.series, () => {
+    const currentSeriesData = [...seriesData.value]
+    const newSeriesData = []
+
+    props.series.forEach((item, itemIndex) => {
+      const data = item.data.map((d, dIndex) => ({
+        label: d.label,
+        value: d.value,
+        originalValue: currentSeriesData[itemIndex].data[dIndex].originalValue,
+      }))
+
+      newSeriesData.push({
+        name: item.name,
+        data,
+      })
+    })
+
+    seriesData.value = [...newSeriesData]
+  })
+
   const emit = defineEmits([
     'sync-scroll',
     'input-blur',
@@ -175,11 +228,13 @@
     emit('input-focus', { seriesName, label })
   }
 
-  const calculateTotal = (label) => {
-    return props.series.reduce((sum, series) => {
+  const calculateTotalValue = (label) => {
+    const total = seriesData.value.reduce((sum, series) => {
       const value = series.data.find((d) => d.label === label)?.value || 0
       return sum + value
     }, 0)
+
+    return Math.round(total)
   }
 
   const syncScroll = (scrollLeft) => {
@@ -190,30 +245,59 @@
       container.scrollLeft = scrollLeft
     }
   }
-  const getDisplayValue = (seriesData, label) => {
+
+  const calculateTotalOriginalValue = (label) => {
+    return seriesData.value.reduce((sum, series) => {
+      const value =
+        series.data.find((d) => d.label === label)?.originalValue || 0
+      return sum + value
+    }, 0)
+  }
+
+  const getDisplayValue = (data, label) => {
     if (props.fieldMode === 'absolute') {
-      return seriesData.find((d) => d.label === label)?.value || ''
+      return data.find((d) => d.label === label)?.value || ''
     }
 
-    const value = seriesData.find((d) => d.label === label)?.value || 0
-    const total = calculateTotal(label)
-    return total ? Number(((value / total) * 100).toFixed(0)) : 0
+    const value = data.find((d) => d.label === label)?.value || 0
+
+    const total = seriesData.value.reduce((sum, series) => {
+      const value =
+        series.data.find((d) => d.label === label)?.originalValue || 0
+      return sum + value
+    }, 0)
+
+    return Math.round((value / total) * 100)
   }
 
   const calculatePercentageTotal = (label) => {
-    return props.series.reduce((sum, series) => {
+    const originalTotal = seriesData.value.reduce((sum, series) => {
+      const originalValue =
+        series.data.find((d) => d.label === label)?.originalValue || 0
+      return sum + originalValue
+    }, 0)
+
+    const totalPercentage = seriesData.value.reduce((sum, series) => {
       const value = series.data.find((d) => d.label === label)?.value || 0
-      const total = calculateTotal(label)
-      const percentage = total ? Number(((value / total) * 100).toFixed(0)) : 0
+      const percentage = originalTotal
+        ? Number((value / originalTotal) * 100)
+        : 0
       return sum + percentage
     }, 0)
+
+    return Math.round(totalPercentage)
   }
 
   const handleInputBlur = (_value, seriesName, label) => {
     let value = Number(_value)
 
     if (props.fieldMode === 'percentage') {
-      const total = calculateTotal(label)
+      const total = seriesData.value.reduce((sum, series) => {
+        const value =
+          series.data.find((d) => d.label === label)?.originalValue || 0
+        return sum + value
+      }, 0)
+
       value = (value / 100) * total
     }
 

package/src/components/barchart/composables/useTooltip.js

@@ -18,6 +18,18 @@ export function useTooltip(chartId, normalizedData) {
     }
     if (isObjectEqual(item, tooltipData.value)) return
 
+    const totalValue = item.segments.reduce((acc, segment) => {
+      return acc + segment.value
+    }, 0)
+
+    const segments = item.segments.map((segment) => {
+      let valuePercentage = (segment.value / totalValue) * 100
+      segment.valuePercentage = Math.round(valuePercentage)
+
+      return segment
+    })
+    item.segments = segments
+
     tooltipData.value = { ...item }
 
     const targetElement = series.length

package/src/components/barchart/index.vue

@@ -30,7 +30,7 @@
             )
           "
         >
-          <YAxisLabel>{{ label }}</YAxisLabel>
+          <YAxisLabel>{{ getYAxisLabel(label) }}</YAxisLabel>
           <YAxisLine :y-axis-width="yAxisWidth" />
         </YAxisRow>
       </YAxis>
@@ -128,7 +128,11 @@
                   :gradient-to="segment.gradientTo"
                 />
                 <TooltipText>
-                  {{ handleValueFormatter(segment.value) }}
+                  {{
+                    fieldMode === 'absolute' && showPercentageOnTooltip
+                      ? `${segment.valuePercentage}%`
+                      : handleValueFormatter(segment.value)
+                  }}
                 </TooltipText>
               </TooltipRow>
             </template>
@@ -171,12 +175,13 @@
 </template>
 
 <script setup>
-  import { useSlots, computed } from 'vue'
+  import { useSlots, computed, ref } from 'vue'
 
   import ChartControls from './ChartControls'
   import BottomFields from './BottomFields'
   import SelectionBox from './SelectionBox'
   import Spinner from '../spinner'
+  import { numberToString } from '../../helpers/numberConverter'
 
   import {
     useTooltip,
@@ -296,6 +301,10 @@
       type: Boolean,
       default: false,
     },
+    showPercentageOnTooltip: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const generateChartId = () =>
@@ -378,8 +387,20 @@
   }
 
   const handleValueFormatter = (value) => {
-    return props.valueFormatter
-      ? props.valueFormatter(Math.round(value))
-      : value
+    value = numberToString({
+      value,
+      numberPrecision: 0,
+      minDecimals: 0,
+    })
+
+    return props.valueFormatter ? props.valueFormatter(value) : value
+  }
+
+  const getYAxisLabel = (label) => {
+    return numberToString({
+      value: label,
+      numberPrecision: 0,
+      minDecimals: 0,
+    })
   }
 </script>

package/src/components/barchart/styles/bottomFields.js

@@ -28,7 +28,6 @@ export const TotalRow = styled(LabelRow)``
 
 export const FieldsContainer = styled.div`
   flex: 1;
-  overflow-x: auto;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -63,4 +62,9 @@ export const InputGroup = styled('div', {
     props.barWidth}px;
   display: flex;
   justify-content: center;
+  position: relative;
+
+  input[readonly] {
+    border: 1px solid ${(props) => props.theme.colors.grey4} !important;
+  }
 `

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

@@ -50,6 +50,7 @@
         :has-slot="hasSlot"
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
+        :is-border-error-only="isBorderErrorOnly"
         :is-disabled="disabled"
         :is-error="isError"
         :is-interactive="isInteractive"
@@ -57,11 +58,12 @@
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
         :read-only="isReadOnly"
+        :readonly="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formatWithCurrency(value)"
+        :value="formattedValue"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -75,12 +77,12 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="!!textInput.length"
+        :has-length="hasLength"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName"
+        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -92,7 +94,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="$emit('select-change', $event)"
+          @input-change="handleSelectChange"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -134,7 +136,9 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{
+      errorMessage
+    }}</ErrorMessage>
   </Container>
 </template>
 
@@ -205,6 +209,7 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
+    isBorderErrorOnly: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -236,16 +241,17 @@
       showLinearUnitName,
       colorMode,
       showArrowControls,
+      isBorderErrorOnly,
     }) =>
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
         ? '0'
         : slotSize
-        ? isError && !showLinearUnitName
+        ? isError && !showLinearUnitName && !isBorderErrorOnly
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName
+        : isError && !showLinearUnitName && !isBorderErrorOnly
         ? '24px'
         : '5px'};
     border-radius: ${(props) =>
@@ -457,8 +463,18 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
+  const EVENT_TYPES = {
+    INPUT_FOCUS: 'input-focus',
+    INPUT_CHANGE: 'input-change',
+    INPUT_BLUR: 'input-blur',
+    PRESS_ENTER: 'on-enter-click',
+    INPUT_DRAG: 'on-input-drag',
+    SELECT_CHANGE: 'select-change',
+  }
+
   export default {
     name: 'InputNumber',
+    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -698,12 +714,17 @@
         type: Boolean,
         default: false,
       },
+      isBorderErrorOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
-        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
+        inputValue: null,
+        enteredValue: null,
       }
     },
     computed: {
@@ -726,6 +747,14 @@
 
         return item ? item.label : '-'
       },
+      formattedValue() {
+        return this.isFocused
+          ? this.enteredValue
+          : this.formatWithCurrency(this.value)
+      },
+      hasLength() {
+        return this.formattedValue !== null && this.formattedValue.length > 0
+      },
     },
     watch: {
       focus(value) {
@@ -736,30 +765,19 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.textInput = ''
+          this.inputValue = ''
+          this.enteredValue = ''
         }
       },
-    },
-    created() {
-      if (this.value) {
-        this.textInput = numberToString({
-          value: this.value,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.defaultNumber !== null) {
-        this.textInput = numberToString({
-          value: this.defaultNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.minNumber !== null) {
-        this.textInput = numberToString({
-          value: this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      }
+      value: {
+        immediate: true,
+        handler(val) {
+          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
+            this.inputValue = this.value
+            this.enteredValue = Number(this.value.toFixed(this.numberPrecision))
+          }
+        },
+      },
     },
     mounted() {
       if (this.focus) {
@@ -798,32 +816,28 @@
         }
       },
       onEnterPress() {
-        this.$emit('on-enter-click')
+        this.$emit(EVENT_TYPES.PRESS_ENTER)
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(event) {
-        if (isNaN(event) || event === '') {
-          event = this.defaultNumber
+      onChangeHandler(value) {
+        if (isNaN(value) || value === '') {
+          value = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : event
+            : value
         }
         if (!this.allowNegative) {
-          event = Math.abs(event)
-        }
-        if (this.minNumber && this.minNumber > event) {
-          event = this.minNumber
+          value = Math.abs(value)
         }
-        event = parseFloat(event)
+        value = parseFloat(value)
         // Need to return an integer rather than a string
-        this.$emit('input-change', event)
+        return parseFloat(value)
       },
-      onEvaluateCode(event) {
+      onEvaluateCode(value) {
         // function to perform math on the code
         // filter the string in case of any malicious content
-        const val = event.target.value
-        let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
+        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -881,48 +895,32 @@
         return array
       },
       onInput(event) {
-        if (!this.isFocused) {
+        console.log('onInput', event.target.value)
+        this.enteredValue = event.target.value
+        if (!this.isFocused || this.enteredValue === this.inputValue) {
           return
         }
-        if (event.target.value === '') {
-          this.$emit('on-input', '')
-        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(event)
+          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
         } finally {
-          if (evaluatedVal && this.value != evaluatedVal) {
-            this.$emit('on-input', evaluatedVal)
+          this.inputValue = this.onChangeHandler(evaluatedVal)
+
+          if (this.isFocused && typeof this.enteredValue !== 'number') {
+            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
           }
         }
         this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
-        let value = e.target.value
-        let evaluatedInput = this.onEvaluateCode(e)
-        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
-        if ((evaluatedInput && value.length) || this.minNumber !== null) {
-          this.textInput = numberToString({
-            value:
-              evaluatedInput && value.length
-                ? evaluatedInput
-                : this.defaultNumber
-                ? this.defaultNumber
-                : this.minNumber,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals,
-          })
+        if (!Number.isNaN(this.inputValue)) {
+          this.enteredValue = this.inputValue
         }
-        let adjustedMinValue =
-          evaluatedInput && evaluatedInput.length
-            ? evaluatedInput
-            : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
-        this.$emit('input-blur', adjustedMinValue)
+        this.$emit(
+          EVENT_TYPES.INPUT_BLUR,
+          Number(this.onEvaluateCode(String(this.inputValue)))
+        )
       },
       focusInput() {
         if (this.disabled) {
@@ -932,7 +930,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit('input-focus')
+        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
       },
       blurInput() {
         if (this.disabled) {
@@ -952,7 +950,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+        if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -965,6 +963,8 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
+        } else if (this.isFocused) {
+          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -985,14 +985,7 @@
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit('on-input-drag', value)
-
-        this.textInput = numberToString({
-          value: value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-        //this.value=value
+        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
       },
       stopInteract(e) {
         e.preventDefault()
@@ -1000,6 +993,9 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
+      handleSelectChange(value) {
+        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
+      },
     },
   }
 </script>

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

@@ -2,19 +2,18 @@
   <OptionContainer
     :background-color="
       colorMode == 'dark'
-        ? theme.semanticColors.teal[900]
+        ? '#000000'
         : colorMode == 'transparent'
         ? 'black'
         : backgroundColor
     "
-    :color-mode="colorMode"
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
     :disabled-text-color="disabledTextColor"
     :hovered-bg-color="
       colorMode == 'dark'
-        ? theme.semanticColors.teal[800]
+        ? '#000000'
         : colorMode == 'transparent'
         ? 'grey6'
         : hoveredBgColor
@@ -37,7 +36,6 @@
   //   import selectButton from './selectButton'
   //   import selectDropdown from './selectDropDown'
   import styled from 'vue3-styled-components'
-  import theme from '@/assets/theme'
   const optionProps = {
     isDisabled: Boolean,
     hoveredBgColor: String,
@@ -48,7 +46,6 @@
     disabledTextColor: String,
     padding: String,
     textColor: String,
-    colorMode: String,
   }
   const OptionContainer = styled('div', optionProps)`
     display: flex;
@@ -80,8 +77,6 @@
             ? props.theme.colors[props.disabledTextColor]
             : props.disabledTextColor
           : props.theme.colors.grey3
-        : props.colorMode == 'dark'
-        ? props.theme.colors['white']
         : props.theme.colors[props.textColor]
         ? props.theme.colors[props.textColor]
         : props.textColor};
@@ -150,9 +145,7 @@
     },
     emits: ['option-hovered', 'option-selected'],
     data() {
-      return {
-        theme,
-      }
+      return {}
     },
     computed: {},
     methods: {

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

@@ -33,18 +33,8 @@
           :is-active="selectedValue == item.value"
           :primary-color="primaryColor"
           :secondary-color="secondaryColor"
-          :size="size"
           @click="selectItem(item.value)"
         >
-          <OptionIconContainer v-if="item.icon">
-            <RCIcon
-              :color="
-                selectedValue == item.value ? primaryColor : inactiveColor
-              "
-              :name="item.icon"
-              :size="item.iconSize"
-            />
-          </OptionIconContainer>
           {{ item.content }}
         </SwitchOption>
       </SwitchWrapper>
@@ -80,12 +70,6 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import theme from '../../../assets/theme'
-  import RCIcon from '../../icon'
-  const OptionIconContainer = styled.div`
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-  `
   const Container = styled.div``
 
   const flexAttrs = {
@@ -105,6 +89,7 @@
   `
 
   const toggleAttrs = {
+    size: String,
     fontColor: String,
     disabled: Boolean,
     backgroundColor: String,
@@ -120,16 +105,20 @@
 
   const SwitchWrapper = styled('span', toggleAttrs)`
     display: flex;
-    align-items: center
     position: relative;
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    height: ${(props) =>
+      props.size === 'medium'
+        ? '24px'
+        : props.size === 'small'
+        ? '16px'
+        : '24px'};
   `
   const optionAttrs = {
     isActive: Boolean,
     primaryColor: String,
     secondaryColor: String,
     inactiveColor: String,
-    size: String,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -146,13 +135,7 @@
     font-size: 13px;
     line-height: 1;
     text-align: center;
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '24px'
-        : props.size === 'small'
-        ? '16px'
-        : '24px'};
-    padding: 0 10px;
+    padding: 10px;
     margin-right: -1px;
     transition: all 0.1s ease-in-out;
     overflow: hidden;
@@ -186,8 +169,6 @@
       InfoText,
       LabelContainer,
       SwitchOption,
-      OptionIconContainer,
-      RCIcon,
     },
     props: {
       label: {

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

@@ -124,7 +124,6 @@
         : props.size === 'small'
         ? '13px'
         : '16px'};
-    font-weight: 700;
   `
 
   const ToggleWrapper = styled('span', toggleAttrs)`

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = parseFloat(value)
+  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits:

package/src/assets/svgIcons/edit.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.1068 13.2607L2.95525 10.7154C2.97979 10.6418 3.02115 10.5748 3.07603 10.52L11.5353 2.06066C11.7306 1.8654 12.0472 1.8654 12.2424 2.06066L13.9393 3.75756C14.1346 3.95282 14.1346 4.2694 13.9393 4.46466L5.48004 12.924C5.42515 12.9789 5.35824 13.0202 5.2846 13.0448L2.73925 13.8932C2.34837 14.0235 1.9765 13.6516 2.1068 13.2607Z" stroke="black"/>
-</svg>

package/src/assets/svgIcons/legend.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H6V4H2L2 2ZM1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V4C7 4.55228 6.55228 5 6 5H2C1.44772 5 1 4.55228 1 4V2ZM2 7H6V9H2L2 7ZM1 7C1 6.44772 1.44772 6 2 6H6C6.55228 6 7 6.44772 7 7V9C7 9.55228 6.55228 10 6 10H2C1.44772 10 1 9.55228 1 9V7ZM6 12H2L2 14H6V12ZM2 11C1.44772 11 1 11.4477 1 12V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V12C7 11.4477 6.55228 11 6 11H2ZM9.5 2.5C9.22386 2.5 9 2.72386 9 3C9 3.27614 9.22386 3.5 9.5 3.5H14.5C14.7761 3.5 15 3.27614 15 3C15 2.72386 14.7761 2.5 14.5 2.5H9.5ZM9 8C9 7.72386 9.22386 7.5 9.5 7.5H14.5C14.7761 7.5 15 7.72386 15 8C15 8.27614 14.7761 8.5 14.5 8.5H9.5C9.22386 8.5 9 8.27614 9 8ZM9.5 12.5C9.22386 12.5 9 12.7239 9 13C9 13.2761 9.22386 13.5 9.5 13.5H14.5C14.7761 13.5 15 13.2761 15 13C15 12.7239 14.7761 12.5 14.5 12.5H9.5Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/preview.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="M0 1.5C0 0.671573 0.671573 0 1.5 0H3C3.27614 0 3.5 0.223858 3.5 0.5C3.5 0.776142 3.27614 1 3 1H1.5C1.22386 1 1 1.22386 1 1.5V3C1 3.27614 0.776142 3.5 0.5 3.5C0.223858 3.5 0 3.27614 0 3V1.5ZM4.02559 5.17721C3.23749 5.79381 2.68702 6.51738 2.4096 6.92917C2.39111 6.9566 2.37828 6.97568 2.36758 6.99221L2.3632 6.99901L2.36758 7.00581C2.37828 7.02234 2.39112 7.04142 2.4096 7.06885C2.68702 7.48064 3.23749 8.20421 4.02559 8.82081C4.81186 9.43598 5.81038 9.92657 6.99907 9.92657C8.18776 9.92657 9.18628 9.43598 9.97255 8.82081C10.7606 8.20421 11.3111 7.48064 11.5885 7.06885C11.607 7.04142 11.6199 7.02234 11.6306 7.00581L11.6349 6.99901L11.6306 6.99221C11.6199 6.97568 11.607 6.9566 11.5885 6.92917C11.3111 6.51738 10.7606 5.79381 9.97255 5.17721C9.18628 4.56204 8.18776 4.07145 6.99907 4.07145C5.81038 4.07145 4.81186 4.56204 4.02559 5.17721ZM3.40939 4.38962C4.31159 3.68375 5.52122 3.07145 6.99907 3.07145C8.47692 3.07145 9.68655 3.68375 10.5888 4.38962C11.4891 5.09407 12.1075 5.90967 12.4179 6.37043L12.4308 6.38953C12.4917 6.47928 12.5738 6.6004 12.6155 6.77086C12.6496 6.91004 12.6496 7.08798 12.6155 7.22716C12.5738 7.39763 12.4917 7.51874 12.4308 7.60849L12.4179 7.62759C12.1075 8.08835 11.4891 8.90395 10.5888 9.6084C9.68655 10.3143 8.47692 10.9266 6.99907 10.9266C5.52122 10.9266 4.31159 10.3143 3.40939 9.6084C2.509 8.90395 1.89067 8.08835 1.58025 7.62759L1.56733 7.60849C1.50645 7.51874 1.4243 7.39763 1.38262 7.22716C1.34859 7.08798 1.34859 6.91004 1.38262 6.77086C1.4243 6.60039 1.50645 6.47928 1.56733 6.38953L1.58025 6.37043C1.89067 5.90967 2.509 5.09407 3.40939 4.38962ZM6.99907 6.03006C6.37885 6.03006 5.93206 6.49382 5.93206 6.99901C5.93206 7.5042 6.37885 7.96797 6.99907 7.96797C7.61929 7.96797 8.06608 7.5042 8.06608 6.99901C8.06608 6.49382 7.61929 6.03006 6.99907 6.03006ZM4.93206 6.99901C4.93206 5.88164 5.88842 5.03006 6.99907 5.03006C8.10972 5.03006 9.06608 5.88164 9.06608 6.99901C9.06608 8.11638 8.10972 8.96797 6.99907 8.96797C5.88842 8.96797 4.93206 8.11638 4.93206 6.99901ZM12.5 0C13.3284 0 14 0.671573 14 1.5V3C14 3.27614 13.7761 3.5 13.5 3.5C13.2239 3.5 13 3.27614 13 3V1.5C13 1.22386 12.7761 1 12.5 1H11C10.7239 1 10.5 0.776142 10.5 0.5C10.5 0.223858 10.7239 0 11 0H12.5ZM14 12.5C14 13.3284 13.3284 14 12.5 14H11C10.7239 14 10.5 13.7761 10.5 13.5C10.5 13.2239 10.7239 13 11 13H12.5C12.7761 13 13 12.7761 13 12.5V11C13 10.7239 13.2239 10.5 13.5 10.5C13.7761 10.5 14 10.7239 14 11V12.5ZM1.5 14C0.671573 14 0 13.3284 0 12.5V11C0 10.7239 0.223858 10.5 0.5 10.5C0.776142 10.5 1 10.7239 1 11V12.5C1 12.7761 1.22386 13 1.5 13H3C3.27614 13 3.5 13.2239 3.5 13.5C3.5 13.7761 3.27614 14 3 14H1.5Z" fill="#263238"/>
-</svg>

package/src/assets/svgIcons/text_column_one.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 5.75C5 5.33579 5.33579 5 5.75 5H18.25C18.6642 5 19 5.33579 19 5.75C19 6.16421 18.6642 6.5 18.25 6.5H5.75C5.33579 6.5 5 6.16421 5 5.75Z" fill="white"/>
-<path d="M5 9.75C5 9.33579 5.33579 9 5.75 9H18.25C18.6642 9 19 9.33579 19 9.75C19 10.1642 18.6642 10.5 18.25 10.5H5.75C5.33579 10.5 5 10.1642 5 9.75Z" fill="white"/>
-<path d="M5 13.75C5 13.3358 5.33579 13 5.75 13H18.25C18.6642 13 19 13.3358 19 13.75C19 14.1642 18.6642 14.5 18.25 14.5H5.75C5.33579 14.5 5 14.1642 5 13.75Z" fill="white"/>
-<path d="M5 17.75C5 17.3358 5.33579 17 5.75 17H18.25C18.6642 17 19 17.3358 19 17.75C19 18.1642 18.6642 18.5 18.25 18.5H5.75C5.33579 18.5 5 18.1642 5 17.75Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/text_column_three.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 6C3 5.44772 3.44772 5 4 5H7C7.55228 5 8 5.44772 8 6C8 6.55228 7.55228 7 7 7H4C3.44772 7 3 6.55228 3 6Z" fill="#212121"/>
-<path d="M9.58 6C9.58 5.44772 10.0277 5 10.58 5H13.58C14.1323 5 14.58 5.44772 14.58 6C14.58 6.55228 14.1323 7 13.58 7H10.58C10.0277 7 9.58 6.55228 9.58 6Z" fill="#212121"/>
-<path d="M16 6C16 5.44772 16.4477 5 17 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H17C16.4477 7 16 6.55228 16 6Z" fill="#212121"/>
-<path d="M3 10C3 9.44772 3.44772 9 4 9H7C7.55228 9 8 9.44772 8 10C8 10.5523 7.55228 11 7 11H4C3.44772 11 3 10.5523 3 10Z" fill="#212121"/>
-<path d="M9.58 10C9.58 9.44772 10.0277 9 10.58 9H13.58C14.1323 9 14.58 9.44772 14.58 10C14.58 10.5523 14.1323 11 13.58 11H10.58C10.0277 11 9.58 10.5523 9.58 10Z" fill="#212121"/>
-<path d="M16 10C16 9.44772 16.4477 9 17 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H17C16.4477 11 16 10.5523 16 10Z" fill="#212121"/>
-<path d="M3 14C3 13.4477 3.44772 13 4 13H7C7.55228 13 8 13.4477 8 14C8 14.5523 7.55228 15 7 15H4C3.44772 15 3 14.5523 3 14Z" fill="#212121"/>
-<path d="M9.58 14C9.58 13.4477 10.0277 13 10.58 13H13.58C14.1323 13 14.58 13.4477 14.58 14C14.58 14.5523 14.1323 15 13.58 15H10.58C10.0277 15 9.58 14.5523 9.58 14Z" fill="#212121"/>
-<path d="M16 14C16 13.4477 16.4477 13 17 13H20C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15H17C16.4477 15 16 14.5523 16 14Z" fill="#212121"/>
-<path d="M3 18C3 17.4477 3.44772 17 4 17H7C7.55228 17 8 17.4477 8 18C8 18.5523 7.55228 19 7 19H4C3.44772 19 3 18.5523 3 18Z" fill="#212121"/>
-<path d="M9.58 18C9.58 17.4477 10.0277 17 10.58 17H13.58C14.1323 17 14.58 17.4477 14.58 18C14.58 18.5523 14.1323 19 13.58 19H10.58C10.0277 19 9.58 18.5523 9.58 18Z" fill="#212121"/>
-<path d="M16 18C16 17.4477 16.4477 17 17 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H17C16.4477 19 16 18.5523 16 18Z" fill="#212121"/>
-</svg>

package/src/assets/svgIcons/text_column_two.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 6C3 5.44772 3.44772 5 4 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H4C3.44772 7 3 6.55228 3 6Z" fill="white"/>
-<path d="M3 10C3 9.44772 3.44772 9 4 9H10C10.5523 9 11 9.44772 11 10C11 10.5523 10.5523 11 10 11H4C3.44772 11 3 10.5523 3 10Z" fill="white"/>
-<path d="M3 14C3 13.4477 3.44772 13 4 13H10C10.5523 13 11 13.4477 11 14C11 14.5523 10.5523 15 10 15H4C3.44772 15 3 14.5523 3 14Z" fill="white"/>
-<path d="M3 18C3 17.4477 3.44772 17 4 17H10C10.5523 17 11 17.4477 11 18C11 18.5523 10.5523 19 10 19H4C3.44772 19 3 18.5523 3 18Z" fill="white"/>
-<path d="M13 6C13 5.44772 13.4477 5 14 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H14C13.4477 7 13 6.55228 13 6Z" fill="white"/>
-<path d="M13 10C13 9.44772 13.4477 9 14 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H14C13.4477 11 13 10.5523 13 10Z" fill="white"/>
-<path d="M13 14C13 13.4477 13.4477 13 14 13H20C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15H14C13.4477 15 13 14.5523 13 14Z" fill="white"/>
-<path d="M13 18C13 17.4477 13.4477 17 14 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14C13.4477 19 13 18.5523 13 18Z" fill="white"/>
-</svg>