@eturnity/eturnity_reusable_components 9.34.2 → 9.34.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.34.2",
+  "version": "9.34.4",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/components.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="16.494 58.922 15.013 16.157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.5002 64.5161L24.5002 67.2944V72.8179L29.2092 70.2017C29.3136 70.1436 29.3729 70.1101 29.4162 70.0825C29.4547 70.058 29.4597 70.0514 29.4562 70.0552C29.4722 70.0378 29.4839 70.017 29.4914 69.9946C29.4902 69.9984 29.4946 69.9898 29.4972 69.9458C29.5003 69.8945 29.5002 69.8262 29.5002 69.7065V64.5161ZM23.925 60.9517C23.8812 60.9728 23.8242 61.0038 23.7248 61.0591L19.0295 63.6675L24.0002 66.4282L28.9699 63.6675L24.2756 61.0591C24.1762 61.0038 24.1192 60.9728 24.0754 60.9517C24.0478 60.9384 24.0362 60.9339 24.0334 60.9331C24.0115 60.9287 23.9888 60.9287 23.967 60.9331C23.9641 60.9339 23.9525 60.9384 23.925 60.9517ZM18.5031 69.9458C18.5057 69.9898 18.5101 69.9984 18.509 69.9946C18.5164 70.017 18.5281 70.0378 18.5441 70.0552C18.5406 70.0514 18.5456 70.058 18.5842 70.0825C18.6275 70.1101 18.6867 70.1436 18.7912 70.2017L23.5002 72.8179V67.2944L18.5002 64.5161V69.7065C18.5002 69.8262 18.5 69.8945 18.5031 69.9458ZM30.5002 69.7065C30.5002 69.9006 30.5065 70.1117 30.4416 70.3081C30.3895 70.4658 30.3041 70.6108 30.1916 70.7329C30.0515 70.8849 29.864 70.9815 29.6945 71.0757L24.7609 73.8169C24.6003 73.9061 24.4283 74.0076 24.2355 74.0474C24.0805 74.0792 23.9199 74.0792 23.7648 74.0474C23.572 74.0076 23.4001 73.9061 23.2394 73.8169L18.3058 71.0757C18.1364 70.9815 17.9489 70.8849 17.8088 70.7329C17.6962 70.6108 17.6109 70.4658 17.5588 70.3081C17.4939 70.1117 17.5002 69.9006 17.5002 69.7065V64.2954C17.5002 64.1014 17.4939 63.8902 17.5588 63.6938C17.6109 63.5361 17.6962 63.3912 17.8088 63.269C17.949 63.1169 18.1362 63.0195 18.3058 62.9253L23.2394 60.1851C23.4001 60.0958 23.5719 59.9933 23.7648 59.9536C23.9199 59.9217 24.0805 59.9217 24.2355 59.9536C24.4284 59.9933 24.6002 60.0958 24.7609 60.1851L29.6945 62.9253C29.8641 63.0195 30.0514 63.1169 30.1916 63.269C30.3041 63.3912 30.3895 63.5361 30.4416 63.6938C30.5064 63.8902 30.5002 64.1014 30.5002 64.2954V69.7065Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/document_templates.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 0C7.63261 0 7.75975 0.0527162 7.85352 0.146484L10.3535 2.64648C10.4473 2.74025 10.5 2.86739 10.5 3V9C10.5 9.55228 10.0523 10 9.5 10H8V11.5C8 12.0523 7.55228 12.5 7 12.5H1C0.447715 12.5 0 12.0523 0 11.5V3.5C0 2.94772 0.447715 2.5 1 2.5H2.5V1C2.5 0.447715 2.94772 0 3.5 0H7.5ZM1 11.5H7V6H5.5C4.94772 6 4.5 5.55228 4.5 5V3.5H1V11.5ZM3.5 2.5H5C5.13261 2.5 5.25975 2.55272 5.35352 2.64648L7.85352 5.14648C7.94728 5.24025 8 5.36739 8 5.5V9H9.5V3.5H8C7.44772 3.5 7 3.05228 7 2.5V1H3.5V2.5ZM5.5 5H6.29297L5.5 4.20703V5ZM8 2.5H8.79297L8 1.70703V2.5Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/export.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 10.6008C1 10.877 1.22386 11.1008 1.5 11.1008H12.5C12.7761 11.1008 13 10.877 13 10.6008V8.10083C13 7.82469 13.2239 7.60083 13.5 7.60083C13.7761 7.60083 14 7.82469 14 8.10083V10.6008C14 11.4293 13.3284 12.1008 12.5 12.1008H1.5C0.671573 12.1008 0 11.4293 0 10.6008V8.10083C0 7.82469 0.223858 7.60083 0.5 7.60083C0.776142 7.60083 1 7.82469 1 8.10083V10.6008ZM6.72265 0.184805L7 -9.44138e-05L7.27735 0.184805L10.2774 2.1848C10.5071 2.33798 10.5692 2.64842 10.416 2.87818C10.2628 3.10794 9.95241 3.17003 9.72265 3.01686L7.5 1.53509L7.5 9.60083C7.5 9.87697 7.27614 10.1008 7 10.1008C6.72386 10.1008 6.5 9.87697 6.5 9.60083L6.5 1.53509L4.27735 3.01686C4.04759 3.17003 3.73715 3.10795 3.58398 2.87818C3.4308 2.64842 3.49289 2.33798 3.72265 2.18481L6.72265 0.184805Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/groups.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="16.000 93.000 16.000 16.000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.5 94C30.3284 94 31 94.6716 31 95.5V106.5C31 107.328 30.3284 108 29.5 108H18.5C17.6716 108 17 107.328 17 106.5V95.5C17 94.6716 17.6716 94 18.5 94H29.5ZM18.5 95C18.2239 95 18 95.2239 18 95.5V106.5C18 106.776 18.2239 107 18.5 107H29.5C29.7761 107 30 106.776 30 106.5V95.5C30 95.2239 29.7761 95 29.5 95H18.5ZM22.5 101.5C23.0523 101.5 23.5 101.948 23.5 102.5V105C23.5 105.552 23.0523 106 22.5 106H20L19.8975 105.995C19.3933 105.944 19 105.518 19 105V102.5C19 101.948 19.4477 101.5 20 101.5H22.5ZM20 105H22.5V102.5H20V105ZM22.5 96C23.0523 96 23.5 96.4477 23.5 97V99.5C23.5 100.052 23.0523 100.5 22.5 100.5H20L19.8975 100.495C19.3933 100.444 19 100.018 19 99.5V97C19 96.4477 19.4477 96 20 96H22.5ZM28 96C28.5523 96 29 96.4477 29 97V99.5C29 100.052 28.5523 100.5 28 100.5H25.5L25.3975 100.495C24.8933 100.444 24.5 100.018 24.5 99.5V97C24.5 96.4477 24.9477 96 25.5 96H28ZM20 99.5H22.5V97H20V99.5ZM25.5 99.5H28V97H25.5V99.5Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/heating_calculator.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="15.695 195.000 16.306 16.056" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9141 208.045C18.1512 206.82 20.1563 206.82 21.3936 208.045C22.1955 208.839 23.4968 208.839 24.2988 208.045C24.5164 207.829 24.8683 207.83 25.0859 208.045C25.3047 208.262 25.3048 208.614 25.0859 208.831C23.8487 210.056 21.8436 210.056 20.6064 208.831C19.8044 208.037 18.5031 208.037 17.7012 208.831C17.4836 209.046 17.1316 209.047 16.9141 208.831C16.6954 208.614 16.6955 208.262 16.9141 208.045ZM19.3389 209H19.001L18.9766 208.998C19.0967 208.982 19.2188 208.983 19.3389 209ZM30.001 196C30.5529 196 31.001 196.448 31.001 197V208C31.001 208.517 30.6072 208.943 30.1035 208.995L30.001 209H25.8711C26.0214 208.686 26.0387 208.325 25.9228 208H27.001V206H25.999C25.9992 205.706 25.9015 205.413 25.7041 205.173L25.6133 205.074L25.5312 205H27.001V203H25.8711C25.8081 202.868 25.723 202.744 25.6133 202.636C25.1353 202.163 24.3823 202.133 23.8701 202.547L23.7715 202.636C23.5637 202.841 23.3022 202.962 23.0312 203H22.6611C22.3902 202.962 22.1286 202.841 21.9209 202.636C21.6419 202.36 21.3314 202.133 21.001 201.958V200H19.001V201.504C18.6633 201.517 18.3268 201.573 18.001 201.672V197C18.001 196.448 18.4488 196 19.001 196H30.001ZM28.001 208H30.001V206H28.001V208ZM16.9141 205.606C18.1512 204.381 20.1564 204.382 21.3936 205.606C22.1955 206.401 23.4968 206.401 24.2988 205.606C24.5163 205.391 24.8684 205.391 25.0859 205.606C25.3049 205.823 25.3049 206.177 25.0859 206.394C23.8488 207.619 21.8436 207.619 20.6064 206.394C19.8044 205.599 18.5031 205.599 17.7012 206.394C17.4836 206.609 17.1315 206.609 16.9141 206.394C16.6953 206.177 16.6953 205.823 16.9141 205.606ZM28.001 205H30.001V203H28.001V205ZM16.9141 203.169C18.1512 201.944 20.1563 201.944 21.3936 203.169C22.1955 203.963 23.4968 203.963 24.2988 203.169C24.5164 202.954 24.8683 202.954 25.0859 203.169C25.3048 203.386 25.3047 203.738 25.0859 203.955C23.8487 205.18 21.8436 205.18 20.6064 203.955C19.8044 203.161 18.5031 203.161 17.7012 203.955C17.4836 204.17 17.1316 204.171 16.9141 203.955C16.6955 203.738 16.6954 203.386 16.9141 203.169ZM22.001 202H24.001V200H22.001V202ZM25.001 202H27.001V200H25.001V202ZM28.001 202H30.001V200H28.001V202ZM19.001 199H30.001V197H19.001V199Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/house_unfilled.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 5.591C11 5.45013 10.9402 5.31564 10.8359 5.22088L6.33594 1.13006C6.1453 0.95698 5.8547 0.95698 5.66406 1.13006L1.16406 5.22088C1.05983 5.31564 1 5.45013 1 5.591V12.1486C1 12.4248 1.22386 12.6486 1.5 12.6486H3C3.27614 12.6486 3.5 12.4248 3.5 12.1486V9.14862C3.5 8.32019 4.17157 7.64862 5 7.64862H7C7.82843 7.64862 8.5 8.32019 8.5 9.14862V12.1486C8.5 12.4248 8.72386 12.6486 9 12.6486H10.5C10.7761 12.6486 11 12.4248 11 12.1486V5.591ZM12 12.1486C12 12.977 11.3284 13.6486 10.5 13.6486H9C8.17157 13.6486 7.5 12.977 7.5 12.1486V9.14862C7.5 8.87247 7.27614 8.64862 7 8.64862H5C4.72386 8.64862 4.5 8.87247 4.5 9.14862V12.1486C4.5 12.977 3.82843 13.6486 3 13.6486H1.5C0.671573 13.6486 0 12.977 0 12.1486V5.591C0 5.16838 0.178499 4.76493 0.491211 4.48065L4.99121 0.389826C5.56325 -0.129942 6.43675 -0.129943 7.00879 0.389826L11.5088 4.48065C11.8215 4.76493 12 5.16838 12 5.591V12.1486Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/import.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1.5C1 1.22386 1.22386 1 1.5 1H12.5C12.7761 1 13 1.22386 13 1.5V4C13 4.27614 13.2239 4.5 13.5 4.5C13.7761 4.5 14 4.27614 14 4V1.5C14 0.671573 13.3284 0 12.5 0H1.5C0.671573 0 0 0.671573 0 1.5V4C0 4.27614 0.223858 4.5 0.5 4.5C0.776142 4.5 1 4.27614 1 4V1.5ZM6.72265 11.916L7 12.1009L7.27735 11.916L10.2774 9.91603C10.5071 9.76285 10.5692 9.45241 10.416 9.22265C10.2628 8.99289 9.95241 8.9308 9.72265 9.08397L7.5 10.5657L7.5 2.5C7.5 2.22386 7.27614 2 7 2C6.72386 2 6.5 2.22386 6.5 2.5L6.5 10.5657L4.27735 9.08397C4.04759 8.9308 3.73715 8.99288 3.58398 9.22265C3.4308 9.45241 3.49289 9.76285 3.72265 9.91602L6.72265 11.916Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/main_component_templates.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="16.000 127.000 16.000 16.000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 137.8C17.7761 137.8 17.9999 138.024 18 138.3V140.5C18 140.776 18.2239 141 18.5 141H20.7002C20.9762 141 21.2002 141.224 21.2002 141.5C21.2002 141.776 20.9762 142 20.7002 142H18.5C17.6716 142 17 141.328 17 140.5V138.3C17.0001 138.024 17.2239 137.8 17.5 137.8ZM30.5 137.8C30.7761 137.8 30.9999 138.024 31 138.3V140.5C31 141.328 30.3284 142 29.5 142H27.2998C27.0238 142 26.7998 141.776 26.7998 141.5C26.7998 141.224 27.0238 141 27.2998 141H29.5C29.7761 141 30 140.776 30 140.5V138.3C30.0001 138.024 30.2239 137.8 30.5 137.8ZM24.1016 129.505L24.2031 129.521L24.3252 129.557C24.4437 129.6 24.5489 129.662 24.6338 129.71L28.334 131.796C28.424 131.847 28.538 131.907 28.6406 131.99L28.7383 132.082L28.8057 132.165C28.8684 132.251 28.9172 132.347 28.9502 132.448C29.0058 132.619 29 132.802 29 132.941V137.059C29 137.198 29.0058 137.381 28.9502 137.552C28.9061 137.687 28.8342 137.812 28.7383 137.918C28.6166 138.052 28.4539 138.137 28.334 138.204L24.6338 140.29C24.5207 140.354 24.3718 140.444 24.2031 140.479C24.0693 140.507 23.9307 140.507 23.7969 140.479C23.6282 140.444 23.4793 140.354 23.3662 140.29L19.666 138.204C19.5461 138.137 19.3834 138.052 19.2617 137.918C19.1658 137.812 19.0939 137.687 19.0498 137.552C18.9942 137.381 19 137.198 19 137.059V132.941C19 132.802 18.9942 132.619 19.0498 132.448L19.0879 132.349C19.1313 132.251 19.1898 132.161 19.2617 132.082L19.3594 131.99C19.462 131.907 19.576 131.847 19.666 131.796L23.3662 129.71C23.4793 129.646 23.6282 129.556 23.7969 129.521L23.8984 129.505C23.9659 129.498 24.0341 129.498 24.1016 129.505ZM20 137.059C20 137.151 19.9999 137.199 20.002 137.234C20.0021 137.237 20.0018 137.24 20.002 137.242C20.0036 137.243 20.0057 137.245 20.0078 137.246C20.0364 137.265 20.0774 137.288 20.1572 137.333L23.5 139.217V135.291L20 133.318V137.059ZM24.5 135.291V139.217L27.8428 137.333C27.9226 137.288 27.9636 137.265 27.9922 137.246C27.9941 137.245 27.9971 137.242 27.9971 137.242C27.9972 137.24 27.9979 137.237 27.998 137.234C28.0001 137.199 28 137.151 28 137.059V133.318L24.5 135.291ZM23.8574 130.581L20.5176 132.463L24 134.426L27.4814 132.463L24.1426 130.581C24.0672 130.539 24.0287 130.517 24 130.503L23.8574 130.581ZM20.7002 128C20.9762 128 21.2002 128.224 21.2002 128.5C21.2002 128.776 20.9762 129 20.7002 129H18.5C18.2239 129 18 129.224 18 129.5V131.7C17.9999 131.976 17.7761 132.2 17.5 132.2C17.2239 132.2 17.0001 131.976 17 131.7V129.5C17 128.672 17.6716 128 18.5 128H20.7002ZM29.5 128C30.3284 128 31 128.672 31 129.5V131.7C30.9999 131.976 30.7761 132.2 30.5 132.2C30.2239 132.2 30.0001 131.976 30 131.7V129.5C30 129.224 29.7761 129 29.5 129H27.2998C27.0238 129 26.7998 128.776 26.7998 128.5C26.7998 128.224 27.0238 128 27.2998 128H29.5Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/project_templates.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="16.000 161.000 16.000 16.000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 171.8C17.7761 171.8 17.9999 172.024 18 172.3V174.5C18 174.776 18.2239 175 18.5 175H20.7002C20.9762 175 21.2002 175.224 21.2002 175.5C21.2002 175.776 20.9762 176 20.7002 176H18.5C17.6716 176 17 175.328 17 174.5V172.3C17.0001 172.024 17.2239 171.8 17.5 171.8ZM30.5 171.8C30.7761 171.8 30.9999 172.024 31 172.3V174.5C31 175.328 30.3284 176 29.5 176H27.2998C27.0238 176 26.7998 175.776 26.7998 175.5C26.7998 175.224 27.0238 175 27.2998 175H29.5C29.7761 175 30 174.776 30 174.5V172.3C30.0001 172.024 30.2239 171.8 30.5 171.8ZM26.9678 164C27.2477 164 27.4811 163.999 27.6709 164.015C27.8652 164.031 28.0482 164.066 28.2207 164.154C28.4851 164.289 28.7001 164.505 28.835 164.77C28.9228 164.942 28.9568 165.126 28.9727 165.32C28.9882 165.511 28.9893 165.746 28.9893 166.026V173.23H29.1162C29.3281 173.23 29.4999 173.403 29.5 173.615C29.5 173.828 29.3281 174 29.1162 174H18.8838C18.6719 174 18.5 173.828 18.5 173.615C18.5001 173.403 18.6719 173.23 18.8838 173.23H19.0117V170.128C19.0117 169.847 19.0118 169.613 19.0273 169.423C19.0432 169.228 19.0772 169.045 19.165 168.872C19.2999 168.607 19.5157 168.391 19.7803 168.256C19.9526 168.168 20.1351 168.134 20.3291 168.118C20.5189 168.103 20.7523 168.103 21.0322 168.103H23.1045V166.026C23.1045 165.746 23.1046 165.511 23.1201 165.32C23.136 165.126 23.1709 164.942 23.2588 164.77C23.3937 164.505 23.6086 164.289 23.873 164.154C24.0455 164.066 24.2277 164.031 24.4219 164.015C24.6117 163.999 24.8458 164 25.126 164H26.9678ZM21.0322 168.871C20.7396 168.871 20.5429 168.872 20.3916 168.885C20.2454 168.897 20.1752 168.918 20.1289 168.941C20.0087 169.003 19.91 169.101 19.8486 169.222C19.8251 169.268 19.804 169.339 19.792 169.486C19.7797 169.638 19.7793 169.835 19.7793 170.128V173.23H23.1045V168.871H21.0322ZM25.126 164.77C24.8332 164.77 24.6357 164.77 24.4844 164.782C24.3382 164.794 24.268 164.815 24.2217 164.839C24.1014 164.9 24.0037 164.999 23.9424 165.119C23.9188 165.166 23.8968 165.236 23.8848 165.383C23.8724 165.535 23.8721 165.733 23.8721 166.026V173.23H28.2217V166.026C28.2217 165.733 28.2214 165.535 28.209 165.383C28.197 165.236 28.1749 165.166 28.1514 165.119C28.0901 164.999 27.9923 164.9 27.8721 164.839C27.8257 164.815 27.7551 164.794 27.6084 164.782C27.4571 164.77 27.2604 164.77 26.9678 164.77H25.126ZM26.8135 170.154C27.0253 170.154 27.1971 170.326 27.1973 170.538C27.1973 170.751 27.0254 170.923 26.8135 170.923H25.2793C25.0675 170.923 24.8955 170.75 24.8955 170.538C24.8957 170.326 25.0676 170.154 25.2793 170.154H26.8135ZM26.8135 168.103C27.0253 168.103 27.1971 168.275 27.1973 168.487C27.1971 168.7 27.0253 168.871 26.8135 168.871H25.2793C25.0676 168.871 24.8957 168.699 24.8955 168.487C24.8956 168.275 25.0676 168.103 25.2793 168.103H26.8135ZM26.8135 166.052C27.0254 166.052 27.1973 166.224 27.1973 166.437C27.1969 166.649 27.0252 166.82 26.8135 166.82H25.2793C25.0677 166.82 24.8958 166.649 24.8955 166.437C24.8955 166.224 25.0675 166.052 25.2793 166.052H26.8135ZM20.7002 162C20.9762 162 21.2002 162.224 21.2002 162.5C21.2002 162.776 20.9762 163 20.7002 163H18.5C18.2239 163 18 163.224 18 163.5V165.7C17.9999 165.976 17.7761 166.2 17.5 166.2C17.2239 166.2 17.0001 165.976 17 165.7V163.5C17 162.672 17.6716 162 18.5 162H20.7002ZM29.5 162C30.3284 162 31 162.672 31 163.5V165.7C30.9999 165.976 30.7761 166.2 30.5 166.2C30.2239 166.2 30.0001 165.976 30 165.7V163.5C30 163.224 29.7761 163 29.5 163H27.2998C27.0238 163 26.7998 162.776 26.7998 162.5C26.7998 162.224 27.0238 162 27.2998 162H29.5Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/solar_calculator.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="16.000 229.000 16.001 15.900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7002 241.78C21.9762 241.78 22.2001 242.004 22.2002 242.28V243.4C22.2 243.676 21.9761 243.9 21.7002 243.9C21.4243 243.9 21.2004 243.676 21.2002 243.4V242.28C21.2003 242.004 21.4242 241.78 21.7002 241.78ZM30.001 230C30.5529 230 31.001 230.448 31.001 231V242C31.001 242.517 30.6072 242.943 30.1035 242.995L30.001 243H26.0361C26.2214 242.695 26.2973 242.344 26.2607 242H27.001V240.358C27.3076 240.067 27.4999 239.657 27.5 239.2C27.4999 238.743 27.308 238.332 27.001 238.04V237H26.0713C26.2409 236.691 26.3011 236.34 26.252 236H27.001V234H25.001V234.665C24.667 234.595 24.3157 234.633 24.001 234.778V234H22.9473C22.6541 233.635 22.2049 233.4 21.7002 233.4C21.1954 233.4 20.7456 233.635 20.4521 234H19.001V234.654C18.6637 234.597 18.3119 234.647 18.001 234.807V231C18.001 230.448 18.4487 230 19.001 230H30.001ZM19.1689 241.024C19.3642 240.829 19.6807 240.829 19.876 241.024C20.0711 241.22 20.0711 241.536 19.876 241.731L19.084 242.523C18.8888 242.719 18.5722 242.719 18.377 242.523C18.1819 242.328 18.1817 242.012 18.377 241.816L19.1689 241.024ZM23.5254 241.024C23.7207 240.83 24.0373 240.829 24.2324 241.024L25.0244 241.816C25.2192 242.012 25.2191 242.328 25.0244 242.523C24.8293 242.719 24.5127 242.718 24.3174 242.523L23.5254 241.731C23.3301 241.536 23.3301 241.22 23.5254 241.024ZM28.001 242H30.001V240H28.001V242ZM21.7002 236.9C22.9703 236.9 23.9999 237.93 24 239.2C23.9999 240.47 22.9703 241.5 21.7002 241.5C20.4301 241.5 19.4005 240.47 19.4004 239.2C19.4005 237.93 20.4301 236.9 21.7002 236.9ZM21.7002 237.9C20.9824 237.9 20.4005 238.482 20.4004 239.2C20.4005 239.918 20.9824 240.5 21.7002 240.5C22.418 240.5 22.9999 239.918 23 239.2C22.9999 238.482 22.418 237.9 21.7002 237.9ZM18.6201 238.7C18.8961 238.7 19.12 238.924 19.1201 239.2C19.12 239.476 18.8961 239.7 18.6201 239.7H17.5C17.224 239.7 17.0001 239.476 17 239.2C17.0001 238.924 17.224 238.7 17.5 238.7H18.6201ZM25.9004 238.7C26.1763 238.7 26.4003 238.924 26.4004 239.2C26.4003 239.476 26.1763 239.7 25.9004 239.7H24.7803C24.5043 239.7 24.2804 239.476 24.2803 239.2C24.2804 238.924 24.5043 238.7 24.7803 238.7H25.9004ZM28.001 239H30.001V237H28.001V239ZM18.377 235.877C18.5722 235.682 18.8888 235.682 19.084 235.877L19.876 236.669C20.0711 236.864 20.0711 237.181 19.876 237.376C19.6807 237.571 19.3642 237.571 19.1689 237.376L18.377 236.584C18.1817 236.389 18.1819 236.072 18.377 235.877ZM24.3174 235.877C24.5127 235.682 24.8293 235.682 25.0244 235.877C25.2191 236.072 25.2192 236.389 25.0244 236.584L24.2324 237.376C24.0373 237.571 23.7207 237.571 23.5254 237.376C23.3301 237.181 23.3301 236.864 23.5254 236.669L24.3174 235.877ZM21.7002 234.5C21.9762 234.5 22.2001 234.724 22.2002 235V236.12C22.2001 236.396 21.9762 236.62 21.7002 236.62C21.4242 236.62 21.2003 236.396 21.2002 236.12V235C21.2003 234.724 21.4242 234.5 21.7002 234.5ZM28.001 236H30.001V234H28.001V236ZM19.001 233H30.001V231H19.001V233Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/upload_page.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.58594 0C5.98371 4.00002e-05 6.36522 0.158184 6.64648 0.439453L9.56055 3.35352C9.84182 3.63478 9.99996 4.01629 10 4.41406V7.5H9V5H7C6.17157 5 5.5 4.32843 5.5 3.5V1H1.5C1.22386 1 1 1.22386 1 1.5V12.5C1 12.7761 1.22386 13 1.5 13H6V14H1.5C0.671573 14 0 13.3284 0 12.5V1.5C2.01331e-08 0.671573 0.671573 1.61064e-08 1.5 0H5.58594ZM7.7998 7.59961L9.7998 9.09961C10.0206 9.26522 10.0658 9.57891 9.90039 9.7998C9.73478 10.0206 9.42109 10.0658 9.2002 9.90039L8 9V13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5V9L5.7998 9.90039C5.57891 10.0658 5.26522 10.0206 5.09961 9.7998C4.9342 9.57891 4.97939 9.26522 5.2002 9.09961L7.2002 7.59961L7.5 7.375L7.7998 7.59961ZM6.5 3.5C6.5 3.77614 6.72386 4 7 4H8.79297L6.5 1.70703V3.5Z" fill="#151B1E"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -413,6 +413,7 @@
   import MainButton from '../buttons/mainButton'
   import Checkbox from '../inputs/checkbox'
   import Draggable from 'vuedraggable'
+  import { suppressDragImage } from '../../utils/suppressDragImage'
   import Icon from '../icon'
   import DeleteIcon from '../deleteIcon'
   import { datePickerLang } from '../../helpers/translateLang'
@@ -733,19 +734,7 @@
         this.$emit('on-drag-change', data)
       },
       modifyDragItem(dataTransfer) {
-        const isSafari = /^((?!chrome|android).)*safari/i.test(
-          navigator.userAgent
-        )
-        // prevents the dragged element from dragging the whole row as a "ghost"
-        // Safari fix because this does not work on Safari
-        let img = new Image()
-        if (!isSafari) {
-          dataTransfer.setDragImage(img, 0, 0)
-        } else {
-          img.src =
-            'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-          dataTransfer.setDragImage(img, 0, 0)
-        }
+        suppressDragImage(dataTransfer)
       },
       getSelectedValue({ value, options, filter }) {
         const foundItem = options.find((item) => item.choice === value)

package/src/components/filterComponent/viewSettings.spec.js

@@ -0,0 +1,145 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import ViewSettings from './viewSettings.vue'
+
+// Stub heavy children so we test viewSettings' own contract: which column UI
+// renders, the checkbox/select-all wiring, and the reorder emit (ZOO-70).
+jest.mock('../buttons/buttonIcon/index.vue', () => ({
+  name: 'ButtonIcon',
+  props: ['iconName', 'text', 'type'],
+  template: '<button class="button-icon" @click="$emit(\'click\')" />',
+}))
+jest.mock('../buttons/mainButton/index.vue', () => ({
+  name: 'MainButton',
+  props: ['text', 'type'],
+  template:
+    '<button class="main-button" :data-type="type" @click="$emit(\'click\')">{{ text }}</button>',
+}))
+jest.mock('../inputs/toggle/index.vue', () => ({
+  name: 'RCToggle',
+  template: '<div class="toggle" />',
+}))
+jest.mock('../inputs/select/index.vue', () => ({
+  name: 'SelectComponent',
+  template: '<div class="select" />',
+}))
+jest.mock('../inputs/select/option/index.vue', () => ({
+  name: 'RcOption',
+  template: '<div class="option" />',
+}))
+jest.mock('../icon', () => ({
+  name: 'Icon',
+  props: ['name', 'size'],
+  template: '<i class="icon" :data-name="name" />',
+}))
+jest.mock('../inputs/checkbox/index.vue', () => ({
+  name: 'Checkbox',
+  props: ['isChecked', 'isDisabled', 'label', 'size'],
+  emits: ['on-event-handler'],
+  template:
+    '<button class="checkbox" :disabled="isDisabled" @click="$emit(\'on-event-handler\', !isChecked)">{{ label }}</button>',
+}))
+jest.mock('vuedraggable', () => ({
+  name: 'Draggable',
+  props: ['modelValue'],
+  emits: ['update:modelValue'],
+  template:
+    '<div class="draggable"><template v-for="(element, index) in modelValue" :key="index"><slot name="item" :element="element" /></template></div>',
+}))
+
+const COLUMNS = [
+  { id: 0, choice: 'reference', text: 'Reference', selected: true },
+  { id: 1, choice: 'project_name', text: 'Project name', selected: true },
+  { id: 2, choice: 'technologies', text: 'Technologies', selected: false },
+]
+
+const mountPanel = (props = {}) =>
+  mount(ViewSettings, {
+    props: {
+      columnsData: COLUMNS,
+      detailedToggleOptions: [],
+      pageSize: 20,
+      ...props,
+    },
+    global: {
+      mocks: { $gettext: (msg) => msg },
+    },
+  })
+
+// The column UI only renders once the settings popover is opened. Set the state
+// directly to avoid the document outside-click listener racing the open click.
+const openPanel = async (wrapper) => {
+  await wrapper.setData({ isOptionsVisible: true })
+}
+
+describe('ViewSettings column UI (ZOO-70)', () => {
+  it('renders the draggable column list for list views', async () => {
+    const wrapper = mountPanel({ isListView: true })
+    await openPanel(wrapper)
+
+    expect(wrapper.find('.draggable').exists()).toBe(true)
+    const checkboxes = wrapper.findAll('.checkbox')
+    expect(checkboxes).toHaveLength(COLUMNS.length)
+    expect(wrapper.findAll('.icon[data-name="drag_icon"]')).toHaveLength(
+      COLUMNS.length
+    )
+    expect(wrapper.text()).toContain('Reference')
+  })
+
+  it('renders the chip list (no drag) for non-list views', async () => {
+    const wrapper = mountPanel({ isListView: false })
+    await openPanel(wrapper)
+
+    expect(wrapper.find('.draggable').exists()).toBe(false)
+    expect(wrapper.findAll('.checkbox')).toHaveLength(0)
+    expect(wrapper.text()).toContain('Reference')
+  })
+
+  it('emits onSelectColumn with the column when a checkbox is toggled', async () => {
+    const wrapper = mountPanel({ isListView: true })
+    await openPanel(wrapper)
+
+    await wrapper.findAll('.checkbox')[0].trigger('click')
+
+    expect(wrapper.emitted('onSelectColumn')).toBeTruthy()
+    expect(wrapper.emitted('onSelectColumn')[0][0].choice).toBe('reference')
+  })
+
+  it('disables the checkbox of the last remaining selected column', async () => {
+    const wrapper = mountPanel({
+      isListView: true,
+      columnsData: [
+        { id: 0, choice: 'reference', text: 'Reference', selected: true },
+        { id: 1, choice: 'project_name', text: 'Project name', selected: false },
+        { id: 2, choice: 'technologies', text: 'Technologies', selected: false },
+      ],
+    })
+    await openPanel(wrapper)
+
+    const checkboxes = wrapper.findAll('.checkbox')
+    expect(checkboxes[0].attributes('disabled')).toBeDefined()
+    expect(checkboxes[1].attributes('disabled')).toBeUndefined()
+  })
+
+  it('emits onColumnReorder with the reordered array on drag', async () => {
+    const wrapper = mountPanel({ isListView: true })
+    await openPanel(wrapper)
+
+    const reordered = [COLUMNS[2], COLUMNS[0], COLUMNS[1]]
+    await wrapper
+      .findComponent({ name: 'Draggable' })
+      .vm.$emit('update:modelValue', reordered)
+
+    expect(wrapper.emitted('onColumnReorder')).toBeTruthy()
+    expect(wrapper.emitted('onColumnReorder')[0][0]).toEqual(reordered)
+  })
+
+  it('emits onSelectAllColumns when Select all is clicked', async () => {
+    const wrapper = mountPanel({ isListView: true })
+    await openPanel(wrapper)
+
+    await wrapper.find('.main-button').trigger('click')
+
+    expect(wrapper.emitted('onSelectAllColumns')).toBeTruthy()
+  })
+})

package/src/components/filterComponent/viewSettings.vue

@@ -14,11 +14,39 @@
           <SectionTitle>{{ $gettext('select_columns') }}</SectionTitle>
           <MainButton
             :text="$gettext('select_all')"
-            type="ghost"
+            type="tertiary"
             @click="handleSelectAll"
           />
         </SectionTitleContainer>
-        <SelectOptionsContainer>
+        <ColumnListContainer v-if="isListView">
+          <Draggable
+            ghost-class="ghost"
+            handle=".drag-container"
+            item-key="choice"
+            :model-value="columnsData"
+            :set-data="modifyDragItem"
+            style="display: contents"
+            @update:model-value="onColumnReorder"
+          >
+            <template #item="{ element: column }">
+              <ColumnRow
+                :data-id="`view_settings_column_row_${column.choice}`"
+              >
+                <DragContainer class="drag-container">
+                  <Icon name="drag_icon" size="16px" />
+                </DragContainer>
+                <Checkbox
+                  :is-checked="column.selected"
+                  :is-disabled="column.selected && getSelectedCount() <= 1"
+                  :label="$gettext(column.text)"
+                  size="small"
+                  @on-event-handler="handleSelectColumn(column)"
+                />
+              </ColumnRow>
+            </template>
+          </Draggable>
+        </ColumnListContainer>
+        <SelectOptionsContainer v-else>
           <SelectOption
             v-for="column in columnsData"
             :key="column.id"
@@ -77,11 +105,15 @@
 
 <script>
   import styled from 'vue3-styled-components'
+  import Draggable from 'vuedraggable'
+  import { suppressDragImage } from '../../utils/suppressDragImage'
   import ButtonIcon from '../buttons/buttonIcon/index.vue'
   import MainButton from '../buttons/mainButton/index.vue'
   import RCToggle from '../inputs/toggle/index.vue'
   import SelectComponent from '../inputs/select/index.vue'
   import RcOption from '../inputs/select/option/index.vue'
+  import Checkbox from '../inputs/checkbox/index.vue'
+  import Icon from '../icon'
 
   const PageContainer = styled.div``
 
@@ -95,6 +127,7 @@
     top: 8px;
     right: 0;
     width: max-content;
+    min-width: 400px;
     max-width: 500px;
     background-color: ${(props) => props.theme.colors.white};
     border: 1px solid ${(props) => props.theme.semanticColors.grey[300]};
@@ -155,6 +188,37 @@
     user-select: none;
   `
 
+  const ColumnListContainer = styled.div`
+    display: grid;
+    gap: 8px;
+    max-height: 50vh;
+    overflow-y: auto;
+    padding-right: 4px;
+
+    .ghost {
+      opacity: 0.5;
+      background-color: ${(props) => props.theme.semanticColors.green[200]};
+    }
+  `
+
+  const ColumnRow = styled.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 8px;
+    align-items: center;
+    padding: 2px;
+  `
+
+  const DragContainer = styled.div`
+    display: flex;
+    align-items: center;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  `
+
   const LineSeparator = styled.div`
     width: 100%;
     height: 1px;
@@ -191,6 +255,12 @@
       SectionTitleContainer,
       SectionTitle,
       MainButton,
+      Draggable,
+      ColumnListContainer,
+      ColumnRow,
+      DragContainer,
+      Icon,
+      Checkbox,
       SelectOptionsContainer,
       SelectOption,
       LineSeparator,
@@ -215,8 +285,15 @@
         required: false,
         default: 20,
       },
+      // List (table) views render the reorderable column list; other view types
+      // fall back to the non-draggable chip selection.
+      isListView: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
-    emits: ['onSelectColumn', 'onSelectAllColumns'],
+    emits: ['onSelectColumn', 'onSelectAllColumns', 'onColumnReorder'],
     data() {
       return {
         isOptionsVisible: false,
@@ -241,6 +318,12 @@
       handleSelectAll() {
         this.$emit('onSelectAllColumns')
       },
+      onColumnReorder(reorderedColumns) {
+        this.$emit('onColumnReorder', reorderedColumns)
+      },
+      modifyDragItem(dataTransfer) {
+        suppressDragImage(dataTransfer)
+      },
       handleSelectColumn(column) {
         // Count currently selected columns
         const selectedCount = this.getSelectedCount()

package/src/components/navigationSideMenu/index.spec.js

@@ -121,6 +121,16 @@ describe('navigationSideMenu/index.vue', () => {
       expect(wrapper.find('[data-id^="nav_section_"]').exists()).toBe(false)
     })
 
+    it('renders no header for a group with an empty groupName, but still shows its items', () => {
+      const flatData = [
+        { groupName: '', children: [{ id: 'x', name: 'X', dataId: 'nav_x' }] },
+      ]
+      const wrapper = mount(NavigationSideMenu, { props: { menuData: flatData } })
+
+      expect(wrapper.find('[data-id^="nav_section_"]').exists()).toBe(false)
+      expect(item(wrapper, 'nav_x').exists()).toBe(true)
+    })
+
     it('treats groups that share a groupName as one section (name is the key)', async () => {
       const dupData = [
         {

package/src/components/navigationSideMenu/index.vue

@@ -121,7 +121,7 @@
                 :is-collapsed="isCollapsed"
               >
                 <GroupHeader
-                  v-if="!isCollapsed"
+                  v-if="!isCollapsed && group.groupName"
                   :data-id="`nav_section_${groupKey(group, groupIdx)}`"
                   :data-qa-id="`nav_section_${groupKey(group, groupIdx)}`"
                   @click="toggleGroup(groupKey(group, groupIdx))"

package/src/components/styledText/index.js

@@ -4,9 +4,11 @@ const TEXT_VARIANTS = {
   HEADING_SMALL: 'heading-small',
   HEADING_MEDIUM: 'heading-medium',
   HEADING_LARGE: 'heading-large',
+  BODY_XSMALL: 'body-xsmall',
   BODY_SMALL: 'body-small',
   BODY_MEDIUM: 'body-medium',
   BODY_LARGE: 'body-large',
+  SUBHEADING_XSMALL: 'subheading-xsmall',
   SUBHEADING_SMALL: 'subheading-small',
   SUBHEADING_MEDIUM: 'subheading-medium',
   SUBHEADING_LARGE: 'subheading-large',
@@ -31,11 +33,17 @@ const textVariants = {
     lineHeight: '130%',
     letterSpacing: '-0.36px',
   },
+  [TEXT_VARIANTS.SUBHEADING_XSMALL]: {
+    fontSize: '10px',
+    fontWeight: '500',
+    lineHeight: '140%',
+    letterSpacing: '-1%',
+  },
   [TEXT_VARIANTS.SUBHEADING_SMALL]: {
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '140%',
-    letterSpacing: '-0.12px',
+    letterSpacing: '-1%',
   },
   [TEXT_VARIANTS.SUBHEADING_MEDIUM]: {
     fontSize: '14px',
@@ -49,6 +57,11 @@ const textVariants = {
     lineHeight: '140%',
     letterSpacing: '-0.16px',
   },
+  [TEXT_VARIANTS.BODY_XSMALL]: {
+    fontSize: '10px',
+    fontWeight: '400',
+    lineHeight: '150%',
+  },
   [TEXT_VARIANTS.BODY_SMALL]: {
     fontSize: '12px',
     fontWeight: '400',

package/src/utils/suppressDragImage.js

@@ -0,0 +1,38 @@
+// A 1x1 transparent GIF used as the drag image to hide the browser's default
+// drag "ghost" (the semi-transparent snapshot that follows the cursor).
+//
+// The image passed to setDragImage MUST have a loaded source: an empty
+// `new Image()` renders a broken-image icon (the "globe") in Chrome while
+// dragging. A transparent pixel suppresses the ghost consistently across
+// Chrome and Safari.
+export const TRANSPARENT_DRAG_PIXEL =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+// Preload the image once at module load so it is decoded well before the first
+// drag. Creating it lazily at dragstart can hand setDragImage an image that
+// hasn't loaded yet, leaving the ghost unsuppressed on the first drag.
+function createTransparentDragImage() {
+  if (typeof Image === 'undefined') {
+    return null
+  }
+  const img = new Image()
+  img.src = TRANSPARENT_DRAG_PIXEL
+  return img
+}
+
+const transparentDragImage = createTransparentDragImage()
+
+/**
+ * Suppresses the native drag-image ghost for a drag operation.
+ * @param {DataTransfer} dataTransfer
+ */
+export function suppressDragImage(dataTransfer) {
+  if (
+    !dataTransfer ||
+    typeof dataTransfer.setDragImage !== 'function' ||
+    !transparentDragImage
+  ) {
+    return
+  }
+  dataTransfer.setDragImage(transparentDragImage, 0, 0)
+}

package/src/utils/suppressDragImage.spec.js

@@ -0,0 +1,39 @@
+import {
+  suppressDragImage,
+  TRANSPARENT_DRAG_PIXEL,
+} from '@/utils/suppressDragImage'
+
+describe('suppressDragImage', () => {
+  const makeDataTransfer = () => ({ setDragImage: jest.fn() })
+
+  it('sets the drag image to an image with the transparent pixel source', () => {
+    const dataTransfer = makeDataTransfer()
+    suppressDragImage(dataTransfer)
+
+    expect(dataTransfer.setDragImage).toHaveBeenCalledTimes(1)
+    const [img, x, y] = dataTransfer.setDragImage.mock.calls[0]
+    expect(img).toBeInstanceOf(HTMLImageElement)
+    // Regression: an empty `new Image()` renders Chrome's broken-image globe.
+    // The source must be the loaded transparent pixel, never empty.
+    expect(img.src).toBe(TRANSPARENT_DRAG_PIXEL)
+    expect(img.src).not.toBe('')
+    expect([x, y]).toEqual([0, 0])
+  })
+
+  it('reuses the same preloaded image across drags (not created per call)', () => {
+    const first = makeDataTransfer()
+    const second = makeDataTransfer()
+    suppressDragImage(first)
+    suppressDragImage(second)
+
+    expect(second.setDragImage.mock.calls[0][0]).toBe(
+      first.setDragImage.mock.calls[0][0]
+    )
+  })
+
+  it('is a no-op when dataTransfer is missing or lacks setDragImage', () => {
+    expect(() => suppressDragImage(null)).not.toThrow()
+    expect(() => suppressDragImage(undefined)).not.toThrow()
+    expect(() => suppressDragImage({})).not.toThrow()
+  })
+})