@gataca/qr 0.0.28 → 0.0.30

package/dist/collection/components/gataca-qr/components/readQR/ReadQR.js

@@ -1,11 +1,16 @@
-import { h } from "@stencil/core";
-import { AnimatedLoader } from "./components/AnimatedLoader";
+import { h } from '@stencil/core';
+import { AnimatedLoader } from './components/AnimatedLoader';
 export const ReadQR = (props) => {
   var _a;
-  const { modalWidth, readQrMessages, renderQR, url, sizeQR } = props;
+  const { modalWidth, readQrMessages, renderQR, url, sizeQR, style } = props;
+  const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
+  const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
   return (h("div", { class: "blured", style: {
-      width: (modalWidth - 48).toString() + "px",
-      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + "px" : "",
-    } }, h("div", { id: "notify" }, h(AnimatedLoader, null), h("p", { class: "notify-text" }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
-    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))));
+      width: (modalWidth - 48).toString() + 'px',
+      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+      backgroundColor: style === null || style === void 0 ? void 0 : style.bgColor,
+      color: style === null || style === void 0 ? void 0 : style.color,
+      border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
+    } }, 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 :
+    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))));
 };

package/dist/collection/components/gataca-qr/components/readQR/components/AnimatedLoader.js

@@ -1,4 +1,6 @@
-import { h } from "@stencil/core";
-export const AnimatedLoader = () => {
-  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" }))));
+import { h } from '@stencil/core';
+export const AnimatedLoader = (props) => {
+  const { color = '#4745B7' } = props;
+  const style = { '--loader-color': color };
+  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" }))));
 };

package/dist/collection/components/gataca-qr/components/retryButton/RetryButton.js

@@ -1,13 +1,16 @@
-import { h } from "@stencil/core";
-import refreshIcon from "../../../../assets/icons/gat-icon-refresh.svg";
-import alertIcon from "../../../../assets/icons/gat-icon-alert.svg";
+import { h } from '@stencil/core';
+import alertIcon from '../../../../assets/icons/gat-icon-alert.svg';
+import { RefreshIcon } from '../../../icons/RefreshIcon';
 export const RetryButton = (props) => {
   var _a;
-  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR, } = props;
+  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, style, display, renderRetryQR } = props;
+  const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
+  const alertBgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.alertBgColor) ? style === null || style === void 0 ? void 0 : style.alertBgColor : '#ffdedf' };
+  const alertBorderColor = { borderColor: (style === null || style === void 0 ? void 0 : style.alertBorderColor) ? style === null || style === void 0 ? void 0 : style.alertBorderColor : '#ee888c' };
+  const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
   return (h("div", { class: "reload", style: {
-      width: (modalWidth - 48).toString() + "px",
-      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + "px" : "",
-    } }, 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: {
-      width: (modalWidth - 48).toString() + "px",
-    } }, h("img", { src: alertIcon, height: 24, width: 24 }), h("p", null, errorMessage)))), h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
+      width: (modalWidth - 48).toString() + 'px',
+      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+      border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
+    } }, 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))));
 };

package/dist/collection/components/gataca-qr/components/success/Success.js

@@ -1,8 +1,9 @@
-import successIcon from "../../../../assets/icons/gat-icon-check.svg";
-import { h } from "@stencil/core";
+import successIcon from '../../../../assets/icons/gat-icon-check.svg';
+import { h } from '@stencil/core';
 export const Success = (props) => {
-  const { modalHeight, successLoginLabel } = props;
-  return (h("div", { class: "success", style: {
-      height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + "px" : "300px",
-    } }, h("img", { src: successIcon, height: 52, width: 52 }), h("p", { class: "successMsg" }, successLoginLabel)));
+  const { modalHeight, successLoginLabel, style } = props;
+  const colorStyle = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' };
+  return (h("div", { class: 'success', style: {
+      height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + 'px' : '300px'
+    } }, h("img", { src: successIcon, height: 52, width: 52 }), h("p", { class: "successMsg", style: colorStyle }, successLoginLabel)));
 };

package/dist/collection/components/gataca-qr/gataca-qr.css

@@ -197,7 +197,7 @@ img {
   height: 252px;
   width: 252px;
   border: 1px dashed #a1a1a1;
-  border-radius: 12px;
+  border-radius: 20px;
   position: relative;
   top: 24px;
   margin: 0 24px 24px;
@@ -235,7 +235,7 @@ img {
   padding: 20px;
   background: rgba(255, 255, 255, 0.95);
 }
-#notify > img {
+#notify > svg {
   padding-bottom: 12px;
 }
 
@@ -294,14 +294,17 @@ img {
   position: absolute;
   width: 9.68px;
   height: 4px;
-  background: transparent;
+  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;
@@ -312,6 +315,7 @@ img {
   -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;
@@ -322,6 +326,7 @@ img {
   -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;
@@ -332,6 +337,7 @@ img {
   -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;
@@ -342,6 +348,7 @@ img {
   -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;
@@ -352,6 +359,7 @@ img {
   -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;
@@ -362,6 +370,7 @@ img {
   -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;
@@ -372,6 +381,7 @@ img {
   -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;
@@ -383,10 +393,10 @@ img {
 
 @keyframes blink {
   0% {
-    background: #4745B7;
+    opacity: 1;
   }
   100% {
-    background: #CCCBF8;
+    opacity: var(--to-opacity);
   }
 }
 @keyframes rotate {

package/dist/collection/components/gataca-qr/gataca-qr.js

@@ -1,17 +1,17 @@
-import { h, } from "@stencil/core";
-import logoGataca from "../../assets/images/logo_gataca.svg";
-import "../gataca-qrdisplay/gataca-qrdisplay";
-import { base64UrlEncode, checkMobile, RESULT_STATUS } from "../../utils/utils";
-import { Success } from "./components/success/Success";
-import { RetryButton } from "./components/retryButton/RetryButton";
-import { ReadQR } from "./components/readQR/ReadQR";
-import { QR } from "./components/qr/QR";
-const DEEP_LINK_PREFIX = "https://api.gataca.io/qr/redirect.html";
+import { h } from '@stencil/core';
+import logoGataca from '../../assets/images/logo_gataca.svg';
+import { base64UrlEncode, checkMobile, RESULT_STATUS } from '../../utils/utils';
+import '../gataca-qrdisplay/gataca-qrdisplay';
+import { QR } from './components/qr/QR';
+import { ReadQR } from './components/readQR/ReadQR';
+import { RetryButton } from './components/retryButton/RetryButton';
+import { Success } from './components/success/Success';
+const DEEP_LINK_PREFIX = 'https://api.gataca.io/qr/redirect.html';
 //Default values
 const DEFAULT_SESSION_TIMEOUT = 300; //5mins as in connect
 const DEFAULT_POLLING_FREQ = 3;
 export class GatacaQR {
-  constructor() { this.checkStatus = undefined; this.createSession = undefined; this.successCallback = undefined; this.errorCallback = undefined; this.qrRole = undefined; this.qrType = "svg"; this.callbackServer = undefined; this.autostart = true; this.autorefresh = false; this.v = "3"; this.qrModalTitle = "Quick Access"; this.modalTitleColor = "#4745B7"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.hideModalTexts = false; this.hideModalBoxShadow = false; this.hideBrandTitle = false; this.logoSize = 0; this.logoSrc = logoGataca; this.qrSize = 300; this.modalWidth = 300; this.modalHeight = undefined; this.qrCodeExpiredLabel = "QR Code expired"; this.credentialsNotValidatedLabel = "User credentials not validated"; this.clickInsideBoxLabel = "Click inside the box to"; this.refreshQrLabel = "Refresh QR Code"; this.scanQrLabel = "Scan QR Code"; this.userNotScanInTimeErrorLabel = "User did not scan the QR in the allowed time"; this.credsNotValidatedErrorLabel = "Provided user credentials couldn't be validated"; this.failedLoginErrorLabel = "No successful login"; this.successLoginLabel = "Successful Connection!"; this.byBrandLabel = "by Gataca"; this.waitingStartSessionLabel = "waiting to start a session"; this.readQrTitle = "Processing..."; this.readQrDescription = "Please wait a moment"; this.hideQrModalDescription = false; this.sessionTimeout = DEFAULT_SESSION_TIMEOUT; this.pollingFrequency = DEFAULT_POLLING_FREQ; this.dynamicLink = true; this.sessionId = undefined; this.authenticationRequest = undefined; this.sessionData = undefined; this.result = RESULT_STATUS.NOT_STARTED; }
+  constructor() { this.checkStatus = undefined; this.createSession = undefined; this.successCallback = undefined; this.errorCallback = undefined; this.qrRole = undefined; this.qrType = 'svg'; this.callbackServer = undefined; this.autostart = true; this.autorefresh = false; this.v = '3'; this.qrModalTitle = 'Quick Access'; this.modalTitleColor = '#4745B7'; this.qrModalDescription = 'Sign up or sign in by scanning the QR Code with the Gataca Wallet'; this.hideModalTexts = false; this.hideModalBoxShadow = false; this.hideBrandTitle = false; this.logoSize = 0; this.logoSrc = logoGataca; this.qrSize = 300; this.modalWidth = 300; this.modalHeight = undefined; this.qrCodeExpiredLabel = 'QR Code expired'; this.credentialsNotValidatedLabel = 'User credentials not validated'; this.clickInsideBoxLabel = 'Click inside the box to'; this.refreshQrLabel = 'Refresh QR Code'; this.scanQrLabel = 'Scan QR Code'; this.userNotScanInTimeErrorLabel = 'User did not scan the QR in the allowed time'; this.credsNotValidatedErrorLabel = "Provided user credentials couldn't be validated"; this.failedLoginErrorLabel = 'No successful login'; this.successLoginLabel = 'Successful Connection!'; this.byBrandLabel = 'by Gataca'; this.waitingStartSessionLabel = 'waiting to start a session'; this.readQrTitle = 'Processing...'; this.readQrDescription = 'Please wait a moment'; this.hideQrModalDescription = false; this.sessionTimeout = DEFAULT_SESSION_TIMEOUT; this.pollingFrequency = DEFAULT_POLLING_FREQ; this.dynamicLink = true; this.qrStyle = undefined; this.sessionId = undefined; this.authenticationRequest = undefined; this.sessionData = undefined; this.result = RESULT_STATUS.NOT_STARTED; }
   disconnectedCallback() {
     this.stop();
   }
@@ -41,9 +41,7 @@ export class GatacaQR {
       }
       else {
         if (err !== RESULT_STATUS.NOT_STARTED) {
-          let error = expired
-            ? new Error(this.userNotScanInTimeErrorLabel)
-            : new Error(this.credsNotValidatedErrorLabel);
+          let error = expired ? new Error(this.userNotScanInTimeErrorLabel) : new Error(this.credsNotValidatedErrorLabel);
           this.result = err;
           this.gatacaLoginFailed.emit(error);
           this.errorCallback(error);
@@ -71,9 +69,7 @@ export class GatacaQR {
    * Retrieve manually the session data on a successful login
    */
   async getSessionData() {
-    return this.sessionData
-      ? Promise.resolve(this.sessionData)
-      : Promise.reject(new Error(this.failedLoginErrorLabel));
+    return this.sessionData ? Promise.resolve(this.sessionData) : Promise.reject(new Error(this.failedLoginErrorLabel));
   }
   async getSessionId() {
     if (this.sessionId) {
@@ -85,15 +81,14 @@ export class GatacaQR {
     return this.sessionId;
   }
   getLink() {
-    if (this.v === "2") {
+    if (this.v === '2') {
       return this.authenticationRequest;
     }
-    const authRequestEncoded = "?dl=" + base64UrlEncode(this.authenticationRequest);
+    const authRequestEncoded = '?dl=' + base64UrlEncode(this.authenticationRequest);
     return DEEP_LINK_PREFIX + authRequestEncoded;
   }
   async poll() {
-    let endTime = new Date().getTime() +
-      (this.sessionTimeout || DEFAULT_SESSION_TIMEOUT) * 1000;
+    let endTime = new Date().getTime() + (this.sessionTimeout || DEFAULT_SESSION_TIMEOUT) * 1000;
     let interval = (this.pollingFrequency || DEFAULT_POLLING_FREQ) * 1000;
     let checkFunc = async (component) => {
       if (component.result === RESULT_STATUS.NOT_STARTED) {
@@ -142,40 +137,37 @@ export class GatacaQR {
       case RESULT_STATUS.READ:
         return this.renderReadQR({
           title: this === null || this === void 0 ? void 0 : this.readQrTitle,
-          description: this === null || this === void 0 ? void 0 : this.readQrDescription,
+          description: this === null || this === void 0 ? void 0 : this.readQrDescription
         });
     }
   }
   renderSuccess() {
-    return (h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel }));
+    return 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 });
   }
   renderRetryButton(errorMessage) {
-    return (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) }));
+    return (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 }));
   }
   renderReadQR(readQrMessages) {
-    return (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) }));
+    return (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 }));
   }
   renderQR(value, useLogo, sizeQR) {
-    return (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 }));
+    return 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 });
   }
   renderRetryQR(value, useLogo) {
-    return (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 }));
+    return 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 });
   }
   render() {
-    var _a, _b;
-    return (h("div", { class: "popUpContainer" }, h("div", { class: `is-visible modal-window ${this.hideModalTexts ? "" : "large-modal"} ${this.hideModalBoxShadow ? "noBoxShadow" : ""}`, style: {
-        width: (this.modalWidth - 2).toString() + "px",
-        height: this.modalHeight
-          ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + "px"
-          : "",
+    var _a, _b, _c, _d, _e, _f;
+    return (h("div", { class: "popUpContainer" }, h("div", { class: `is-visible modal-window ${this.hideModalTexts ? '' : 'large-modal'} ${this.hideModalBoxShadow ? 'noBoxShadow' : ''}`, style: {
+        width: (this.modalWidth - 2).toString() + 'px',
+        height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+        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',
+        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);'
       }, onClick: (event) => {
         event.stopPropagation();
-      } }, h("div", { class: "modal-window__content" }, h("div", { class: `qrTitleContainer ${this.hideModalTexts ? "hidenText" : ""}` }, h("p", { class: "qrTitle modalText", style: { color: this.modalTitleColor || "#1e1e20" } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand modalText" }, this.byBrandLabel, " ", h("span", null, h("img", { src: logoGataca })))), this.result !== RESULT_STATUS.SUCCESS &&
-      !this.hideQrModalDescription && (h("p", { class: "qrDescription modalText" }, this.qrModalDescription))), h("div", { class: "qrSection", style: {
-        width: this.modalWidth.toString() + "px",
-        height: this.modalWidth
-          ? ((_b = this.modalWidth) === null || _b === void 0 ? void 0 : _b.toString()) + "px"
-          : "",
+      } }, h("div", { class: "modal-window__content" }, h("div", { class: `qrTitleContainer ${this.hideModalTexts ? 'hidenText' : ''}` }, h("p", { class: "qrTitle modalText", style: { color: this.modalTitleColor || '#1e1e20' } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand modalText" }, this.byBrandLabel, ' ', h("span", null, h("img", { src: logoGataca })))), this.result !== RESULT_STATUS.SUCCESS && !this.hideQrModalDescription && h("p", { class: "qrDescription modalText" }, this.qrModalDescription)), h("div", { class: "qrSection", style: {
+        width: this.modalWidth.toString() + 'px',
+        height: this.modalWidth ? ((_f = this.modalWidth) === null || _f === void 0 ? void 0 : _f.toString()) + 'px' : ''
       } }, this.renderQRSection())))));
   }
   static get is() { return "gataca-qr"; }
@@ -196,7 +188,7 @@ export class GatacaQR {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(\n    id?: string\n  ) => Promise<{ result: RESULT_STATUS; data?: any }>",
+          "original": "(id?: string) => Promise<{result: RESULT_STATUS; data?: any}>",
           "resolved": "(id?: string) => Promise<{ result: RESULT_STATUS; data?: any; }>",
           "references": {
             "Promise": {
@@ -220,7 +212,7 @@ export class GatacaQR {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "() => Promise<{\n    sessionId: string;\n    authenticationRequest?: string;\n  }>",
+          "original": "() => Promise<{\n        sessionId: string;\n        authenticationRequest?: string;\n    }>",
           "resolved": "() => Promise<{ sessionId: string; authenticationRequest?: string; }>",
           "references": {
             "Promise": {
@@ -310,7 +302,7 @@ export class GatacaQR {
         },
         "attribute": "qr-type",
         "reflect": false,
-        "defaultValue": "\"svg\""
+        "defaultValue": "'svg'"
       },
       "callbackServer": {
         "type": "string",
@@ -381,7 +373,7 @@ export class GatacaQR {
         },
         "attribute": "v",
         "reflect": false,
-        "defaultValue": "\"3\""
+        "defaultValue": "'3'"
       },
       "qrModalTitle": {
         "type": "string",
@@ -399,7 +391,7 @@ export class GatacaQR {
         },
         "attribute": "qr-modal-title",
         "reflect": false,
-        "defaultValue": "\"Quick Access\""
+        "defaultValue": "'Quick Access'"
       },
       "modalTitleColor": {
         "type": "string",
@@ -417,7 +409,7 @@ export class GatacaQR {
         },
         "attribute": "modal-title-color",
         "reflect": false,
-        "defaultValue": "\"#4745B7\""
+        "defaultValue": "'#4745B7'"
       },
       "qrModalDescription": {
         "type": "string",
@@ -435,7 +427,7 @@ export class GatacaQR {
         },
         "attribute": "qr-modal-description",
         "reflect": false,
-        "defaultValue": "\"Sign up or sign in by scanning the QR Code with the Gataca Wallet\""
+        "defaultValue": "'Sign up or sign in by scanning the QR Code with the Gataca Wallet'"
       },
       "hideModalTexts": {
         "type": "boolean",
@@ -596,7 +588,7 @@ export class GatacaQR {
         },
         "attribute": "qr-code-expired-label",
         "reflect": false,
-        "defaultValue": "\"QR Code expired\""
+        "defaultValue": "'QR Code expired'"
       },
       "credentialsNotValidatedLabel": {
         "type": "string",
@@ -614,7 +606,7 @@ export class GatacaQR {
         },
         "attribute": "credentials-not-validated-label",
         "reflect": false,
-        "defaultValue": "\"User credentials not validated\""
+        "defaultValue": "'User credentials not validated'"
       },
       "clickInsideBoxLabel": {
         "type": "string",
@@ -632,7 +624,7 @@ export class GatacaQR {
         },
         "attribute": "click-inside-box-label",
         "reflect": false,
-        "defaultValue": "\"Click inside the box to\""
+        "defaultValue": "'Click inside the box to'"
       },
       "refreshQrLabel": {
         "type": "string",
@@ -650,7 +642,7 @@ export class GatacaQR {
         },
         "attribute": "refresh-qr-label",
         "reflect": false,
-        "defaultValue": "\"Refresh QR Code\""
+        "defaultValue": "'Refresh QR Code'"
       },
       "scanQrLabel": {
         "type": "string",
@@ -668,7 +660,7 @@ export class GatacaQR {
         },
         "attribute": "scan-qr-label",
         "reflect": false,
-        "defaultValue": "\"Scan QR Code\""
+        "defaultValue": "'Scan QR Code'"
       },
       "userNotScanInTimeErrorLabel": {
         "type": "string",
@@ -686,7 +678,7 @@ export class GatacaQR {
         },
         "attribute": "user-not-scan-in-time-error-label",
         "reflect": false,
-        "defaultValue": "\"User did not scan the QR in the allowed time\""
+        "defaultValue": "'User did not scan the QR in the allowed time'"
       },
       "credsNotValidatedErrorLabel": {
         "type": "string",
@@ -722,7 +714,7 @@ export class GatacaQR {
         },
         "attribute": "failed-login-error-label",
         "reflect": false,
-        "defaultValue": "\"No successful login\""
+        "defaultValue": "'No successful login'"
       },
       "successLoginLabel": {
         "type": "string",
@@ -740,7 +732,7 @@ export class GatacaQR {
         },
         "attribute": "success-login-label",
         "reflect": false,
-        "defaultValue": "\"Successful Connection!\""
+        "defaultValue": "'Successful Connection!'"
       },
       "byBrandLabel": {
         "type": "string",
@@ -758,7 +750,7 @@ export class GatacaQR {
         },
         "attribute": "by-brand-label",
         "reflect": false,
-        "defaultValue": "\"by Gataca\""
+        "defaultValue": "'by Gataca'"
       },
       "waitingStartSessionLabel": {
         "type": "string",
@@ -776,7 +768,7 @@ export class GatacaQR {
         },
         "attribute": "waiting-start-session-label",
         "reflect": false,
-        "defaultValue": "\"waiting to start a session\""
+        "defaultValue": "'waiting to start a session'"
       },
       "readQrTitle": {
         "type": "string",
@@ -794,7 +786,7 @@ export class GatacaQR {
         },
         "attribute": "read-qr-title",
         "reflect": false,
-        "defaultValue": "\"Processing...\""
+        "defaultValue": "'Processing...'"
       },
       "readQrDescription": {
         "type": "string",
@@ -812,7 +804,7 @@ export class GatacaQR {
         },
         "attribute": "read-qr-description",
         "reflect": false,
-        "defaultValue": "\"Please wait a moment\""
+        "defaultValue": "'Please wait a moment'"
       },
       "hideQrModalDescription": {
         "type": "boolean",
@@ -885,6 +877,25 @@ export class GatacaQR {
         "attribute": "dynamic-link",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "qrStyle": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "qrStyle",
+          "resolved": "{ color: string; bgColor: string; alertBgColor?: string; alertBorderColor?: string; boxShadow?: string; }",
+          "references": {
+            "qrStyle": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nAdjust the color styles of the QR"
+        }
       }
     };
   }

package/dist/collection/components/gataca-qrdisplay/gataca-qrdisplay.js

@@ -1,14 +1,15 @@
-import { h } from "@stencil/core";
-import QRCodeStyling from "qr-code-styling";
-import logoGataca from "../../assets/images/logo_gataca.svg";
+import { h } from '@stencil/core';
+import QRCodeStyling from 'qr-code-styling';
+import logoGataca from '../../assets/images/logo_gataca.svg';
 export class GatacaQRDisplay {
   constructor() {
     this.qrData = undefined;
-    this.qrType = "svg";
+    this.qrType = 'svg';
     this.size = 256;
     this.logoSize = 0;
     this.logoSrc = undefined;
-    this.qrColor = "#1E1E20";
+    this.qrColor = '#1E1E20';
+    this.bgColor = '#FFFFFF';
     this.rounded = true;
   }
   componentDidLoad() {
@@ -21,18 +22,21 @@ export class GatacaQRDisplay {
       type: this.qrType,
       dotsOptions: {
         color: this.qrColor,
-        type: this.rounded ? "dots" : "square",
+        type: this.rounded ? 'dots' : 'square'
       },
       cornersSquareOptions: {
-        type: this.rounded ? "extra-rounded" : "square",
+        type: this.rounded ? 'extra-rounded' : 'square'
       },
       cornersDotOptions: {
-        type: this.rounded ? "dot" : "square",
+        type: this.rounded ? 'dot' : 'square'
       },
       imageOptions: {
         margin: 2,
-        imageSize: this.logoSize,
+        imageSize: this.logoSize
       },
+      backgroundOptions: {
+        color: this.bgColor
+      }
     });
     qrCode.append(this.qr);
   }
@@ -82,7 +86,7 @@ export class GatacaQRDisplay {
         },
         "attribute": "qr-type",
         "reflect": false,
-        "defaultValue": "\"svg\""
+        "defaultValue": "'svg'"
       },
       "size": {
         "type": "number",
@@ -153,7 +157,25 @@ export class GatacaQRDisplay {
         },
         "attribute": "qr-color",
         "reflect": false,
-        "defaultValue": "\"#1E1E20\""
+        "defaultValue": "'#1E1E20'"
+      },
+      "bgColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nQR Color."
+        },
+        "attribute": "bg-color",
+        "reflect": false,
+        "defaultValue": "'#FFFFFF'"
       },
       "rounded": {
         "type": "boolean",

package/dist/collection/components/gataca-qrws/components/qr/QR.js

@@ -1,5 +1,5 @@
-import { h } from "@stencil/core";
+import { h } from '@stencil/core';
 export const QR = (props) => {
   const { value, useLogo, logoSrc, size, qrType } = props;
-  return (h("gataca-qrdisplay", { qrData: value, rounded: true, size: size, qrType: qrType, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc }));
+  return h("gataca-qrdisplay", { qrData: value, rounded: true, size: size, qrType: qrType, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc });
 };

package/dist/collection/components/gataca-qrws/components/readQR/ReadQR.js

@@ -1,11 +1,11 @@
-import { h } from "@stencil/core";
-import { AnimatedLoader } from "./components/AnimatedLoader";
+import { h } from '@stencil/core';
+import { AnimatedLoader } from './components/AnimatedLoader';
 export const ReadQR = (props) => {
   var _a;
   const { modalWidth, readQrMessages, renderQR, url, sizeQR } = props;
   return (h("div", { class: "blured", style: {
-      width: (modalWidth - 48).toString() + "px",
-      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + "px" : "",
+      width: (modalWidth - 48).toString() + 'px',
+      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
     } }, h("div", { id: "notify" }, h(AnimatedLoader, null), h("p", { class: "notify-text" }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
     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))));
 };