@piserve-tech/octa-form-builder-webcomponent 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/README.md +109 -0
  2. package/copy-assets.js +47 -0
  3. package/dist/assets/fonts/Garamond.woff2 +0 -0
  4. package/dist/assets/fonts/Georgia.woff2 +0 -0
  5. package/dist/assets/fonts/Poppins.woff2 +0 -0
  6. package/dist/assets/fonts/Tahoma.woff2 +0 -0
  7. package/dist/assets/fonts/Tajawal.woff2 +0 -0
  8. package/dist/assets/fonts/Verdana.woff2 +0 -0
  9. package/dist/assets/icons/add-criteria-icon.svg +5 -0
  10. package/dist/assets/icons/add-hint-icon.svg +7 -0
  11. package/dist/assets/icons/add-outline-icon.svg +5 -0
  12. package/dist/assets/icons/add-page-icon.svg +5 -0
  13. package/dist/assets/icons/add-question-icon.svg +7 -0
  14. package/dist/assets/icons/aggregate-icon.svg +7 -0
  15. package/dist/assets/icons/back-btn.svg +9 -0
  16. package/dist/assets/icons/cdk-drag-icon.svg +8 -0
  17. package/dist/assets/icons/checkbox-icon.svg +7 -0
  18. package/dist/assets/icons/circle-icon.svg +7 -0
  19. package/dist/assets/icons/circle-outline-icon.svg +8 -0
  20. package/dist/assets/icons/close-icon.svg +4 -0
  21. package/dist/assets/icons/close-sidebar-mark-icon.svg +4 -0
  22. package/dist/assets/icons/close-toggle-icon.svg +4 -0
  23. package/dist/assets/icons/color-picker-icon.svg +18 -0
  24. package/dist/assets/icons/copy-icon.svg +5 -0
  25. package/dist/assets/icons/cross-mark.svg +5 -0
  26. package/dist/assets/icons/currency-icon.svg +7 -0
  27. package/dist/assets/icons/dark-rect-icon.svg +4 -0
  28. package/dist/assets/icons/date-time-icon.svg +49 -0
  29. package/dist/assets/icons/delete-icon.svg +8 -0
  30. package/dist/assets/icons/delete-no-outline-icon.svg +8 -0
  31. package/dist/assets/icons/diamond-icon.svg +5 -0
  32. package/dist/assets/icons/down-arrow-blue-icon.svg +3 -0
  33. package/dist/assets/icons/down-arrow-gray-icon.svg +4 -0
  34. package/dist/assets/icons/down-arrow-white-icon.svg +4 -0
  35. package/dist/assets/icons/drag_icon.png +0 -0
  36. package/dist/assets/icons/dropdown-icon.svg +4 -0
  37. package/dist/assets/icons/edit-icon.svg +5 -0
  38. package/dist/assets/icons/emitter-icon.svg +7 -0
  39. package/dist/assets/icons/field-add-icon.svg +6 -0
  40. package/dist/assets/icons/file-picker-icon.svg +4 -0
  41. package/dist/assets/icons/flower-rect-icon.svg +11 -0
  42. package/dist/assets/icons/grid_icon.png +0 -0
  43. package/dist/assets/icons/hint-icon.svg +6 -0
  44. package/dist/assets/icons/lang-icon.svg +14 -0
  45. package/dist/assets/icons/location-icon.svg +5 -0
  46. package/dist/assets/icons/mail-icon.svg +9 -0
  47. package/dist/assets/icons/mobile-icon.svg +6 -0
  48. package/dist/assets/icons/multi-fields-icon.svg +6 -0
  49. package/dist/assets/icons/multi-icon.svg +6 -0
  50. package/dist/assets/icons/number-icon.svg +10 -0
  51. package/dist/assets/icons/open-toggle-icon.svg +3 -0
  52. package/dist/assets/icons/password-icon.svg +16 -0
  53. package/dist/assets/icons/pen-icon.svg +5 -0
  54. package/dist/assets/icons/pencil-icon.svg +5 -0
  55. package/dist/assets/icons/pencil-rect-icon.svg +5 -0
  56. package/dist/assets/icons/publish.svg +14 -0
  57. package/dist/assets/icons/radio-button-icon.svg +8 -0
  58. package/dist/assets/icons/rect-outline-icon.svg +5 -0
  59. package/dist/assets/icons/rich-text-editor-icon.svg +16 -0
  60. package/dist/assets/icons/right-arrow-icon.svg +10 -0
  61. package/dist/assets/icons/right-arrow-outline-icon.svg +9 -0
  62. package/dist/assets/icons/selection-matrix-icon.svg +13 -0
  63. package/dist/assets/icons/settings-icon.svg +8 -0
  64. package/dist/assets/icons/signature-icon.svg +6 -0
  65. package/dist/assets/icons/single-icon.svg +5 -0
  66. package/dist/assets/icons/slider-icon.svg +6 -0
  67. package/dist/assets/icons/slider-round-icon.svg +4 -0
  68. package/dist/assets/icons/star-icon.svg +7 -0
  69. package/dist/assets/icons/terms-and-conditions-icon.svg +8 -0
  70. package/dist/assets/icons/text-area-icon.svg +14 -0
  71. package/dist/assets/icons/text-box-icon.svg +14 -0
  72. package/dist/assets/icons/text-field-icon.svg +13 -0
  73. package/dist/assets/icons/tick.svg +5 -0
  74. package/dist/assets/icons/toggle-switch-icon.svg +12 -0
  75. package/dist/assets/icons/up-arrow-icon.svg +3 -0
  76. package/dist/assets/icons/upArrow.png +0 -0
  77. package/dist/assets/icons/url-icon.svg +10 -0
  78. package/dist/assets/icons/webhook-icon.svg +9 -0
  79. package/dist/bundle.css +18 -0
  80. package/dist/bundle.js +4 -0
  81. package/package.json +83 -0
package/README.md ADDED
@@ -0,0 +1,109 @@
1
+ ## Using the Form Builder Web Component from npm
2
+
3
+ 1. Install the npm package:
4
+ ```sh
5
+ npm install @piserve-tech/form-builder-webcomponent
6
+ ```
7
+
8
+ 2. Add the following to your `src/index.html` inside the `<head>` tag:
9
+ ```html
10
+ <link rel="stylesheet" href="node_modules/@piserve-tech/form-builder-webcomponent/dist/bundle.css">
11
+ <script src="node_modules/@piserve-tech/form-builder-webcomponent/dist/bundle.js"></script>
12
+ ```
13
+
14
+ 3. Copy the assets to your project (run after install):
15
+ ```sh
16
+ node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js
17
+ ```
18
+ This will copy all required assets to `src/assets/form-builder-webcomponent`.
19
+
20
+ 4. Use the web component in your Angular templates:
21
+ ```html
22
+ <form-builder-element></form-builder-element>
23
+ ```
24
+
25
+ 5. Make sure your `AppModule` includes `CUSTOM_ELEMENTS_SCHEMA`:
26
+ ```typescript
27
+ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
28
+ // ...existing code...
29
+ @NgModule({
30
+ // ...existing code...
31
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
32
+ })
33
+ export class AppModule {}
34
+ ```
35
+
36
+ No Angular imports are needed from the npm package. The web component is loaded globally via the script tag.
37
+ # AngularFormBuilderComponent
38
+
39
+ This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.8.
40
+
41
+ ## Development server
42
+
43
+ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
44
+
45
+ ## Code scaffolding
46
+
47
+ Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
48
+
49
+ ## Build
50
+
51
+ Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
52
+
53
+ ## Running unit tests
54
+
55
+ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
56
+
57
+ ## Running end-to-end tests
58
+
59
+ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
60
+
61
+ ## Further help
62
+
63
+ To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
64
+
65
+
66
+ ## Form Builder Library
67
+
68
+ Created a library named formBuilder inside the form builder component project.
69
+
70
+ ### Asset Management
71
+
72
+ To avoid overwriting existing assets, all library assets (icons, fonts, etc.) are copied to a dedicated folder: `src/assets/form-builder-webcomponent`.
73
+
74
+ After installing the library, run the following command to copy assets:
75
+
76
+ ```
77
+ node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js
78
+ ```
79
+
80
+ This will copy all assets from the library's npm package to your app's `src/assets/form-builder-webcomponent` folder.
81
+
82
+ You can add this command to your project's `postinstall` script for automation:
83
+
84
+ ```
85
+ "scripts": {
86
+ "postinstall": "node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js"
87
+ }
88
+ ```
89
+
90
+ ### Library Usage
91
+
92
+ Inside the library we have created modules and components for the layout design and also a service folder for the API services.
93
+
94
+ To export a service from the library for accessing it in installed projects, specify the path of the service in the library's package.json file.
95
+
96
+ If any changes are made to the library, build it using:
97
+
98
+ ```
99
+ ng build formBuilder
100
+ ```
101
+
102
+ After building, update the version of the library in the package.json file of the library.
103
+
104
+ To publish the library, open a terminal from the formBuilder folder inside the dist folder and use:
105
+
106
+ ```
107
+ npm publish
108
+ ```
109
+ to publish it to the npm registry.
package/copy-assets.js ADDED
@@ -0,0 +1,47 @@
1
+ // Script to copy assets for web component distribution
2
+ const fs = require('fs');
3
+ const path = require('path');
4
+
5
+ function copyRecursiveSync(src, dest) {
6
+ if (!fs.existsSync(src)) return;
7
+ const stats = fs.statSync(src);
8
+ if (stats.isDirectory()) {
9
+ if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
10
+ fs.readdirSync(src).forEach(child => {
11
+ copyRecursiveSync(path.join(src, child), path.join(dest, child));
12
+ });
13
+ } else {
14
+ fs.copyFileSync(src, dest);
15
+ }
16
+ }
17
+
18
+
19
+ // Determine source: local dist or node_modules
20
+ let srcAssets, srcBundleJs, srcBundleCss;
21
+ if (fs.existsSync(path.join(__dirname, 'dist', 'assets'))) {
22
+ srcAssets = path.join(__dirname, 'dist', 'assets');
23
+ srcBundleJs = path.join(__dirname, 'dist', 'bundle.js');
24
+ srcBundleCss = path.join(__dirname, 'dist', 'bundle.css');
25
+ } else {
26
+ srcAssets = path.join(__dirname, 'node_modules', '@piserve-tech', 'form-builder-webcomponent', 'dist', 'assets');
27
+ srcBundleJs = path.join(__dirname, 'node_modules', '@piserve-tech', 'form-builder-webcomponent', 'dist', 'bundle.js');
28
+ srcBundleCss = path.join(__dirname, 'node_modules', '@piserve-tech', 'form-builder-webcomponent', 'dist', 'bundle.css');
29
+ }
30
+ const destAssets = path.join(process.cwd(), 'src', 'assets', 'form-builder-webcomponent');
31
+
32
+ copyRecursiveSync(srcAssets, destAssets);
33
+
34
+ // Also copy bundle.js and bundle.css
35
+ const destBundleJs = path.join(destAssets, 'bundle.js');
36
+ const destBundleCss = path.join(destAssets, 'bundle.css');
37
+
38
+ if (fs.existsSync(srcBundleJs)) {
39
+ fs.copyFileSync(srcBundleJs, destBundleJs);
40
+ console.log('bundle.js copied to src/assets/form-builder-webcomponent');
41
+ }
42
+ if (fs.existsSync(srcBundleCss)) {
43
+ fs.copyFileSync(srcBundleCss, destBundleCss);
44
+ console.log('bundle.css copied to src/assets/form-builder-webcomponent');
45
+ }
46
+
47
+ console.log('Assets and bundles copied to src/assets/form-builder-webcomponent');
package/dist/assets/fonts/Garamond.woff2 ADDED
Binary file
package/dist/assets/fonts/Georgia.woff2 ADDED
Binary file
package/dist/assets/fonts/Poppins.woff2 ADDED
Binary file
package/dist/assets/fonts/Tahoma.woff2 ADDED
Binary file
package/dist/assets/fonts/Tajawal.woff2 ADDED
Binary file
package/dist/assets/fonts/Verdana.woff2 ADDED
Binary file
package/dist/assets/icons/add-criteria-icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg fill="none" class="icon-field-add" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M17 18H3C1.895 18 1 17.1547 1 16.1111V2.88889C1 1.84528 1.895 1 3 1H17C18.105 1 19 1.84528 19 2.88889V16.1111C19 17.1547 18.105 18 17 18Z" stroke="#D8D8D8"/>
3
+ <path d="M7 10H13" stroke="#084FFF"/>
4
+ <path d="M10 7V13" stroke="#084FFF"/>
5
+ </svg>
package/dist/assets/icons/add-hint-icon.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg height="35" width="35" fill="none" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="0.5" y="0.5" width="37" height="35" rx="5.5" fill="white" stroke="#D8D8D8"/>
3
+ <path stroke="#084FFF" fill-rule="evenodd" clip-rule="evenodd" d="M19.5 9.875V9.875C24.2639 9.875 28.125 13.7361 28.125 18.5V18.5C28.125 23.2639 24.2639 27.125 19.5 27.125V27.125C14.7361 27.125 10.875 23.2639 10.875 18.5V18.5C10.875 13.7361 14.7361 9.875 19.5 9.875Z"/>
4
+ <path stroke="#084FFF" d="M19.4997 21.8542V17.0625"/>
5
+ <path stroke="#084FFF" d="M19.4987 14.6666C19.3665 14.6666 19.2591 14.7739 19.2601 14.9062C19.2601 15.0384 19.3674 15.1458 19.4997 15.1458C19.6319 15.1458 19.7393 15.0384 19.7393 14.9062C19.7393 14.7739 19.6319 14.6666 19.4987 14.6666"/>
6
+ </svg>
7
+
package/dist/assets/icons/add-outline-icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M17 18H3C1.895 18 1 17.1547 1 16.1111V2.88889C1 1.84528 1.895 1 3 1H17C18.105 1 19 1.84528 19 2.88889V16.1111C19 17.1547 18.105 18 17 18Z" stroke="#D8D8D8" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M7 10H13" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M10 7V13" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>
package/dist/assets/icons/add-page-icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M17 18H3C1.895 18 1 17.1547 1 16.1111V2.88889C1 1.84528 1.895 1 3 1H17C18.105 1 19 1.84528 19 2.88889V16.1111C19 17.1547 18.105 18 17 18Z" stroke="#D8D8D8"/>
3
+ <path d="M7 10H13" stroke="#084FFF" />
4
+ <path d="M10 7V13" stroke="#084FFF" />
5
+ </svg>
package/dist/assets/icons/add-question-icon.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg fill="none" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd"
3
+ d="M17 18H3C1.895 18 1 17.1547 1 16.1111V2.88889C1 1.84528 1.895 1 3 1H17C18.105 1 19 1.84528 19 2.88889V16.1111C19 17.1547 18.105 18 17 18Z"
4
+ stroke="#D8D8D8"/>
5
+ <path d="M7 10H13" stroke="#084FFF"/>
6
+ <path d="M10 7V13" stroke="#084FFF"/>
7
+ </svg>
package/dist/assets/icons/aggregate-icon.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M9.5625 16.875H17.4375" stroke="#C37272" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M9.5625 13.5H17.4375" stroke="#C37272" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M9.5625 10.125H17.4375" stroke="#C37272" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M20.25 22.5H6.75C5.50687 22.5 4.5 21.4931 4.5 20.25V6.75C4.5 5.50687 5.50687 4.5 6.75 4.5H20.25C21.4931 4.5 22.5 5.50687 22.5 6.75V20.25C22.5 21.4931 21.4931 22.5 20.25 22.5Z" stroke="#C37272" stroke-linecap="round" stroke-linejoin="round"/>
6
+ </svg>
7
+
package/dist/assets/icons/back-btn.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg width="60" height="51" viewBox="0 0 60 51" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <mask id="mask0_21227_49867" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="8" width="40" height="35">
3
+ <rect x="50" y="42.5" width="40" height="34" transform="rotate(-180 50 42.5)" fill="#D9D9D9"/>
4
+ </mask>
5
+ <g mask="url(#mask0_21227_49867)">
6
+ <path d="M27.916 18.0626C28.2773 18.3698 28.458 18.7239 28.458 19.1251C28.458 19.5263 28.2773 19.8805 27.916 20.1876L23.416 24.0126L41.584 24.0126C42.056 24.0126 42.4653 24.16 42.812 24.4546C43.16 24.7504 43.334 25.0989 43.334 25.5001C43.334 25.9013 43.16 26.2498 42.812 26.5456C42.4653 26.8403 42.056 26.9876 41.584 26.9876L23.416 26.9876L27.958 30.8483C28.2913 31.1317 28.458 31.4739 28.458 31.8751C28.458 32.2763 28.2773 32.6305 27.916 32.9376C27.5827 33.221 27.18 33.3683 26.708 33.3796C26.236 33.3921 25.8193 33.2448 25.458 32.9376L17.958 26.5626C17.7633 26.3972 17.6246 26.226 17.542 26.0492C17.458 25.8724 17.416 25.6894 17.416 25.5001C17.416 25.3109 17.458 25.1278 17.542 24.951C17.6246 24.7742 17.7633 24.6031 17.958 24.4376L25.5 18.0269C25.8613 17.7198 26.2713 17.5781 26.73 17.6019C27.1873 17.6257 27.5827 17.7793 27.916 18.0626Z" fill="black"/>
7
+ </g>
8
+ </svg>
9
+
package/dist/assets/icons/cdk-drag-icon.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg viewBox="0 0 12 19" xmlns="http://www.w3.org/2000/svg">
2
+ <ellipse cx="1.76016" cy="1.84615" rx="1.76016" ry="1.84615" fill="#808080"/>
3
+ <ellipse cx="1.76016" cy="9.23092" rx="1.76016" ry="1.84615" fill="#808080"/>
4
+ <ellipse cx="1.76016" cy="16.6157" rx="1.76016" ry="1.84615" fill="#808080"/>
5
+ <ellipse cx="9.68057" cy="1.84615" rx="1.76016" ry="1.84615" fill="#808080"/>
6
+ <ellipse cx="9.68057" cy="9.23092" rx="1.76016" ry="1.84615" fill="#808080"/>
7
+ <ellipse cx="9.68057" cy="16.6157" rx="1.76016" ry="1.84615" fill="#808080"/>
8
+ </svg>
package/dist/assets/icons/checkbox-icon.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg fill="none" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 14.2928H16" stroke="#61DBFB" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M8 17.3358H16" stroke="#61DBFB" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M11.5 10.2299L10 8.70703" stroke="#61DBFB" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M14 7.69141L11.5 10.2296" stroke="#61DBFB" stroke-linecap="round" stroke-linejoin="round"/>
6
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19 21.3998H5C3.895 21.3998 3 20.4911 3 19.3693V5.15553C3 4.03366 3.895 3.125 5 3.125H19C20.105 3.125 21 4.03366 21 5.15553V19.3693C21 20.4911 20.105 21.3998 19 21.3998Z" stroke="#61DBFB" stroke-linecap="round" stroke-linejoin="round"/>
7
+ </svg>
package/dist/assets/icons/circle-icon.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg width="5" height="5"
2
+ viewBox="0 0 5 5"
3
+ fill="none"
4
+ xmlns="http://www.w3.org/2000/svg">
5
+ <circle cx="2.5" cy="2.5"
6
+ r="2.5" fill="black" />
7
+ </svg>
package/dist/assets/icons/circle-outline-icon.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg width="5" height="5"
2
+ viewBox="0 0 5 5"
3
+ fill="none"
4
+ xmlns="http://www.w3.org/2000/svg">
5
+ <circle cx="2.5" cy="2.5"
6
+ r="2.25" stroke="black"
7
+ stroke-width="0.5" />
8
+ </svg>
package/dist/assets/icons/close-icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 8L16 16" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
3
+ <path d="M16 8L8 16" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
4
+ </svg>
package/dist/assets/icons/close-sidebar-mark-icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14 14L28 28" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
3
+ <path d="M28 14L14 28" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
4
+ </svg>
package/dist/assets/icons/close-toggle-icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M7.5 16.5L12.5 11L7.5 5.5" stroke="#084FFF" stroke-width="2" stroke-linecap="round"
3
+ stroke-linejoin="round" />
4
+ </svg>