@eturnity/eturnity_reusable_components 7.24.1 → 7.24.3

package/babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.1",
+  "version": "7.24.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.12.16",
+    "@babel/eslint-parser": "7.12.16",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",

package/src/assets/svgIcons/anchor.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 204.851 204.851" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path fill="white" d="M139.518,128.595l16.834,16.336c0,0-20.644,29.877-42.725,30.473
+				c0.479,0,0.117-84.092,0.039-104.472c14.694-4.797,25.402-18.182,25.402-34.117c0-20.009-16.697-36.218-37.273-36.218
+				c-20.615,0-37.312,16.209-37.312,36.208c0,15.671,10.376,28.929,24.748,33.961l0.098,104.277
+				c-26.643-1.837-42.061-27.474-42.061-27.474l17.997-17.41L0,120.505l9.887,63.301l17.362-16.795
+				c15.036,12.105,32.017,37.244,72.876,37.244c51.332-1.309,63.184-28.939,76.344-39.804l18.993,18.514l9.389-63.907
+				L139.518,128.595z M82.558,36.208c0-10.298,8.608-18.661,19.218-18.661s19.257,8.363,19.257,18.661
+				c0,10.327-8.647,18.681-19.257,18.681S82.558,46.535,82.558,36.208z"/>
+		</g>
+	</g>
+</g>
+</svg>

package/src/assets/svgIcons/consumption_tariffs.svg

@@ -0,0 +1,43 @@
+<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.6097 40.3491C51.7466 40.2267 51.66 40 51.4764 40H43.375L48.9016 22.6994C48.9636 22.5053 48.7296 22.3537 48.5777 22.4895L29.3903 39.6509C29.2534 39.7733 29.34 40 29.5236 40H37.625L32.0984 57.3006C32.0364 57.4947 32.2704 57.6463 32.4223 57.5105L51.6097 40.3491Z" fill="#B2B9C5"/>
+<path d="M27.5676 15.1647C28.222 15.8191 28.2078 16.8942 27.536 17.5661C26.8641 18.238 25.789 18.2521 25.1346 17.5978L17.3671 9.83034L19.8002 7.39727L27.5676 15.1647Z" fill="#DEE2EB"/>
+<path d="M22.9134 2.03786C24.0932 2.24201 24.8589 3.36854 24.6237 4.55419C24.3885 5.73997 23.2413 6.53586 22.0613 6.33187L11.6146 4.5259L11.3604 0.0388747L22.9134 2.03786Z" fill="#DEE2EB"/>
+<path d="M25.9034 19.9886C26.5577 20.643 26.5436 21.7181 25.8717 22.39C25.1998 23.0619 24.1247 23.0761 23.4703 22.4217L14.1231 13.0744L16.5561 10.6414L25.9034 19.9886Z" fill="#DEE2EB"/>
+<path d="M21.8694 22.4428C22.5238 23.0972 22.5096 24.1723 21.8377 24.8442C21.1658 25.516 20.0907 25.5302 19.4363 24.8758L10.879 16.3185L13.312 13.8854L21.8694 22.4428Z" fill="#DEE2EB"/>
+<path d="M16.2556 23.3171C16.9099 23.9715 16.8958 25.0467 16.2239 25.7185C15.552 26.3904 14.4769 26.4046 13.8225 25.7502L7.63489 19.5626L10.068 17.1295L16.2556 23.3171Z" fill="#DEE2EB"/>
+<path d="M20.3268 7.92388L8.16149 20.0892L2.10553 14.0332C-0.0757419 11.852 -0.0284786 8.26816 2.21109 6.02859L6.2662 1.97348C8.50578 -0.26609 12.0896 -0.313354 14.2708 1.86792L20.3268 7.92388Z" fill="#DEE2EB"/>
+<path d="M18.947 11.4102L18.1359 12.2212L17.0827 11.168L17.8937 10.3569L18.947 11.4102Z" fill="#DEE2EB"/>
+<path d="M15.7029 14.6542L14.8919 15.4653L13.8386 14.4121L14.6497 13.601L15.7029 14.6542Z" fill="#DEE2EB"/>
+<path d="M11.9322 17.3717L11.1212 18.1827L10.5946 17.6561L11.4056 16.8451L11.9322 17.3717Z" fill="#DEE2EB"/>
+<path d="M6.2662 1.97348C8.29376 -0.05407 10.1615 -0.0787013 11.3604 0.0388747L11.6202 0.568994L11.4815 0.970987L9.60324 1.79608C9.16322 1.44619 6.15807 2.08162 6.2662 1.97348Z" fill="#DEE2EB"/>
+<path d="M53.4304 64.8353C52.776 64.1809 52.7902 63.1058 53.4621 62.4339C54.134 61.762 55.2091 61.7478 55.8635 62.4022L63.6309 70.1697L61.1978 72.6027L53.4304 64.8353Z" fill="#DEE2EB"/>
+<path d="M58.0847 77.9621C56.9049 77.758 56.1391 76.6315 56.3743 75.4458C56.6095 74.26 57.7567 73.4641 58.9367 73.6681L69.3834 75.4741L69.6376 79.9611L58.0847 77.9621Z" fill="#DEE2EB"/>
+<path d="M55.0947 60.0114C54.4403 59.357 54.4545 58.2819 55.1264 57.61C55.7982 56.9381 56.8734 56.9239 57.5277 57.5783L66.875 66.9256L64.4419 69.3586L55.0947 60.0114Z" fill="#DEE2EB"/>
+<path d="M59.1287 57.5572C58.4743 56.9028 58.4885 55.8277 59.1603 55.1558C59.8322 54.4839 60.9074 54.4698 61.5617 55.1242L70.1191 63.6815L67.686 66.1146L59.1287 57.5572Z" fill="#DEE2EB"/>
+<path d="M64.7425 56.6829C64.0881 56.0285 64.1023 54.9533 64.7742 54.2815C65.446 53.6096 66.5212 53.5954 67.1755 54.2498L73.3632 60.4374L70.9301 62.8705L64.7425 56.6829Z" fill="#DEE2EB"/>
+<path d="M60.6712 72.0761L72.8366 59.9108L78.8925 65.9668C81.0738 68.148 81.0265 71.7318 78.787 73.9714L74.7318 78.0265C72.4923 80.2661 68.9085 80.3134 66.7272 78.1321L60.6712 72.0761Z" fill="#DEE2EB"/>
+<path d="M62.0511 68.5898L62.8621 67.7788L63.9153 68.832L63.1043 69.6431L62.0511 68.5898Z" fill="#DEE2EB"/>
+<path d="M65.2952 65.3458L66.1062 64.5347L67.1594 65.5879L66.3484 66.399L65.2952 65.3458Z" fill="#DEE2EB"/>
+<path d="M69.0659 62.6283L69.8769 61.8173L70.4035 62.3439L69.5925 63.1549L69.0659 62.6283Z" fill="#DEE2EB"/>
+<path d="M74.7318 78.0265C72.7043 80.0541 70.8365 80.0787 69.6376 79.9611L69.3778 79.431L69.5165 79.029L71.3948 78.2039C71.8348 78.5538 74.84 77.9184 74.7318 78.0265Z" fill="#DEE2EB"/>
+<path d="M53.4304 15.1647C52.776 15.8191 52.7902 16.8942 53.4621 17.5661C54.134 18.238 55.2091 18.2521 55.8635 17.5978L63.6309 9.83034L61.1978 7.39727L53.4304 15.1647Z" fill="#DEE2EB"/>
+<path d="M58.0847 2.03786C56.9049 2.24201 56.1391 3.36854 56.3743 4.55419C56.6095 5.73997 57.7567 6.53586 58.9367 6.33187L69.3834 4.5259L69.6376 0.0388747L58.0847 2.03786Z" fill="#DEE2EB"/>
+<path d="M55.0947 19.9886C54.4403 20.643 54.4545 21.7181 55.1263 22.39C55.7982 23.0619 56.8734 23.0761 57.5277 22.4217L66.875 13.0744L64.4419 10.6414L55.0947 19.9886Z" fill="#DEE2EB"/>
+<path d="M59.1287 22.4428C58.4743 23.0972 58.4885 24.1723 59.1603 24.8442C59.8322 25.516 60.9074 25.5302 61.5617 24.8758L70.1191 16.3185L67.686 13.8854L59.1287 22.4428Z" fill="#DEE2EB"/>
+<path d="M64.7425 23.3171C64.0881 23.9715 64.1023 25.0467 64.7742 25.7185C65.446 26.3904 66.5212 26.4046 67.1755 25.7502L73.3632 19.5626L70.9301 17.1295L64.7425 23.3171Z" fill="#DEE2EB"/>
+<path d="M60.6712 7.92388L72.8366 20.0892L78.8925 14.0332C81.0738 11.852 81.0265 8.26816 78.787 6.02859L74.7318 1.97348C72.4923 -0.26609 68.9085 -0.313354 66.7272 1.86792L60.6712 7.92388Z" fill="#DEE2EB"/>
+<path d="M62.0511 11.4102L62.8621 12.2212L63.9153 11.168L63.1043 10.3569L62.0511 11.4102Z" fill="#DEE2EB"/>
+<path d="M65.2952 14.6542L66.1062 15.4653L67.1594 14.4121L66.3484 13.601L65.2952 14.6542Z" fill="#DEE2EB"/>
+<path d="M69.0659 17.3717L69.8769 18.1827L70.4035 17.6561L69.5925 16.8451L69.0659 17.3717Z" fill="#DEE2EB"/>
+<path d="M74.7318 1.97348C72.7043 -0.05407 70.8365 -0.0787013 69.6376 0.0388747L69.3778 0.568994L69.5165 0.970987L71.3948 1.79608C71.8348 1.44619 74.84 2.08162 74.7318 1.97348Z" fill="#DEE2EB"/>
+<path d="M27.5676 64.8353C28.222 64.1809 28.2078 63.1058 27.536 62.4339C26.8641 61.762 25.789 61.7479 25.1346 62.4022L17.3671 70.1697L19.8002 72.6027L27.5676 64.8353Z" fill="#DEE2EB"/>
+<path d="M22.9134 77.9621C24.0932 77.758 24.8589 76.6315 24.6237 75.4458C24.3885 74.26 23.2413 73.4641 22.0613 73.6681L11.6146 75.4741L11.3604 79.9611L22.9134 77.9621Z" fill="#DEE2EB"/>
+<path d="M25.9034 60.0114C26.5578 59.357 26.5436 58.2819 25.8717 57.61C25.1998 56.9381 24.1247 56.924 23.4703 57.5783L14.1231 66.9256L16.5561 69.3586L25.9034 60.0114Z" fill="#DEE2EB"/>
+<path d="M21.8694 57.5572C22.5238 56.9028 22.5096 55.8277 21.8377 55.1558C21.1658 54.484 20.0907 54.4698 19.4363 55.1242L10.879 63.6815L13.312 66.1146L21.8694 57.5572Z" fill="#DEE2EB"/>
+<path d="M16.2556 56.6829C16.9099 56.0285 16.8958 54.9533 16.2239 54.2815C15.552 53.6096 14.4769 53.5954 13.8225 54.2498L7.63489 60.4374L10.068 62.8705L16.2556 56.6829Z" fill="#DEE2EB"/>
+<path d="M20.3268 72.0761L8.16149 59.9108L2.10553 65.9668C-0.0757409 68.148 -0.0284779 71.7318 2.2111 73.9714L6.2662 78.0265C8.50578 80.2661 12.0896 80.3134 14.2708 78.1321L20.3268 72.0761Z" fill="#DEE2EB"/>
+<path d="M18.947 68.5898L18.1359 67.7788L17.0827 68.832L17.8938 69.6431L18.947 68.5898Z" fill="#DEE2EB"/>
+<path d="M15.7029 65.3458L14.8919 64.5347L13.8386 65.5879L14.6497 66.399L15.7029 65.3458Z" fill="#DEE2EB"/>
+<path d="M11.9322 62.6283L11.1212 61.8173L10.5946 62.3439L11.4056 63.1549L11.9322 62.6283Z" fill="#DEE2EB"/>
+<path d="M6.2662 78.0265C8.29376 80.0541 10.1615 80.0787 11.3604 79.9611L11.6202 79.431L11.4815 79.029L9.60324 78.2039C9.16322 78.5538 6.15807 77.9184 6.2662 78.0265Z" fill="#DEE2EB"/>
+</svg>

package/src/assets/svgIcons/electricity_tariff.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.36652 9.33445C9.4832 9.20595 9.39203 9 9.21845 9H6.16767L8.29896 0.785289C8.35143 0.583073 8.09775 0.44595 7.95731 0.60061L0.633784 8.66555C0.517096 8.79405 0.608271 9 0.781847 9H3.83263L1.70134 17.2147C1.64887 17.4169 1.90255 17.5541 2.04299 17.3994L9.36652 9.33445Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/flatten_roof.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="8"
+   viewBox="0 0 16 8"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+     transform="translate(-55.350933,-93.588073)">
+    <path
+       fill="#000000"
+       d="m 61.719348,100.39494 1.004406,0.0185 -0.0013,-2.679323 0.88345,-4.27e-4 c -0.0051,-0.01381 -0.01401,2.69128 -0.01401,2.69128 l 1.05348,-0.0159 -1.582401,1.44453 z m -6.368415,-0.817395 7.856738,-5.989472 7.616581,6.321372 -1.240034,1.266145 -6.409573,-5.185912 -6.581971,5.125212 z"
+       id="path874"
+       />
+  </g>
+</svg>

package/src/assets/svgIcons/handle.svg

@@ -0,0 +1,5 @@
+<svg width="11" height="41" viewBox="0 0 11 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="5.5" y1="4" x2="5.5" y2="36" stroke="#DEE2EB"/>
+<path d="M9.5 40C9.5 40.5523 9.05228 41 8.5 41L2.5 41C1.94772 41 1.5 40.5523 1.5 40L1.5 33.618C1.5 33.2393 1.714 32.893 2.05279 32.7236L5.5 31L8.94721 32.7236C9.286 32.893 9.5 33.2393 9.5 33.618L9.5 40Z" fill="#B2B9C5"/>
+<path d="M1.5 1C1.5 0.447715 1.94772 0 2.5 0H8.5C9.05228 0 9.5 0.447715 9.5 1V7.38197C9.5 7.76074 9.286 8.107 8.94721 8.27639L5.5 10L2.05279 8.27639C1.714 8.107 1.5 7.76074 1.5 7.38197V1Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/house_3d-1.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <mask id="path-1-inside-1_57915_53334" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0303 2.75757L0 5.30302V11.2424L3.41022 12.4091V8.96996L4.53143 9.41845V12.7926L8.0606 14V8.0606L4.0303 2.75757Z"/>
+  </mask>
+  <path d="M0 5.30302L-0.694191 4.20389L-1.3 4.5865V5.30302H0ZM4.0303 2.75757L5.06531 1.97096L4.344 1.02187L3.33611 1.65843L4.0303 2.75757ZM0 11.2424H-1.3V12.1716L-0.420794 12.4724L0 11.2424ZM3.41022 12.4091L2.98943 13.6391L4.71022 14.2278V12.4091H3.41022ZM3.41022 8.96996L3.89303 7.76294L2.11022 7.04982V8.96996H3.41022ZM4.53143 9.41845H5.83143V8.5383L5.01424 8.21143L4.53143 9.41845ZM4.53143 12.7926H3.23143V13.7219L4.11064 14.0227L4.53143 12.7926ZM8.0606 14L7.63981 15.23L9.3606 15.8187V14H8.0606ZM8.0606 8.0606H9.3606V7.62266L9.09561 7.27399L8.0606 8.0606ZM0.694191 6.40216L4.72449 3.8567L3.33611 1.65843L-0.694191 4.20389L0.694191 6.40216ZM1.3 11.2424V5.30302H-1.3V11.2424H1.3ZM3.83102 11.1791L0.420794 10.0124L-0.420794 12.4724L2.98943 13.6391L3.83102 11.1791ZM4.71022 12.4091V8.96996H2.11022V12.4091H4.71022ZM2.92741 10.177L4.04862 10.6255L5.01424 8.21143L3.89303 7.76294L2.92741 10.177ZM3.23143 9.41845V12.7926H5.83143V9.41845H3.23143ZM8.48139 12.77L4.95223 11.5626L4.11064 14.0227L7.63981 15.23L8.48139 12.77ZM6.7606 8.0606V14H9.3606V8.0606H6.7606ZM2.99529 3.54418L7.02559 8.8472L9.09561 7.27399L5.06531 1.97096L2.99529 3.54418Z" fill="#0068DE" mask="url(#path-1-inside-1_57915_53334)"/>
+  <path d="M8.55859 13.2165V8.37967L13.498 6.08638V10.9232L8.55859 13.2165Z" fill="#0068DE" stroke="#0068DE"/>
+  <path d="M8.21608 7.43759L4.80515 2.94953L9.81611 0.623007L13.227 5.11107L8.21608 7.43759Z" fill="#0068DE" stroke="#0068DE"/>
+</svg>

package/src/assets/svgIcons/house_3d.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="none">
+  <mask id="path-1-inside-1_57915_3657" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.03081 3.71851L0 6.28736V12.2814L3.41065 13.4587V9.98801L4.532 10.4406V13.8458L8.06161 15.0643V9.07028L4.03081 3.71851Z"/>
+  </mask>
+  <path d="M0 6.28736L-0.698673 5.19107L-1.3 5.5743V6.28736H0ZM4.03081 3.71851L5.06922 2.9364L4.34595 1.9761L3.33213 2.62221L4.03081 3.71851ZM0 12.2814H-1.3V13.2079L-0.424205 13.5102L0 12.2814ZM3.41065 13.4587L2.98645 14.6876L4.71065 15.2828V13.4587H3.41065ZM3.41065 9.98801L3.89722 8.78251L2.11065 8.0614V9.98801H3.41065ZM4.532 10.4406H5.832V9.56343L5.01858 9.23511L4.532 10.4406ZM4.532 13.8458H3.232V14.7723L4.1078 15.0747L4.532 13.8458ZM8.06161 15.0643L7.63741 16.2931L9.36161 16.8883V15.0643H8.06161ZM8.06161 9.07028H9.36161V8.63549L9.10003 8.28818L8.06161 9.07028ZM0.698673 7.38365L4.72948 4.8148L3.33213 2.62221L-0.698673 5.19107L0.698673 7.38365ZM1.3 12.2814V6.28736H-1.3V12.2814H1.3ZM3.83485 12.2299L0.424205 11.0525L-0.424205 13.5102L2.98645 14.6876L3.83485 12.2299ZM4.71065 13.4587V9.98801H2.11065V13.4587H4.71065ZM2.92408 11.1935L4.04543 11.6461L5.01858 9.23511L3.89722 8.78251L2.92408 11.1935ZM3.232 10.4406V13.8458H5.832V10.4406H3.232ZM8.48582 13.8354L4.95621 12.617L4.1078 15.0747L7.63741 16.2931L8.48582 13.8354ZM6.76161 9.07028V15.0643H9.36161V9.07028H6.76161ZM2.99239 4.50061L7.0232 9.85239L9.10003 8.28818L5.06922 2.9364L2.99239 4.50061Z" fill="white" mask="url(#path-1-inside-1_57915_3657)"/>
+  <path d="M8.5625 14.2779V9.38818L13.5026 7.07375V11.9634L8.5625 14.2779Z" fill="white" stroke="white"/>
+  <path d="M8.21735 8.44534L4.80134 3.90984L9.81609 1.56045L13.2321 6.09596L8.21735 8.44534Z" fill="white" stroke="white"/>
+</svg>

package/src/assets/svgIcons/split.svg

@@ -1,94 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   version="1.1"
-   id="svg438"
    width="838"
    height="833"
    viewBox="0 0 838 833"
-   sodipodi:docname="split.svg"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs442">
-    <linearGradient
-       id="linearGradient7383"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#ffffff;stop-opacity:1;"
-         offset="0"
-         id="stop7381" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6933"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop6931" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="namedview440"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="0.95078031"
-     inkscape:cx="466.45896"
-     inkscape:cy="549.02273"
-     inkscape:window-width="1920"
-     inkscape:window-height="1007"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g444" />
-  <g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g444">
-    <circle
-       id="path5141"
-       style="fill:none;stroke:#fffeff;stroke-opacity:1"
-       cx="0.66903824"
-       cy="263.65976"
-       r="0.52949077" />
-    <circle
-       id="path5143"
-       style="fill:none;stroke:#fffeff;stroke-opacity:1"
-       cx="0.66903824"
-       cy="263.65976"
-       r="0.52949077" />
-    <g
-       id="path5184"
-       style="stroke:#fffeff;stroke-opacity:1;fill:none">
-      <path
-         style="color:#000000;fill:none;stroke-width:154.42;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="m -156.35359,113.32885 348.76355,221.92361 744.6236,-498.85799"
-         id="path6861" />
-      <path
-         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 894.06055,-227.75 191.32227,243.04492 -114.9043,48.1875 -197.80273,178.46875 193.49609,427.45898 980.00781,-99.460937 Z"
-         id="path6863" />
-    </g>
-    <g
-       id="path5186"
-       style="stroke:#fffeff;stroke-opacity:1;fill:none">
-      <path
-         style="color:#000000;fill:none;stroke-width:166.34;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 816.06617,905.68984 357.97591,628.01443 1035.7943,176.14788"
-         id="path6855" />
-      <path
-         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 989.66016,106.94531 203.03125,631.34961 772.95312,976.81445 859.17773,834.56641 512.91992,624.67773 1081.9277,245.34961 Z"
-         id="path6857" />
-    </g>
-  </g>
+   >
+
+    <path
+       fill="#B2B9C5"
+       d="m -5.0875843,441.73292 3.3936693,-93.74987 847.237645,-2.85667 -3.71049,95.94711 z m 333.6519143,232.4369 -98.27777,-105.35245 43.34233,-0.60608 c 23.83828,-0.33335 56.95483,-0.67085 73.59233,-0.75 l 30.25,-0.14392 L 376,413.05958 374.48738,213.61969 301.67731,213.3632 228.86724,213.10671 326.58798,107.77384 C 380.33439,49.84076 424.5019,2.3657611 424.73801,2.2738411 425.25724,2.0716911 628.96623,212.59506 628.96623,213.35636 c 0,0.29424 -41.55385,0.25035 -81.97885,0.25035 h -73.5 L 475,413.0466 l 1.47122,154.25779 72.81196,0.25649 72.81196,0.25649 -91.89971,99.5 -103.35334,112.2049 z"
+      />
 </svg>

package/src/assets/svgIcons/summer.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5.3C11.268 5.3 10.6747 4.70667 10.6747 3.97467V1.32533C10.6747 0.593333 11.268 0 12 0C12.732 0 13.3253 0.593333 13.3253 1.32533V3.97467C13.3253 4.70667 12.732 5.3 12 5.3ZM13.3253 22.6747V20.0253C13.3253 19.2933 12.732 18.7 12 18.7C11.268 18.7 10.6747 19.2933 10.6747 20.0253V22.6747C10.6747 23.4067 11.268 24 12 24C12.732 24 13.3253 23.4067 13.3253 22.6747ZM20.0253 13.3253H22.6747C23.4067 13.3253 24 12.732 24 12C24 11.268 23.4067 10.6747 22.6747 10.6747H20.0253C19.2933 10.6747 18.7 11.268 18.7 12C18.7 12.732 19.2933 13.3253 20.0253 13.3253ZM1.32533 13.3253H3.97467C4.70667 13.3253 5.3 12.732 5.3 12C5.3 11.268 4.70667 10.6747 3.97467 10.6747H1.32533C0.593333 10.6747 0 11.268 0 12C0 12.732 0.593333 13.3253 1.32533 13.3253ZM18.612 7.26133L20.4853 5.388C21.0027 4.87067 21.0027 4.032 20.4853 3.51467C19.968 2.99733 19.1293 2.99733 18.612 3.51467L16.7387 5.388C16.2213 5.90533 16.2213 6.744 16.7387 7.26133C17.256 7.77867 18.0947 7.77867 18.612 7.26133ZM5.388 20.4853L7.26133 18.612C7.77867 18.0947 7.77867 17.256 7.26133 16.7387C6.744 16.2213 5.90533 16.2213 5.388 16.7387L3.51467 18.612C2.99733 19.1293 2.99733 19.968 3.51467 20.4853C4.032 21.0027 4.87067 21.0027 5.388 20.4853ZM16.7387 18.612L18.612 20.4853C19.1293 21.0027 19.968 21.0027 20.4853 20.4853C21.0027 19.968 21.0027 19.1293 20.4853 18.612L18.612 16.7387C18.0947 16.2213 17.256 16.2213 16.7387 16.7387C16.2213 17.256 16.2213 18.0947 16.7387 18.612ZM3.51467 5.388L5.388 7.26133C5.90533 7.77867 6.744 7.77867 7.26133 7.26133C7.77867 6.744 7.77867 5.90533 7.26133 5.388L5.388 3.51467C4.87067 2.99733 4.032 2.99733 3.51467 3.51467C2.99733 4.032 2.99733 4.87067 3.51467 5.388ZM12 6.77733C9.07333 6.77733 6.7 9.14933 6.7 12.0773C6.7 15.0053 9.07333 17.376 12 17.376C14.9267 17.376 17.3 15.004 17.3 12.076C17.3 9.148 14.9267 6.77733 12 6.77733Z" fill="#FDB813"/>
+</svg>

package/src/components/banner/actionBanner/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Modal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
+      <modalTitle v-if="$slots.title">
+        <slot name="title"></slot>
+      </modalTitle>
+      <textContainer v-if="$slots.body">
+        <slot name="body"></slot>
+      </textContainer>
+      <buttonContainer v-if="$slots.buttons">
+        <slot name="buttons"></slot>
+      </buttonContainer>
+    </modalContainer>
+  </Modal>
+</template>
+<script>
+import styled from 'vue3-styled-components'
+import { mapActions, mapState } from 'vuex'
+import Modal from '../modal'
+const modalContainer = styled.div`
+  width: 450px;
+  min-height: 205px;
+  padding: 40px 40px 30px 40px;
+`
+const modalTitle = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+  text-transform: uppercase;
+`
+const buttonContainer = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 20px;
+`
+const textContainer = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 30px 0px;
+  white-space: pre-wrap;
+`
+export default {
+  name: 'actionModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
+  }
+}
+</script>

package/src/components/banner/banner/banner.stories.js

@@ -0,0 +1,31 @@
+import Modal from "./index.vue";
+
+export default {
+  title: "Modal",
+  component: Modal,
+  // argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Modal },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<modal v-bind="$props" />',
+
+  // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
+  // This is a more flexible modal box, where the parent can decide how the body of the modal looks
+  // To use:
+  // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+  //   <div>Data....</div>
+  // </modal>
+});
+
+export const Default = Template.bind({
+  isOpen: true,
+  preventOutsideClose: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'dark',
+})
+Default.args = {};

package/src/components/banner/banner/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <page-wrapper
+    :position="position"
+    :isOpen="isOpen"
+    :class="{ visible: isOpen, hidden: !isOpen }"
+    :backdrop="backdrop"
+  >
+    <modal-container @click="onClickModalContainer">
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
+      <close-button v-if="!hideClose" @click="onCloseModal()" class="close" />
+    </modal-container>
+  </page-wrapper>
+</template>
+
+<script>
+// Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
+// 1. On clicking the “escape” key, close the modal onCloseModal()
+// 2. Always prevent outside close
+// import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
+// This is a more flexible modal box, where the parent can decide how the body of the modal looks
+// To use:
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
+//   <div>Data....</div>
+// </modal>
+
+import styled from 'vue3-styled-components'
+import CloseButton from '../../buttons/closeButton'
+import Spinner from '../../spinner'
+
+const contentAttrs = { visible: Boolean }
+const ContentContainer = styled('div', contentAttrs)`
+  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
+`
+
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
+const PageWrapper = styled('div', pageAttrs)`
+  position: ${(props) => props.position}
+  display: grid;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${(props) =>
+    props.backdrop == 'dark'
+      ? 'rgba(0, 0, 0, 0.4)'
+      : 'rgba(255, 255, 255, 0.9)'};
+  z-index: 99999;
+  overflow: auto;
+
+  &.visible {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0s linear 0s, opacity 300ms;
+  }
+
+  &.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s linear 300ms, opacity 300ms;
+  }
+
+  @media (max-width: 425px) {
+    background: white;
+  }
+`
+
+const ModalContainer = styled.div`
+  align-self: center;
+  justify-self: center;
+  position: relative;
+  box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  background: white;
+  margin: 0 auto;
+  overflow: auto;
+  max-width: 95%;
+  max-height: 95%;
+  min-width: 100px;
+  min-height: 100px;
+
+  ::-webkit-scrollbar {
+    width: 0.3em;
+    height: 100%;
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
+  /* Make scrollbar visible when needed */
+  ::-webkit-scrollbar-thumb {
+    background-color: ${(props) => props.theme.colors.grey3};
+  }
+
+  /* Make scrollbar track visible when needed */
+  ::-webkit-scrollbar-track {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
+  .close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+
+    @media (max-width: 425px) {
+      right: 14px;
+      top: 12px;
+      background: white;
+      position: fixed;
+      z-index: 99;
+    }
+  }
+
+  @media (max-width: 425px) {
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+  }
+`
+
+export default {
+  name: 'modal',
+  components: {
+    PageWrapper,
+    ModalContainer,
+    CloseButton,
+    Spinner,
+    ContentContainer
+  },
+  props: {
+    isOpen: {
+      required: true,
+      default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
+    },
+    hideClose: {
+      required: false,
+      default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
+    },
+    position: {
+      required: false,
+      default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
+  methods: {
+    onCloseModal() {
+      this.$emit('on-close')
+    },
+    handleKeyDown({ key }) {
+      if (key === 'Escape') {
+        this.onCloseModal()
+      }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
+      }
+    }
+  },
+  watch: {
+    isOpen: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : ''
+        if (isOpen) {
+          window.addEventListener('keydown', this.handleKeyDown)
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown)
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/banner/infoBanner/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <ActionModal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
+      <template name="title">
+        <slot name="title"></slot>
+      </template>
+      <template name="body">
+        <slot name="body"></slot>
+      </template>
+      <template name="buttons">
+        <buttonContainer>
+          <Button type="primary" :text="$gettext('Got it')" minWidth="150px" @click="closeModal" />
+        </buttonContainer>
+      </template>
+
+    </modalContainer>
+  </ActionModal>
+</template>
+<script>
+
+import styled from 'vue3-styled-components'
+import ActionModal from '../actionModal'
+
+const modalContainer = styled.div`
+  width: 450px;
+  min-height: 205px;
+  padding: 40px 40px 30px 40px;
+`
+const modalTitle = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+  text-transform: uppercase;
+`
+const buttonContainer = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 20px;
+`
+const textContainer = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 30px 0px;
+  white-space: pre-wrap;
+`
+export default {
+  name: 'InfoModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
+  }
+}
+</script>