@eturnity/eturnity_reusable_components 1.2.19-EPDM-3412.8 → 1.2.19-EPDM-5295.2

package/src/App.vue

@@ -1,216 +1,254 @@
-<template>
-  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <page-container>
-      <br />
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="10px" alignArrow="right" text="infoText ceci est le text"></info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        :isError="true"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <br />
-      
-  <p>InputText</p>
-   <input-text
-     placeholder="Company name"
-     :value="inputValue"
-     :isError="true"
-     errorMessage="This is my error message"
-     infoTextAlign="right" 
-     infoTextMessage="My info message"
-     label="Question 5"
-     alignItems="vertical"
-     inputWidth="250px"
-     minWidth="100px"
-   />
-   <br/>
-      <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
-    </page-container>
-  </ThemeProvider>
-</template>
-
-<script>
-import { ThemeProvider } from "vue-styled-components"
-import theme from "./assets/theme"
-import styled from "vue-styled-components"
-import MainTable from "@/components/tables/mainTable"
-import ThreeDots from "@/components/threeDots"
-import Toggle from "@/components/inputs/toggle"
-import InputNumber from "@/components/inputs/inputNumber"
-import Checkbox from "@/components/inputs/checkbox"
-import PageSubtitle from "@/components/pageSubtitle"
-import Spinner from "@/components/spinner"
-import ExternalButton from "@/components/buttons/externalButton"
-import InputText from "@/components/inputs/inputText"
-// import TableDropdown from "@/components/tableDropdown"
-const InputAnnexContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 10px;
-`
-
-const PageContainer = styled.div`
-  padding: 40px;
-`
-
-export default {
-  name: 'App',
-  components: {
-    ThemeProvider,
-    PageContainer,
-    InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    InputText,
-    ExternalButton,
-    iconWrapper,
-    Modal,
-  },
-  data() {
-    return {
-      num: 42,
-      inputValue: null,
-      checkedOption: 'button_1',
-      question: {
-        number_format_precision: 4,
-        number_min_allowed: 0,
-        number_max_allowed: 10,
-        unit_short_name: 'cm',
-      },
-      dropdownOpen: false,
-      isChecked: false,
-      listOptions: [
-        {
-          name: 'Option 1',
-          value: 'option_1',
-          disabled: true,
-        },
-        {
-          name: 'Option 2',
-          value: 'option_2',
-        },
-        {
-          name: 'Option 3',
-          value: 'option_3',
-        },
-        {
-          name: 'Option 4',
-          value: 'option_4',
-        },
-      ],
-      itemOptions: [
-        {
-          display_name: 'Test 1',
-          company_item_number: '123',
-          model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1,
-        },
-        {
-          display_name: 'Test 2',
-          company_item_number: '1234',
-          model: 'BTB-123',
-          id: 2,
-        },
-        {
-          display_name: 'Test 3',
-          company_item_number: '12345',
-          model: 'BTB-543',
-          id: 3,
-        },
-        {
-          display_name: 'Test 4',
-          company_item_number: '123456',
-          model: 'BTB-4930',
-          id: 4,
-        },
-      ],
-    }
-  },
-  methods: {
-    keydownHandler(e) {
-      console.log('test', e)
-    },
-    getTheme() {
-      return theme
-    },
-    onInputChange(event) {
-      this.inputValue = event
-    },
-    isDropdownOpen() {
-      return this.dropdownOpen
-    },
-    onClickButton() {
-      console.log('Test')
-    },
-    toggleDropdownOpen() {
-      this.dropdownOpen = !this.dropdownOpen
-    },
-    getDropdownValues() {
-      let items = []
-      items = [
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'display_name',
-          }),
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'company_item_number',
-          }),
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'model',
-          }),
-        },
-      ]
-      return items
-    },
-    getComponentInfo({ row, value }) {
-      let item
-      if (row.selectedValue && row.selectedValue[value]) {
-        item = row.selectedValue[value]
-      } else if (row[value]) {
-        item = row[value]
-      } else {
-        item = '-'
-      }
-      return item
-    }
-  }
-}
-</script>
-
-<style>
-html,
-body {
-  height: 100%;
-  margin: 0;
-}
-</style>
+<template>
+  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
+    <page-container>
+      <br />
+      <modal backdrop="dark" :isLoading="false" :isOpen="false">
+        <main-table titleText="My Table">
+          <thead>
+            <tr>
+              <th>Column 1</th>
+              <th>Column 2</th>
+              <th>Column 3</th>
+              <div />
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <!-- <table-dropdown
+              :colSpan="3"
+              :tableItems="getDropdownValues()"
+              @toggle-dropdown-open="toggleDropdownOpen()"
+              @item-selected="onItemSelected({ item: $event, index })"
+              :isOpen="isDropdownOpen()"
+              :optionItems="itemOptions"
+              :optionsDisplay="['display_name', 'company_item_number', 'model']"
+            /> -->
+              <td>Test</td>
+              <div class="icons-container">
+                <three-dots :options="listOptions" :isLoading="false" />
+              </div>
+            </tr>
+          </tbody>
+        </main-table>
+      </modal>
+      <row-container>
+        <div v-for='(item, index) in markersArray' :key="item.index">
+          <project-marker
+            :activeLanguage="'en-us'"
+            :markerData="item"
+            :isLimitedPartner="false"
+            :isGroupSupport="false"
+            :isEditable="true"
+            :gettext="gettext"
+            :date="'23.07.2022'"
+            @editHandler="consoleLog('edit index ' + index)"
+            @deleteHandler="consoleLog('delete id ' + item.id)"
+          />
+        </div>
+      </row-container>
+      <br />
+      <iconCollection />
+      <br />
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="inputValue"
+        label="My Label Text"
+        infoTextMessage="This is my test message"
+        infoTextAlign="right"
+        labelAlign="right"
+        :disabled="false"
+      />
+      <br />
+      <input-number
+        placeholder="Enter distance"
+        :numberPrecision="2"
+        :value="inputValue"
+        @input-change="onInputChange($event)"
+      />
+      <br />
+      <page-subtitle text="My Subtitle" infoText="My info Text" />
+      <spinner size="30px" />
+      <checkbox
+        label="Do you accept the Terms?"
+        :isChecked="true"
+        size="small"
+        :isDisabled="false"
+      />
+      <external-button text="Click me!" minWidth="500px" />
+    </page-container>
+  </ThemeProvider>
+</template>
+
+<script>
+import { ThemeProvider } from 'vue-styled-components'
+import theme from './assets/theme'
+import styled from 'vue-styled-components'
+import MainTable from '@/components/tables/mainTable'
+import ThreeDots from '@/components/threeDots'
+import Toggle from '@/components/inputs/toggle'
+import InputNumber from '@/components/inputs/inputNumber'
+import Checkbox from '@/components/inputs/checkbox'
+import PageSubtitle from '@/components/pageSubtitle'
+import Spinner from '@/components/spinner'
+import ExternalButton from '@/components/buttons/externalButton'
+import ProjectMarker from '@/components/projectMarker'
+import iconCollection from '@/components/icon/iconCollection'
+import Modal from '@/components/modals/modal'
+// import TableDropdown from "@/components/tableDropdown"
+
+const PageContainer = styled.div`
+  padding: 40px;
+`
+
+const RowContainer = styled.div`
+  display: inline-flex;
+  gap: 10px;
+  flex-wrap: wrap;
+`
+
+export default {
+  name: 'App',
+  components: {
+    ThemeProvider,
+    PageContainer,
+    MainTable,
+    ThreeDots,
+    Toggle,
+    InputNumber,
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    ExternalButton,
+    Modal,
+    ProjectMarker,
+    iconCollection,
+    RowContainer
+  },
+  data() {
+    return {
+      inputValue: null,
+      checkedOption: 'button_1',
+      question: {
+        number_format_precision: 4,
+        number_min_allowed: 0,
+        number_max_allowed: 10,
+        unit_short_name: 'cm',
+      },
+      dropdownOpen: false,
+      isChecked: false,
+      listOptions: [
+        {
+          name: 'Option 1',
+          value: 'option_1',
+          disabled: true,
+        },
+        {
+          name: 'Option 2',
+          value: 'option_2',
+        },
+        {
+          name: 'Option 3',
+          value: 'option_3',
+        },
+        {
+          name: 'Option 4',
+          value: 'option_4',
+        },
+      ],
+      itemOptions: [
+        {
+          display_name: 'Test 1',
+          company_item_number: '123',
+          model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
+          id: 1,
+        },
+        {
+          display_name: 'Test 2',
+          company_item_number: '1234',
+          model: 'BTB-123',
+          id: 2,
+        },
+        {
+          display_name: 'Test 3',
+          company_item_number: '12345',
+          model: 'BTB-543',
+          id: 3,
+        },
+        {
+          display_name: 'Test 4',
+          company_item_number: '123456',
+          model: 'BTB-4930',
+          id: 4,
+        },
+      ],
+      markersArray: [{"id":1180,"choice":"project-on-hold","translations":{"fr":{"name":"fr - Project on hold"},"en-us":{"name":"Project on hold"},"it-ch":{"name":"it-ch - Project on hold"},"de-ch":{"name":"de-ch - Project on hold"},"fr-be":{"name":"fr-be - Project on hold"}},"color":"#D27CCA","can_be_deleted":true}, {"id":266,"choice":"transferred","translations":{"en-us":{"name":"Transferred"},"fr":{"name":"fr - Transferred"},"de-ch":{"name":"de-ch - Transferred"},"it-ch":{"name":"it-ch - Transferred"},"fr-be":{"name":"fr-be - Transferred"}},"color":"#20A4CA","can_be_deleted":false},{"id":267,"choice":"sold","translations":{"en-us":{"name":"Sold"},"fr":{"name":"Vendu"},"de-ch":{"name":"Verkauft"},"it-ch":{"name":"Venduto"},"fr-be":{"name":"Vendu"}},"color":"#008351","can_be_deleted":false},{"id":268,"choice":"lost","translations":{"en-us":{"name":"Lost"},"fr":{"name":"Perdu"},"de-ch":{"name":"Verloren"},"it-ch":{"name":"Perso"},"fr-be":{"name":"Perdu"}},"color":"#A52019","can_be_deleted":false},{"id":1181,"choice":"project-created","translations":{"fr":{"name":"Project created"},"en-us":{"name":"Project created"},"it-ch":{"name":"Project created"},"de-ch":{"name":"Project created"},"fr-be":{"name":"Project created"}},"color":"#FDB813","can_be_deleted":true}]
+    }
+  },
+  methods: {
+    consoleLog(data) {
+      console.log(data)
+    },
+    gettext(string) {
+      return string.toUpperCase()
+    },
+    getTheme() {
+      return theme
+    },
+    onInputChange(event) {
+      this.inputValue = event
+    },
+    isDropdownOpen() {
+      return this.dropdownOpen
+    },
+    onClickButton() {
+      console.log('Test')
+    },
+    toggleDropdownOpen() {
+      this.dropdownOpen = !this.dropdownOpen
+    },
+    getDropdownValues() {
+      let items = []
+      items = [
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'display_name',
+          }),
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'company_item_number',
+          }),
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'model',
+          }),
+        },
+      ]
+      return items
+    },
+    getComponentInfo({ row, value }) {
+      let item
+      if (row.selectedValue && row.selectedValue[value]) {
+        item = row.selectedValue[value]
+      } else if (row[value]) {
+        item = row[value]
+      } else {
+        item = '-'
+      }
+      return item
+    },
+  },
+}
+</script>
+
+<style>
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+</style>

package/src/assets/icons/arrow_down.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
+</svg>

package/src/assets/icons/arrow_up_red.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
+</svg>

package/src/assets/icons/black_spinner.svg

@@ -1,36 +1,36 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<g transform="rotate(0 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(45 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(90 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(135 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(180 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(225 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(270 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(315 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
-  </rect>
-</g>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(45 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(135 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(225 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(315 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
 <!-- [ldio] generated by https://loading.io/ --></svg>

package/src/assets/icons/delete_icon.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #ff5656;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ff5656;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/delete_icon_gray.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #DEE2EB;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #DEE2EB;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/drag_icon.svg

@@ -1,8 +1,8 @@
-<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 2C4 3.10457 3.10457 4 2 4C0.89543 4 0 3.10457 0 2C0 0.89543 0.89543 0 2 0C3.10457 0 4 0.89543 4 2Z" fill="#B2B9C5"/>
-<path d="M10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2Z" fill="#B2B9C5"/>
-<path d="M4 8C4 9.10457 3.10457 10 2 10C0.89543 10 0 9.10457 0 8C0 6.89543 0.89543 6 2 6C3.10457 6 4 6.89543 4 8Z" fill="#B2B9C5"/>
-<path d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z" fill="#B2B9C5"/>
-<path d="M4 14C4 15.1046 3.10457 16 2 16C0.89543 16 0 15.1046 0 14C0 12.8954 0.89543 12 2 12C3.10457 12 4 12.8954 4 14Z" fill="#B2B9C5"/>
-<path d="M10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z" fill="#B2B9C5"/>
-</svg>
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2C4 3.10457 3.10457 4 2 4C0.89543 4 0 3.10457 0 2C0 0.89543 0.89543 0 2 0C3.10457 0 4 0.89543 4 2Z" fill="#B2B9C5"/>
+<path d="M10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2Z" fill="#B2B9C5"/>
+<path d="M4 8C4 9.10457 3.10457 10 2 10C0.89543 10 0 9.10457 0 8C0 6.89543 0.89543 6 2 6C3.10457 6 4 6.89543 4 8Z" fill="#B2B9C5"/>
+<path d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z" fill="#B2B9C5"/>
+<path d="M4 14C4 15.1046 3.10457 16 2 16C0.89543 16 0 15.1046 0 14C0 12.8954 0.89543 12 2 12C3.10457 12 4 12.8954 4 14Z" fill="#B2B9C5"/>
+<path d="M10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z" fill="#B2B9C5"/>
+</svg>