@eturnity/eturnity_reusable_components 7.8.1-EPDM-8441.1 → 7.8.1-EPDM-9696.1

package/src/App.vue

@@ -1,247 +1,246 @@
-<template>
-  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <page-container>
-      <br />
-      <input-number
-        :value="value"
-        :minNumber="0"
-        unitName="mm"
-        :numberPrecision="0"
-        backgroundColor="transparent"
-        borderColor="eturnityGrey"
-        inputHeight="34px"
-        inputWidth="420px"
-        textAlign="left"
-        :isInteractive="true"
-        :interactionStep="1"
-        @on-input="value = $event"
-        @input-change="changeHandler"
-        @input-focus="focusHandler"
-        @input-blur="blurHandler"
-      >
-        <template v-slot:label>
-          <div>Interactive Label</div>
-        </template>
-      </input-number>
-
-      <dropdown-component openingMode="hover" gap="30px">
-        <template #trigger><i>Click Me</i></template>
-        <template #dropdown>
-          <div>
-            <a href="">test1</a>
-            <button href="">test2</button>
-            <br />
-            <p>Text</p>
-          </div>
-        </template>
-      </dropdown-component>
-
-      <videoThumbnail
-        src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-        playIconColor="red"
-        playIconSize="20px"
-        width="400px"
-        height="600px"
-      />
-
-      <SwitchField
-        @on-switch-change="onInputChange($event)"
-        :options="[
-          { value: 0, content: 'zero' },
-          { value: 1, content: 'one' },
-          { value: 2, content: 'two' }
-        ]"
-        :value="value"
-        label="label"
-        toggleColor="red"
-        size="large"
-        backgroundColor="blue"
-        labelAlign="left"
-        fontColor="black"
-        :disabled="false"
-      />
-      <icon
-        name="opacity"
-        color="red"
-        hoveredColor="blue"
-        size="60px"
-        cursor="default"
-        isStriked="true"
-      />
-      <Select
-        :value="value"
-        selectWidth="100%"
-        optionWidth="50%"
-        label="that is a label"
-        alignItems="vertical"
-        colorMode="dark"
-        isSearchable="true"
-        @input-change="value = $event"
-        @search-change="searchValue = $event"
-      >
-        <template #selector="{ selectedValue }">
-          value selected: {{ selectedValue }}
-        </template>
-        <template #dropdown>
-          <Option
-            v-for="opt in filteredOptionList"
-            :key="opt.id"
-            :value="opt.val"
-            >{{ opt.lookFor }}
-          </Option>
-        </template>
-      </Select>
-
-      {{ filteredOptionList }}
-
-      <iconCollection color="red" />
-    </page-container>
-  </ThemeProvider>
-</template>
-
-<script>
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-import InputNumber from '@/components/inputs/inputNumber'
-import Select from '@/components/inputs/select'
-import SwitchField from '@/components/inputs/switchField'
-import Option from '@/components/inputs/select/option'
-import iconCollection from '@/components/icon/iconCollection'
-import dropdownComponent from '@/components/dropdown'
-import videoThumbnail from '@/components/videoThumbnail'
-import icon from '@/components/icon'
-// import infoCard from '@/components/infoCard'
-// 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,
-    InputNumber,
-    Option,
-    Select,
-    SwitchField,
-    iconCollection,
-    dropdownComponent,
-    videoThumbnail,
-    icon
-    // infoCard
-  },
-  data() {
-    return {
-      value: 42,
-      value2: 42,
-      companyName: 'toto',
-      optionList: [
-        { id: 'a', val: 'A', lookFor: 'babababa' },
-        { id: 'b', val: 'B', lookFor: 'abab' },
-        { id: 'c', val: 'C', lookFor: 'ccc' },
-        { id: 'd', val: 'D', lookFor: 'ddd' },
-        { id: 'e', val: 'E', lookFor: 'dddee' },
-        { id: 'f', val: 'F', lookFor: 'ddfff' },
-        { id: 'g', val: 'G', lookFor: 'dggg' },
-        { id: 'h', val: 'H', lookFor: 'dddhhh' }
-      ],
-      searchValue: ''
-    }
-  },
-  computed: {
-    filteredOptionList() {
-      return this.optionList.filter((opt) =>
-        opt.lookFor.includes(this.searchValue)
-      )
-    }
-  },
-  methods: {
-    blurHandler(e) {
-      console.log('blur', e)
-    },
-    changeHandler(e) {
-      console.log('change', e)
-    },
-    focusHandler(e) {
-      console.log('focus', e)
-    },
-    inputHandler(e) {
-      this.value2 = e
-      console.log('input', e)
-    },
-    keydownHandler(e) {
-      console.log('test', e)
-    },
-    getTheme() {
-      return theme
-    },
-    onInputChange(event) {
-      this.inputValue = event
-    },
-    onInputBlur(event) {
-      console.log(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 />
+      <input-number
+        :value="value"
+        :minNumber="0"
+        unitName="mm"
+        :numberPrecision="0"
+        backgroundColor="transparent"
+        borderColor="eturnityGrey"
+        inputHeight="34px"
+        inputWidth="420px"
+        textAlign="left"
+        :isInteractive="true"
+        :interactionStep="1"
+        @on-input="value = $event"
+        @input-change="changeHandler"
+        @input-focus="focusHandler"
+        @input-blur="blurHandler"
+      >
+        <template v-slot:label>
+          <div>Interactive Label</div>
+        </template>
+      </input-number>
+
+      <dropdown-component openingMode="hover" gap="30px">
+        <template #trigger><i>Click Me</i></template>
+        <template #dropdown>
+          <div>
+            <a href="">test1</a>
+            <button href="">test2</button>
+            <br />
+            <p>Text</p>
+          </div>
+        </template>
+      </dropdown-component>
+
+      <videoThumbnail
+        src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
+        playIconColor="red"
+        playIconSize="20px"
+        width="400px"
+        height="600px"
+      />
+
+      <SwitchField
+        @on-switch-change="onInputChange($event)"
+        :options="[
+          { value: 0, content: 'zero' },
+          { value: 1, content: 'one' },
+          { value: 2, content: 'two' }
+        ]"
+        :value="value"
+        label="label"
+        toggleColor="red"
+        size="large"
+        backgroundColor="blue"
+        labelAlign="left"
+        fontColor="black"
+        :disabled="false"
+      />
+      <icon
+        name="opacity"
+        color="red"
+        hoveredColor="blue"
+        size="60px"
+        cursor="default"
+        isStriked="true"
+      />
+      <Select
+        :value="value"
+        selectWidth="100%"
+        optionWidth="50%"
+        label="that is a label"
+        alignItems="vertical"
+        colorMode="dark"
+        isSearchable="true"
+        @input-change="value = $event"
+        @search-change="searchValue = $event"
+      >
+        <template #selector="{ selectedValue }">
+          value selected: {{ selectedValue }}
+        </template>
+        <template #dropdown>
+          <Option
+            v-for="opt in filteredOptionList"
+            :key="opt.id"
+            :value="opt.val"
+            >{{ opt.lookFor }}
+          </Option>
+        </template>
+      </Select>
+
+      {{ filteredOptionList }}
+
+      <iconCollection color="red" />
+    </page-container>
+  </ThemeProvider>
+</template>
+
+<script>
+import { ThemeProvider } from 'vue-styled-components'
+import theme from './assets/theme'
+import styled from 'vue-styled-components'
+import InputNumber from '@/components/inputs/inputNumber'
+import Select from '@/components/inputs/select'
+import SwitchField from '@/components/inputs/switchField'
+import Option from '@/components/inputs/select/option'
+import iconCollection from '@/components/icon/iconCollection'
+import dropdownComponent from '@/components/dropdown'
+import videoThumbnail from '@/components/videoThumbnail'
+import icon from '@/components/icon'
+// import infoCard from '@/components/infoCard'
+// 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,
+    InputNumber,
+    Option,
+    Select,
+    SwitchField,
+    iconCollection,
+    dropdownComponent,
+    videoThumbnail,
+    icon,
+  },
+  data() {
+    return {
+      value: 42,
+      value2: 42,
+      companyName: 'toto',
+      optionList: [
+        { id: 'a', val: 'A', lookFor: 'babababa' },
+        { id: 'b', val: 'B', lookFor: 'abab' },
+        { id: 'c', val: 'C', lookFor: 'ccc' },
+        { id: 'd', val: 'D', lookFor: 'ddd' },
+        { id: 'e', val: 'E', lookFor: 'dddee' },
+        { id: 'f', val: 'F', lookFor: 'ddfff' },
+        { id: 'g', val: 'G', lookFor: 'dggg' },
+        { id: 'h', val: 'H', lookFor: 'dddhhh' }
+      ],
+      searchValue: ''
+    }
+  },
+  computed: {
+    filteredOptionList() {
+      return this.optionList.filter((opt) =>
+        opt.lookFor.includes(this.searchValue)
+      )
+    }
+  },
+  methods: {
+    blurHandler(e) {
+      console.log('blur', e)
+    },
+    changeHandler(e) {
+      console.log('change', e)
+    },
+    focusHandler(e) {
+      console.log('focus', e)
+    },
+    inputHandler(e) {
+      this.value2 = e
+      console.log('input', e)
+    },
+    keydownHandler(e) {
+      console.log('test', e)
+    },
+    getTheme() {
+      return theme
+    },
+    onInputChange(event) {
+      this.inputValue = event
+    },
+    onInputBlur(event) {
+      console.log(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>