@gataca/qr 4.0.0 → 4.0.2

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 (42) hide show
  1. package/dist/cjs/{gat-icon-check-c88a30ed.js → gat-icon-check-6b6780eb.js} +0 -3
  2. package/dist/cjs/gataca-autoqr.cjs.entry.js +1 -1
  3. package/dist/cjs/gataca-qr_3.cjs.entry.js +50 -31
  4. package/dist/cjs/gataca-qrws.cjs.entry.js +5 -3
  5. package/dist/cjs/gataca-ssibuttonws.cjs.entry.js +1 -1
  6. package/dist/cjs/gatacaqr.cjs.js +1 -1
  7. package/dist/cjs/{index-93d47a75.js → index-1332a8ce.js} +32 -1
  8. package/dist/cjs/loader.cjs.js +1 -1
  9. package/dist/collection/assets/icons/RefreshIcon.js +6 -0
  10. package/dist/collection/components/gataca-qr/components/readQR/ReadQR.js +6 -3
  11. package/dist/collection/components/gataca-qr/components/readQR/components/AnimatedLoader.js +4 -2
  12. package/dist/collection/components/gataca-qr/components/retryButton/RetryButton.js +9 -6
  13. package/dist/collection/components/gataca-qr/components/success/Success.js +3 -2
  14. package/dist/collection/components/gataca-qr/gataca-qr.css +15 -5
  15. package/dist/collection/components/gataca-qr/gataca-qr.js +10 -8
  16. package/dist/collection/components/gataca-ssibutton/gataca-ssibutton.js +1 -1
  17. package/dist/components/gat-icon-check.js +1 -3
  18. package/dist/components/gataca-qr2.js +49 -30
  19. package/dist/components/gataca-qrws2.js +3 -1
  20. package/dist/esm/{gat-icon-check-c188cd29.js → gat-icon-check-7320c81b.js} +1 -3
  21. package/dist/esm/gataca-autoqr.entry.js +1 -1
  22. package/dist/esm/gataca-qr_3.entry.js +50 -31
  23. package/dist/esm/gataca-qrws.entry.js +4 -2
  24. package/dist/esm/gataca-ssibuttonws.entry.js +1 -1
  25. package/dist/esm/gatacaqr.js +1 -1
  26. package/dist/esm/{index-2be54f32.js → index-055790a7.js} +32 -1
  27. package/dist/esm/loader.js +1 -1
  28. package/dist/gatacaqr/gatacaqr.esm.js +1 -1
  29. package/dist/gatacaqr/{p-5be73956.js → p-29119208.js} +1 -1
  30. package/dist/gatacaqr/{p-e94e9be8.entry.js → p-49cf321c.entry.js} +1 -1
  31. package/dist/gatacaqr/{p-948e7d94.entry.js → p-9f83bae1.entry.js} +1 -1
  32. package/dist/gatacaqr/{p-5e81ab9e.entry.js → p-c65f810b.entry.js} +1 -1
  33. package/dist/gatacaqr/p-f185cc34.entry.js +1 -0
  34. package/dist/gatacaqr/p-fccf9d4d.js +2 -0
  35. package/dist/types/assets/icons/RefreshIcon.d.ts +8 -0
  36. package/dist/types/components/gataca-qr/components/readQR/components/AnimatedLoader.d.ts +5 -1
  37. package/dist/types/components/gataca-qr/components/retryButton/RetryButton.d.ts +2 -0
  38. package/dist/types/components/gataca-qr/components/success/Success.d.ts +2 -0
  39. package/dist/types/components/gataca-qr/gataca-qr.d.ts +3 -0
  40. package/package.json +1 -1
  41. package/dist/gatacaqr/p-5ae5f952.js +0 -2
  42. package/dist/gatacaqr/p-fb41fad9.entry.js +0 -1
package/dist/cjs/{gat-icon-check-c88a30ed.js → gat-icon-check-6b6780eb.js} RENAMED
@@ -27,8 +27,6 @@ var qrCodeStyling = createCommonjsModule(function (module, exports) {
27
27
 
28
28
  const QRCodeStyling = /*@__PURE__*/getDefaultExportFromCjs(qrCodeStyling);
29
29
 
30
- const gatIconRefreshSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDRWMTBIMTciIHN0cm9rZT0iIzhCOEI4QiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIwLjQ4OTkgMTVDMTkuODM5OSAxNi44Mzk5IDE4LjYwOTQgMTguNDE4NyAxNi45ODQgMTkuNDk4NUMxNS4zNTg2IDIwLjU3ODMgMTMuNDI2MyAyMS4xMDA2IDExLjQ3ODMgMjAuOTg2NkM5LjUzMDI2IDIwLjg3MjYgNy42NzIwMyAyMC4xMjg2IDYuMTgzNjMgMTguODY2N0M0LjY5NTI0IDE3LjYwNDcgMy42NTczIDE1Ljg5MzIgMy4yMjYyNSAxMy45OTAxQzIuNzk1MTkgMTIuMDg2OSAyLjk5NDM2IDEwLjA5NTIgMy43OTM3NCA4LjMxNTA4QzQuNTkzMTMgNi41MzQ5NiA1Ljk0OTQyIDUuMDYyODggNy42NTgyMyA0LjEyMDY1QzkuMzY3MDUgMy4xNzg0MyAxMS4zMzU4IDIuODE3MTEgMTMuMjY3OCAzLjA5MTE2QzE1LjE5OTkgMy4zNjUyIDE2Ljk5MDUgNC4yNTk3NSAxOC4zNjk5IDUuNjQwMDFMMjIuOTk5OSAxMCIgc3Ryb2tlPSIjOEI4QjhCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
31
-
32
30
  const gatIconAlertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjI5MDggMy44NjAyTDEuODIwNzUgMTguMDAwMkMxLjY0NjEyIDE4LjMwMjYgMS41NTM3MiAxOC42NDU1IDEuNTUyNzQgMTguOTk0N0MxLjU1MTc2IDE5LjM0MzkgMS42NDIyNCAxOS42ODczIDEuODE1MTggMTkuOTkwN0MxLjk4ODEyIDIwLjI5NDEgMi4yMzc0OCAyMC41NDcgMi41Mzg0NiAyMC43MjQxQzIuODM5NDQgMjAuOTAxMiAzLjE4MTU1IDIwLjk5NjQgMy41MzA3NSAyMS4wMDAySDIwLjQ3MDhDMjAuODIgMjAuOTk2NCAyMS4xNjIxIDIwLjkwMTIgMjEuNDYzIDIwLjcyNDFDMjEuNzY0IDIwLjU0NyAyMi4wMTM0IDIwLjI5NDEgMjIuMTg2MyAxOS45OTA3QzIyLjM1OTMgMTkuNjg3MyAyMi40NDk3IDE5LjM0MzkgMjIuNDQ4OCAxOC45OTQ3QzIyLjQ0NzggMTguNjQ1NSAyMi4zNTU0IDE4LjMwMjYgMjIuMTgwOCAxOC4wMDAyTDEzLjcxMDggMy44NjAyQzEzLjUzMjUgMy41NjYzMSAxMy4yODE1IDMuMzIzMzIgMTIuOTgxOSAzLjE1NDY5QzEyLjY4MjQgMi45ODYwNSAxMi4zNDQ1IDIuODk3NDYgMTIuMDAwOCAyLjg5NzQ2QzExLjY1NyAyLjg5NzQ2IDExLjMxOTEgMi45ODYwNSAxMS4wMTk2IDMuMTU0NjlDMTAuNzIgMy4zMjMzMiAxMC40NjkgMy41NjYzMSAxMC4yOTA4IDMuODYwMlYzLjg2MDJaIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiA5VjEzIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiAxN0gxMi4wMSIgc3Ryb2tlPSIjQ0QyQjMxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
33
31
 
34
32
  const gatIconCheckSvg = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUyIiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgNTIgNTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjI2IiBjeT0iMjYuNjcxOSIgcj0iMjYiIGZpbGw9IiMzRDlBNTAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zOC41MiAxNy43NDk1QzM5LjU4MDUgMTguODA5OSAzOS41ODA1IDIwLjUyOTMgMzguNTIgMjEuNTg5OEwyMy41ODQ2IDM2LjUyNTFDMjIuNTI0MiAzNy41ODU2IDIwLjgwNDggMzcuNTg1NiAxOS43NDQzIDM2LjUyNTFMMTIuOTU1NSAyOS43MzYzQzExLjg5NSAyOC42NzU5IDExLjg5NSAyNi45NTY1IDEyLjk1NTUgMjUuODk2QzE0LjAxNiAyNC44MzU1IDE1LjczNTQgMjQuODM1NSAxNi43OTU4IDI1Ljg5NkwyMS42NjQ1IDMwLjc2NDdMMzQuNjc5NyAxNy43NDk1QzM1Ljc0MDIgMTYuNjg5IDM3LjQ1OTUgMTYuNjg5IDM4LjUyIDE3Ljc0OTVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
@@ -36,5 +34,4 @@ const gatIconCheckSvg = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUyIiBoZWlna
36
34
  exports.QRCodeStyling = QRCodeStyling;
37
35
  exports.gatIconAlertSvg = gatIconAlertSvg;
38
36
  exports.gatIconCheckSvg = gatIconCheckSvg;
39
- exports.gatIconRefreshSvg = gatIconRefreshSvg;
40
37
  exports.logoGatacaSvg = logoGatacaSvg;
package/dist/cjs/gataca-autoqr.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-93d47a75.js');
5
+ const index = require('./index-1332a8ce.js');
6
6
 
7
7
  const gatacaAutoqrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.buttonContainer{display:inline-block;text-align:right;padding:10px;position:relative}.gatacaButtonWrapper{margin:8px}.gatacaButtonWrapper .gatacaButton{display:flex;min-width:100px;padding:8px 8px;background-color:white;font-size:12px;font-family:\"Work Sans\", sans-serif;letter-spacing:1px;font-weight:2;justify-content:space-between;align-items:center;border-radius:6px;border:1px solid rgba(24, 27, 94, 0.5);color:rgba(24, 27, 94, 0.8);box-shadow:0px 1px 3px rgba(48, 48, 48, 0.15);cursor:pointer}.gatacaButtonWrapper .gatacaButton>span{margin-right:10px}.gatacaButtonWrapper .gatacaButton:hover{box-shadow:0px 2px 8px rgba(48, 48, 48, 0.1)}.gatacaButtonWrapper .buttonText{text-align:right;font-size:8px;color:rgba(24, 27, 94, 0.5);font-family:\"Helvetica Neue\", sans-serif;letter-spacing:1px;padding-right:8px;font-weight:1}.gatacaButtonWrapper .buttonImg{height:25px;width:25px;margin:0;margin-right:20px}";
8
8
 
package/dist/cjs/gataca-qr_3.cjs.entry.js CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-93d47a75.js');
6
- const gatIconCheck = require('./gat-icon-check-c88a30ed.js');
5
+ const index = require('./index-1332a8ce.js');
6
+ const gatIconCheck = require('./gat-icon-check-6b6780eb.js');
7
7
  const utils = require('./utils-b4e62bc0.js');
8
8
 
9
9
  const GatacaQRDisplay = class {
@@ -58,8 +58,10 @@ const QR = (props) => {
58
58
  return index.h("gataca-qrdisplay", { qrData: value, rounded: true, qrType: qrType, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc, qrColor: style === null || style === void 0 ? void 0 : style.color, bgColor: style === null || style === void 0 ? void 0 : style.bgColor });
59
59
  };
60
60
 
61
- const AnimatedLoader = () => {
62
- return (index.h("div", { class: "containerLoader" },
61
+ const AnimatedLoader = (props) => {
62
+ const { color = '#4745B7' } = props;
63
+ const style = { '--loader-color': color };
64
+ return (index.h("div", { class: "containerLoader", style: style },
63
65
  index.h("div", { class: "loader" },
64
66
  index.h("div", { class: "loader__item loader__item__1" }),
65
67
  index.h("div", { class: "loader__item loader__item__2" }),
@@ -74,52 +76,67 @@ const AnimatedLoader = () => {
74
76
  const ReadQR = (props) => {
75
77
  var _a;
76
78
  const { modalWidth, readQrMessages, renderQR, url, sizeQR, style } = props;
79
+ const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
80
+ const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
77
81
  return (index.h("div", { class: "blured", style: {
78
82
  width: (modalWidth - 48).toString() + 'px',
79
83
  height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
80
84
  backgroundColor: style === null || style === void 0 ? void 0 : style.bgColor,
81
- color: style === null || style === void 0 ? void 0 : style.color
85
+ color: style === null || style === void 0 ? void 0 : style.color,
86
+ border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
82
87
  } },
83
- index.h("div", { id: "notify" },
84
- index.h(AnimatedLoader, null),
85
- index.h("p", { class: "notify-text" }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
88
+ index.h("div", { id: "notify", style: bgStyle },
89
+ index.h(AnimatedLoader, { color: style === null || style === void 0 ? void 0 : style.color }),
90
+ index.h("p", { class: "notify-text", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
86
91
  readQrMessages.title,
87
- " "),
88
- index.h("p", { class: "notify-text bold" }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)),
92
+ ' '),
93
+ index.h("p", { class: "notify-text bold", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)),
89
94
  index.h("div", { id: "qrwait" }, renderQR(url, false, sizeQR))));
90
95
  };
91
96
 
97
+ const RefreshIcon = (props) => {
98
+ const { height = 24, width = 24, color } = props;
99
+ const strokeColor = color ? color : '#8B8B8B';
100
+ return (index.h("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
101
+ index.h("path", { d: "M23 4V10H17", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
102
+ index.h("path", { d: "M20.4899 15C19.8399 16.8399 18.6094 18.4187 16.984 19.4985C15.3586 20.5783 13.4263 21.1006 11.4783 20.9866C9.53026 20.8726 7.67203 20.1286 6.18363 18.8667C4.69524 17.6047 3.6573 15.8932 3.22625 13.9901C2.79519 12.0869 2.99436 10.0952 3.79374 8.31508C4.59313 6.53496 5.94942 5.06288 7.65823 4.12065C9.36705 3.17843 11.3358 2.81711 13.2678 3.09116C15.1999 3.3652 16.9905 4.25975 18.3699 5.64001L22.9999 10", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
103
+ };
104
+
92
105
  const RetryButton = (props) => {
93
106
  var _a;
94
- const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR } = props;
107
+ const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, style, display, renderRetryQR } = props;
108
+ const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
109
+ const alertBgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.alertBgColor) ? style === null || style === void 0 ? void 0 : style.alertBgColor : '#ffdedf' };
110
+ const alertBorderColor = { borderColor: (style === null || style === void 0 ? void 0 : style.alertBorderColor) ? style === null || style === void 0 ? void 0 : style.alertBorderColor : '#ee888c' };
111
+ const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
95
112
  return (index.h("div", { class: "reload", style: {
96
113
  width: (modalWidth - 48).toString() + 'px',
97
- height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
114
+ height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
115
+ border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
98
116
  } },
99
- index.h("div", { id: "notify", onClick: () => display() },
100
- index.h("img", { src: gatIconCheck.gatIconRefreshSvg, height: 24, width: 24 }),
101
- index.h("p", { class: "notify-text" },
117
+ index.h("div", { id: "notify", onClick: () => display(), style: bgStyle },
118
+ index.h(RefreshIcon, { color: style === null || style === void 0 ? void 0 : style.color, height: 24, width: 24 }),
119
+ index.h("p", { class: "notify-text", style: color },
102
120
  clickInsideBoxLabel,
103
- " "),
104
- errorMessage ? index.h("p", { class: "notify-text bold" }, refreshQrLabel) : index.h("p", { class: "notify-text bold" }, scanQrLabel),
105
- errorMessage && (index.h("div", { class: "alert", style: {
106
- width: (modalWidth - 48).toString() + 'px'
107
- } },
121
+ ' '),
122
+ errorMessage ? (index.h("p", { class: "notify-text bold", style: color }, refreshQrLabel)) : (index.h("p", { class: "notify-text bold", style: color }, scanQrLabel)),
123
+ errorMessage && (index.h("div", { class: "alert", style: Object.assign(Object.assign({ width: (modalWidth - 48).toString() + 'px' }, alertBgStyle), { border: `1px solid ${alertBorderColor}` }) },
108
124
  index.h("img", { src: gatIconCheck.gatIconAlertSvg, height: 24, width: 24 }),
109
- index.h("p", null, errorMessage)))),
125
+ index.h("p", { style: { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' } }, errorMessage)))),
110
126
  index.h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
111
127
  };
112
128
 
113
129
  const Success = (props) => {
114
- const { modalHeight, successLoginLabel } = props;
130
+ const { modalHeight, successLoginLabel, style } = props;
131
+ const colorStyle = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' };
115
132
  return (index.h("div", { class: 'success', style: {
116
133
  height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + 'px' : '300px'
117
134
  } },
118
135
  index.h("img", { src: gatIconCheck.gatIconCheckSvg, height: 52, width: 52 }),
119
- index.h("p", { class: "successMsg" }, successLoginLabel)));
136
+ index.h("p", { class: "successMsg", style: colorStyle }, successLoginLabel)));
120
137
  };
121
138
 
122
- const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:12px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>img{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background:transparent;border-radius:2px}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{background:#4745B7}100%{background:#CCCBF8}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
139
+ const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:20px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>svg{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background-color:var(--loader-color, #4745B7);border-radius:2px;--to-opacity:1;opacity:var(--to-opacity)}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);--to-opacity:calc(1 - (0 / 8));animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);--to-opacity:calc(1 - (1 / 8));animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);--to-opacity:calc(1 - (2 / 8));animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);--to-opacity:calc(1 - (3 / 8));animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);--to-opacity:calc(1 - (4 / 8));animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);--to-opacity:calc(1 - (5 / 8));animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);--to-opacity:calc(1 - (6 / 8));animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);--to-opacity:calc(1 - (7 / 8));animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{opacity:1}100%{opacity:var(--to-opacity)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
123
140
 
124
141
  const DEEP_LINK_PREFIX = 'https://api.gataca.io/qr/redirect.html';
125
142
  //Default values
@@ -240,7 +257,7 @@ const GatacaQR = class {
240
257
  renderQRSection() {
241
258
  switch (this.result) {
242
259
  case utils.RESULT_STATUS.NOT_STARTED:
243
- return this.renderRetryButton();
260
+ return this.renderQR(this.getLink(), true);
244
261
  case utils.RESULT_STATUS.ONGOING:
245
262
  return this.renderQR(this.getLink(), true);
246
263
  case utils.RESULT_STATUS.EXPIRED:
@@ -257,13 +274,13 @@ const GatacaQR = class {
257
274
  }
258
275
  }
259
276
  renderSuccess() {
260
- return index.h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel });
277
+ return index.h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel, style: this === null || this === void 0 ? void 0 : this.qrStyle });
261
278
  }
262
279
  renderRetryButton(errorMessage) {
263
- return (index.h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this) }));
280
+ return (index.h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this), style: this === null || this === void 0 ? void 0 : this.qrStyle }));
264
281
  }
265
282
  renderReadQR(readQrMessages) {
266
- return index.h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this) });
283
+ return (index.h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this), style: this.qrStyle }));
267
284
  }
268
285
  renderQR(value, useLogo, sizeQR) {
269
286
  return index.h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
@@ -272,15 +289,17 @@ const GatacaQR = class {
272
289
  return index.h(QR, { value: value, useLogo: useLogo && this.logoSize !== 0, qrType: this.qrType, size: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
273
290
  }
274
291
  render() {
275
- var _a, _b;
292
+ var _a, _b, _c, _d, _e, _f;
276
293
  return (index.h("div", { class: "popUpContainer" }, index.h("div", { class: `is-visible modal-window ${this.hideModalTexts ? '' : 'large-modal'} ${this.hideModalBoxShadow ? 'noBoxShadow' : ''}`, style: {
277
294
  width: (this.modalWidth - 2).toString() + 'px',
278
- height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
295
+ height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
296
+ backgroundColor: ((_b = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _b === void 0 ? void 0 : _b.bgColor) ? (_c = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _c === void 0 ? void 0 : _c.bgColor : 'white',
297
+ boxShadow: ((_d = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _d === void 0 ? void 0 : _d.boxShadow) ? (_e = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _e === void 0 ? void 0 : _e.boxShadow : '0px 3px 10px rgba(48, 48, 48, 0.1);'
279
298
  }, onClick: (event) => {
280
299
  event.stopPropagation();
281
300
  } }, index.h("div", { class: "modal-window__content" }, index.h("div", { class: `qrTitleContainer ${this.hideModalTexts ? 'hidenText' : ''}` }, index.h("p", { class: "qrTitle modalText", style: { color: this.modalTitleColor || '#1e1e20' } }, this.qrModalTitle), !this.hideBrandTitle && (index.h("p", { class: "qrBrand modalText" }, this.byBrandLabel, ' ', index.h("span", null, index.h("img", { src: gatIconCheck.logoGatacaSvg })))), this.result !== utils.RESULT_STATUS.SUCCESS && !this.hideQrModalDescription && index.h("p", { class: "qrDescription modalText" }, this.qrModalDescription)), index.h("div", { class: "qrSection", style: {
282
301
  width: this.modalWidth.toString() + 'px',
283
- height: this.modalWidth ? ((_b = this.modalWidth) === null || _b === void 0 ? void 0 : _b.toString()) + 'px' : ''
302
+ height: this.modalWidth ? ((_f = this.modalWidth) === null || _f === void 0 ? void 0 : _f.toString()) + 'px' : ''
284
303
  } }, this.renderQRSection())))));
285
304
  }
286
305
  };
package/dist/cjs/gataca-qrws.cjs.entry.js CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-93d47a75.js');
6
- const gatIconCheck = require('./gat-icon-check-c88a30ed.js');
5
+ const index = require('./index-1332a8ce.js');
6
+ const gatIconCheck = require('./gat-icon-check-6b6780eb.js');
7
7
  const utils = require('./utils-b4e62bc0.js');
8
8
 
9
9
  const Success = (props) => {
@@ -15,6 +15,8 @@ const Success = (props) => {
15
15
  index.h("p", { class: "successMsg" }, successLoginLabel)));
16
16
  };
17
17
 
18
+ const gatIconRefreshSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDRWMTBIMTciIHN0cm9rZT0iIzhCOEI4QiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIwLjQ4OTkgMTVDMTkuODM5OSAxNi44Mzk5IDE4LjYwOTQgMTguNDE4NyAxNi45ODQgMTkuNDk4NUMxNS4zNTg2IDIwLjU3ODMgMTMuNDI2MyAyMS4xMDA2IDExLjQ3ODMgMjAuOTg2NkM5LjUzMDI2IDIwLjg3MjYgNy42NzIwMyAyMC4xMjg2IDYuMTgzNjMgMTguODY2N0M0LjY5NTI0IDE3LjYwNDcgMy42NTczIDE1Ljg5MzIgMy4yMjYyNSAxMy45OTAxQzIuNzk1MTkgMTIuMDg2OSAyLjk5NDM2IDEwLjA5NTIgMy43OTM3NCA4LjMxNTA4QzQuNTkzMTMgNi41MzQ5NiA1Ljk0OTQyIDUuMDYyODggNy42NTgyMyA0LjEyMDY1QzkuMzY3MDUgMy4xNzg0MyAxMS4zMzU4IDIuODE3MTEgMTMuMjY3OCAzLjA5MTE2QzE1LjE5OTkgMy4zNjUyIDE2Ljk5MDUgNC4yNTk3NSAxOC4zNjk5IDUuNjQwMDFMMjIuOTk5OSAxMCIgc3Ryb2tlPSIjOEI4QjhCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
19
+
18
20
  const RetryButton = (props) => {
19
21
  var _a;
20
22
  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR } = props;
@@ -23,7 +25,7 @@ const RetryButton = (props) => {
23
25
  height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
24
26
  } },
25
27
  index.h("div", { id: "notify", onClick: () => display() },
26
- index.h("img", { src: gatIconCheck.gatIconRefreshSvg, height: 24, width: 24 }),
28
+ index.h("img", { src: gatIconRefreshSvg, height: 24, width: 24 }),
27
29
  index.h("p", { class: "notify-text" },
28
30
  clickInsideBoxLabel,
29
31
  " "),
package/dist/cjs/gataca-ssibuttonws.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-93d47a75.js');
5
+ const index = require('./index-1332a8ce.js');
6
6
 
7
7
  const gatacaSsibuttonwsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.buttonContainer{display:inline-block;text-align:right;padding:10px;position:relative}.gatacaButtonWrapper{margin:8px}.gatacaButtonWrapper .gatacaButton{display:flex;min-width:100px;padding:8px 8px;background-color:white;font-size:12px;font-family:\"Work Sans\", sans-serif;letter-spacing:1px;font-weight:2;justify-content:space-between;align-items:center;border-radius:6px;border:1px solid rgba(24, 27, 94, 0.5);color:rgba(24, 27, 94, 0.8);box-shadow:0px 1px 3px rgba(48, 48, 48, 0.15);cursor:pointer}.gatacaButtonWrapper .gatacaButton>span{margin-right:10px}.gatacaButtonWrapper .gatacaButton:hover{box-shadow:0px 2px 8px rgba(48, 48, 48, 0.1)}.gatacaButtonWrapper .buttonText{text-align:right;font-size:8px;color:rgba(24, 27, 94, 0.5);font-family:\"Helvetica Neue\", sans-serif;letter-spacing:1px;padding-right:8px;font-weight:1}.gatacaButtonWrapper .buttonImg{height:25px;width:25px;margin:0;margin-right:20px}";
8
8
 
package/dist/cjs/gatacaqr.cjs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-93d47a75.js');
3
+ const index = require('./index-1332a8ce.js');
4
4
 
5
5
  /*
6
6
  Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com
package/dist/cjs/{index-93d47a75.js → index-1332a8ce.js} RENAMED
@@ -57,6 +57,11 @@ const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
57
57
  * Don't add values to these!!
58
58
  */
59
59
  const EMPTY_OBJ = {};
60
+ /**
61
+ * Namespaces
62
+ */
63
+ const SVG_NS = 'http://www.w3.org/2000/svg';
64
+ const HTML_NS = 'http://www.w3.org/1999/xhtml';
60
65
  const isDef = (v) => v != null;
61
66
  const isComplexType = (o) => {
62
67
  // https://jsperf.com/typeof-fn-object/5
@@ -485,8 +490,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
485
490
  elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
486
491
  }
487
492
  else {
493
+ if (!isSvgMode) {
494
+ isSvgMode = newVNode.$tag$ === 'svg';
495
+ }
488
496
  // create element
489
- elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
497
+ elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$tag$)
498
+ );
499
+ if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
500
+ isSvgMode = false;
501
+ }
490
502
  // add css classes, attrs, props, listeners, etc.
491
503
  {
492
504
  updateElement(null, newVNode, isSvgMode);
@@ -507,6 +519,16 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
507
519
  }
508
520
  }
509
521
  }
522
+ {
523
+ if (newVNode.$tag$ === 'svg') {
524
+ // Only reset the SVG context when we're exiting <svg> element
525
+ isSvgMode = false;
526
+ }
527
+ else if (elm.tagName === 'foreignObject') {
528
+ // Reenter SVG context when we're exiting <foreignObject> element
529
+ isSvgMode = true;
530
+ }
531
+ }
510
532
  }
511
533
  return elm;
512
534
  };
@@ -744,8 +766,14 @@ const patch = (oldVNode, newVNode) => {
744
766
  const elm = (newVNode.$elm$ = oldVNode.$elm$);
745
767
  const oldChildren = oldVNode.$children$;
746
768
  const newChildren = newVNode.$children$;
769
+ const tag = newVNode.$tag$;
747
770
  const text = newVNode.$text$;
748
771
  if (text === null) {
772
+ {
773
+ // test if we're rendering an svg element, or still rendering nodes inside of one
774
+ // only add this to the when the compiler sees we're using an svg somewhere
775
+ isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
776
+ }
749
777
  {
750
778
  {
751
779
  // either this is the first render of an element OR it's an update
@@ -772,6 +800,9 @@ const patch = (oldVNode, newVNode) => {
772
800
  // no new child vnodes, but there are old child vnodes to remove
773
801
  removeVnodes(oldChildren, 0, oldChildren.length - 1);
774
802
  }
803
+ if (isSvgMode && tag === 'svg') {
804
+ isSvgMode = false;
805
+ }
775
806
  }
776
807
  else if (oldVNode.$text$ !== text) {
777
808
  // update the text content for the text only vnode
package/dist/cjs/loader.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-93d47a75.js');
5
+ const index = require('./index-1332a8ce.js');
6
6
 
7
7
  /*
8
8
  Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
package/dist/collection/assets/icons/RefreshIcon.js ADDED
@@ -0,0 +1,6 @@
1
+ import { h } from '@stencil/core';
2
+ export const RefreshIcon = (props) => {
3
+ const { height = 24, width = 24, color } = props;
4
+ const strokeColor = color ? color : '#8B8B8B';
5
+ return (h("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M23 4V10H17", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M20.4899 15C19.8399 16.8399 18.6094 18.4187 16.984 19.4985C15.3586 20.5783 13.4263 21.1006 11.4783 20.9866C9.53026 20.8726 7.67203 20.1286 6.18363 18.8667C4.69524 17.6047 3.6573 15.8932 3.22625 13.9901C2.79519 12.0869 2.99436 10.0952 3.79374 8.31508C4.59313 6.53496 5.94942 5.06288 7.65823 4.12065C9.36705 3.17843 11.3358 2.81711 13.2678 3.09116C15.1999 3.3652 16.9905 4.25975 18.3699 5.64001L22.9999 10", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
6
+ };
package/dist/collection/components/gataca-qr/components/readQR/ReadQR.js CHANGED
@@ -3,11 +3,14 @@ import { AnimatedLoader } from './components/AnimatedLoader';
3
3
  export const ReadQR = (props) => {
4
4
  var _a;
5
5
  const { modalWidth, readQrMessages, renderQR, url, sizeQR, style } = props;
6
+ const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
7
+ const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
6
8
  return (h("div", { class: "blured", style: {
7
9
  width: (modalWidth - 48).toString() + 'px',
8
10
  height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
9
11
  backgroundColor: style === null || style === void 0 ? void 0 : style.bgColor,
10
- color: style === null || style === void 0 ? void 0 : style.color
11
- } }, h("div", { id: "notify" }, h(AnimatedLoader, null), h("p", { class: "notify-text" }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
12
- readQrMessages.title, " "), h("p", { class: "notify-text bold" }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)), h("div", { id: "qrwait" }, renderQR(url, false, sizeQR))));
12
+ color: style === null || style === void 0 ? void 0 : style.color,
13
+ border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
14
+ } }, h("div", { id: "notify", style: bgStyle }, h(AnimatedLoader, { color: style === null || style === void 0 ? void 0 : style.color }), h("p", { class: "notify-text", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
15
+ readQrMessages.title, ' '), h("p", { class: "notify-text bold", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)), h("div", { id: "qrwait" }, renderQR(url, false, sizeQR))));
13
16
  };
package/dist/collection/components/gataca-qr/components/readQR/components/AnimatedLoader.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import { h } from '@stencil/core';
2
- export const AnimatedLoader = () => {
3
- return (h("div", { class: "containerLoader" }, h("div", { class: "loader" }, h("div", { class: "loader__item loader__item__1" }), h("div", { class: "loader__item loader__item__2" }), h("div", { class: "loader__item loader__item__3" }), h("div", { class: "loader__item loader__item__4" }), h("div", { class: "loader__item loader__item__5" }), h("div", { class: "loader__item loader__item__6" }), h("div", { class: "loader__item loader__item__7" }), h("div", { class: "loader__item loader__item__8" }))));
2
+ export const AnimatedLoader = (props) => {
3
+ const { color = '#4745B7' } = props;
4
+ const style = { '--loader-color': color };
5
+ return (h("div", { class: "containerLoader", style: style }, h("div", { class: "loader" }, h("div", { class: "loader__item loader__item__1" }), h("div", { class: "loader__item loader__item__2" }), h("div", { class: "loader__item loader__item__3" }), h("div", { class: "loader__item loader__item__4" }), h("div", { class: "loader__item loader__item__5" }), h("div", { class: "loader__item loader__item__6" }), h("div", { class: "loader__item loader__item__7" }), h("div", { class: "loader__item loader__item__8" }))));
4
6
  };
package/dist/collection/components/gataca-qr/components/retryButton/RetryButton.js CHANGED
@@ -1,13 +1,16 @@
1
1
  import { h } from '@stencil/core';
2
- import refreshIcon from '../../../../assets/icons/gat-icon-refresh.svg';
3
2
  import alertIcon from '../../../../assets/icons/gat-icon-alert.svg';
3
+ import { RefreshIcon } from '../../../../assets/icons/RefreshIcon';
4
4
  export const RetryButton = (props) => {
5
5
  var _a;
6
- const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR } = props;
6
+ const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, style, display, renderRetryQR } = props;
7
+ const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
8
+ const alertBgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.alertBgColor) ? style === null || style === void 0 ? void 0 : style.alertBgColor : '#ffdedf' };
9
+ const alertBorderColor = { borderColor: (style === null || style === void 0 ? void 0 : style.alertBorderColor) ? style === null || style === void 0 ? void 0 : style.alertBorderColor : '#ee888c' };
10
+ const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
7
11
  return (h("div", { class: "reload", style: {
8
12
  width: (modalWidth - 48).toString() + 'px',
9
- height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
10
- } }, h("div", { id: "notify", onClick: () => display() }, h("img", { src: refreshIcon, height: 24, width: 24 }), h("p", { class: "notify-text" }, clickInsideBoxLabel, " "), errorMessage ? h("p", { class: "notify-text bold" }, refreshQrLabel) : h("p", { class: "notify-text bold" }, scanQrLabel), errorMessage && (h("div", { class: "alert", style: {
11
- width: (modalWidth - 48).toString() + 'px'
12
- } }, h("img", { src: alertIcon, height: 24, width: 24 }), h("p", null, errorMessage)))), h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
13
+ height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
14
+ border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
15
+ } }, h("div", { id: "notify", onClick: () => display(), style: bgStyle }, h(RefreshIcon, { color: style === null || style === void 0 ? void 0 : style.color, height: 24, width: 24 }), h("p", { class: "notify-text", style: color }, clickInsideBoxLabel, ' '), errorMessage ? (h("p", { class: "notify-text bold", style: color }, refreshQrLabel)) : (h("p", { class: "notify-text bold", style: color }, scanQrLabel)), errorMessage && (h("div", { class: "alert", style: Object.assign(Object.assign({ width: (modalWidth - 48).toString() + 'px' }, alertBgStyle), { border: `1px solid ${alertBorderColor}` }) }, h("img", { src: alertIcon, height: 24, width: 24 }), h("p", { style: { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' } }, errorMessage)))), h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
13
16
  };
package/dist/collection/components/gataca-qr/components/success/Success.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import successIcon from '../../../../assets/icons/gat-icon-check.svg';
2
2
  import { h } from '@stencil/core';
3
3
  export const Success = (props) => {
4
- const { modalHeight, successLoginLabel } = props;
4
+ const { modalHeight, successLoginLabel, style } = props;
5
+ const colorStyle = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' };
5
6
  return (h("div", { class: 'success', style: {
6
7
  height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + 'px' : '300px'
7
- } }, h("img", { src: successIcon, height: 52, width: 52 }), h("p", { class: "successMsg" }, successLoginLabel)));
8
+ } }, h("img", { src: successIcon, height: 52, width: 52 }), h("p", { class: "successMsg", style: colorStyle }, successLoginLabel)));
8
9
  };
package/dist/collection/components/gataca-qr/gataca-qr.css CHANGED
@@ -197,7 +197,7 @@ img {
197
197
  height: 252px;
198
198
  width: 252px;
199
199
  border: 1px dashed #a1a1a1;
200
- border-radius: 12px;
200
+ border-radius: 20px;
201
201
  position: relative;
202
202
  top: 24px;
203
203
  margin: 0 24px 24px;
@@ -235,7 +235,7 @@ img {
235
235
  padding: 20px;
236
236
  background: rgba(255, 255, 255, 0.95);
237
237
  }
238
- #notify > img {
238
+ #notify > svg {
239
239
  padding-bottom: 12px;
240
240
  }
241
241
 
@@ -294,14 +294,17 @@ img {
294
294
  position: absolute;
295
295
  width: 9.68px;
296
296
  height: 4px;
297
- background: transparent;
297
+ background-color: var(--loader-color, #4745B7);
298
298
  border-radius: 2px;
299
+ --to-opacity: 1;
300
+ opacity: var(--to-opacity);
299
301
  }
300
302
  .loader__item__1 {
301
303
  transform: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
302
304
  -webkit-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
303
305
  -moz-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
304
306
  -o-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
307
+ --to-opacity: calc(1 - (0 / 8));
305
308
  animation: blink 0.8333333333s linear 0.1041666667s infinite;
306
309
  -webkit-animation: blink 0.8333333333s linear 0.1041666667s infinite;
307
310
  -moz-animation: blink 0.8333333333s linear 0.1041666667s infinite;
@@ -312,6 +315,7 @@ img {
312
315
  -webkit-animation: translate(-4.84px, 8.5px) rotate(90deg);
313
316
  -moz-animation: translate(-4.84px, 8.5px) rotate(90deg);
314
317
  -o-animation: translate(-4.84px, 8.5px) rotate(90deg);
318
+ --to-opacity: calc(1 - (1 / 8));
315
319
  animation: blink 0.8333333333s linear 0.2083333333s infinite;
316
320
  -webkit-animation: blink 0.8333333333s linear 0.2083333333s infinite;
317
321
  -moz-animation: blink 0.8333333333s linear 0.2083333333s infinite;
@@ -322,6 +326,7 @@ img {
322
326
  -webkit-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
323
327
  -moz-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
324
328
  -o-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
329
+ --to-opacity: calc(1 - (2 / 8));
325
330
  animation: blink 0.8333333333s linear 0.3125s infinite;
326
331
  -webkit-animation: blink 0.8333333333s linear 0.3125s infinite;
327
332
  -moz-animation: blink 0.8333333333s linear 0.3125s infinite;
@@ -332,6 +337,7 @@ img {
332
337
  -webkit-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
333
338
  -moz-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
334
339
  -o-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
340
+ --to-opacity: calc(1 - (3 / 8));
335
341
  animation: blink 0.8333333333s linear 0.4166666667s infinite;
336
342
  -webkit-animation: blink 0.8333333333s linear 0.4166666667s infinite;
337
343
  -moz-animation: blink 0.8333333333s linear 0.4166666667s infinite;
@@ -342,6 +348,7 @@ img {
342
348
  -webkit-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
343
349
  -moz-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
344
350
  -o-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
351
+ --to-opacity: calc(1 - (4 / 8));
345
352
  animation: blink 0.8333333333s linear 0.5208333333s infinite;
346
353
  -webkit-animation: blink 0.8333333333s linear 0.5208333333s infinite;
347
354
  -moz-animation: blink 0.8333333333s linear 0.5208333333s infinite;
@@ -352,6 +359,7 @@ img {
352
359
  -webkit-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
353
360
  -moz-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
354
361
  -o-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
362
+ --to-opacity: calc(1 - (5 / 8));
355
363
  animation: blink 0.8333333333s linear 0.625s infinite;
356
364
  -webkit-animation: blink 0.8333333333s linear 0.625s infinite;
357
365
  -moz-animation: blink 0.8333333333s linear 0.625s infinite;
@@ -362,6 +370,7 @@ img {
362
370
  -webkit-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
363
371
  -moz-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
364
372
  -o-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
373
+ --to-opacity: calc(1 - (6 / 8));
365
374
  animation: blink 0.8333333333s linear 0.7291666667s infinite;
366
375
  -webkit-animation: blink 0.8333333333s linear 0.7291666667s infinite;
367
376
  -moz-animation: blink 0.8333333333s linear 0.7291666667s infinite;
@@ -372,6 +381,7 @@ img {
372
381
  -webkit-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
373
382
  -moz-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
374
383
  -o-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
384
+ --to-opacity: calc(1 - (7 / 8));
375
385
  animation: blink 0.8333333333s linear 0.8333333333s infinite;
376
386
  -webkit-animation: blink 0.8333333333s linear 0.8333333333s infinite;
377
387
  -moz-animation: blink 0.8333333333s linear 0.8333333333s infinite;
@@ -383,10 +393,10 @@ img {
383
393
 
384
394
  @keyframes blink {
385
395
  0% {
386
- background: #4745B7;
396
+ opacity: 1;
387
397
  }
388
398
  100% {
389
- background: #CCCBF8;
399
+ opacity: var(--to-opacity);
390
400
  }
391
401
  }
392
402
  @keyframes rotate {