@gataca/qr 2.0.1 → 2.0.3

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

@@ -15,11 +15,26 @@ export class GatacaSSIButton {
     this.autorefresh = false;
     this.v2 = false;
     this.qrModalTitle = "Quick Access";
+    this.modalTitleColor = "#4745B7";
     this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet";
     this.hideBrandTitle = false;
     this.dynamicLink = true;
+    this.logoSize = 0;
+    this.logoSrc = 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.hideQrModalDescription = false;
     this.open = false;
-    this.qr = (h("gataca-qr", { checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: true, autorefresh: this.autorefresh, v2: this.v2, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink }));
+    this.qr = (h("gataca-qr", { checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: true, autorefresh: this.autorefresh, v2: this.v2, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink, logoSize: this.logoSize, logoSrc: this.logoSrc, modalTitleColor: this.modalTitleColor, qrCodeExpiredLabel: this.qrCodeExpiredLabel, credentialsNotValidatedLabel: this.credentialsNotValidatedLabel, clickInsideBoxLabel: this.clickInsideBoxLabel, refreshQrLabel: this.refreshQrLabel, scanQrLabel: this.scanQrLabel, userNotScanInTimeErrorLabel: this.userNotScanInTimeErrorLabel, credsNotValidatedErrorLabel: this.credsNotValidatedErrorLabel, failedLoginErrorLabel: this.failedLoginErrorLabel, successLoginLabel: this.successLoginLabel, byBrandLabel: this.byBrandLabel, waitingStartSessionLabel: this.waitingStartSessionLabel, hideQrModalDescription: this.hideQrModalDescription }));
   }
   /**
    * Retrieve manually the session data on a successful login
@@ -278,6 +293,24 @@ export class GatacaSSIButton {
         "reflect": false,
         "defaultValue": "\"Quick Access\""
       },
+      "modalTitleColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to set Modal title color"
+        },
+        "attribute": "modal-title-color",
+        "reflect": false,
+        "defaultValue": "\"#4745B7\""
+      },
       "qrModalDescription": {
         "type": "string",
         "mutable": false,
@@ -331,6 +364,257 @@ export class GatacaSSIButton {
         "attribute": "dynamic-link",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "logoSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nSize of the logo to display in percentage to the total size [0-1]. 0 means no logo will be displayed. Default is the GATACA logo. Recommended size is around 0.33"
+        },
+        "attribute": "logo-size",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "logoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nLogo to display, just if the logo size is greater than 0. No logo is the GATACA logo."
+        },
+        "attribute": "logo-src",
+        "reflect": false
+      },
+      "qrCodeExpiredLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show when qr code expired"
+        },
+        "attribute": "qr-code-expired-label",
+        "reflect": false,
+        "defaultValue": "\"QR Code expired\""
+      },
+      "credentialsNotValidatedLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show when credentials not validatedd"
+        },
+        "attribute": "credentials-not-validated-label",
+        "reflect": false,
+        "defaultValue": "\"User credentials not validated\""
+      },
+      "clickInsideBoxLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"click inside\" label"
+        },
+        "attribute": "click-inside-box-label",
+        "reflect": false,
+        "defaultValue": "\"Click inside the box to\""
+      },
+      "refreshQrLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"refresh QR\" label"
+        },
+        "attribute": "refresh-qr-label",
+        "reflect": false,
+        "defaultValue": "\"Refresh QR Code\""
+      },
+      "scanQrLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"scan QR\" label"
+        },
+        "attribute": "scan-qr-label",
+        "reflect": false,
+        "defaultValue": "\"Scan QR Code\""
+      },
+      "userNotScanInTimeErrorLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"user not scan in time\" error"
+        },
+        "attribute": "user-not-scan-in-time-error-label",
+        "reflect": false,
+        "defaultValue": "\"User did not scan the QR in the allowed time\""
+      },
+      "credsNotValidatedErrorLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"provided credentials not validates\" error"
+        },
+        "attribute": "creds-not-validated-error-label",
+        "reflect": false,
+        "defaultValue": "\"Provided user credentials couldn't be validated\""
+      },
+      "failedLoginErrorLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"failed login\" error"
+        },
+        "attribute": "failed-login-error-label",
+        "reflect": false,
+        "defaultValue": "\"No successful login\""
+      },
+      "successLoginLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"successful login\" label"
+        },
+        "attribute": "success-login-label",
+        "reflect": false,
+        "defaultValue": "\"Successful Connection!\""
+      },
+      "byBrandLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"by brand\" label"
+        },
+        "attribute": "by-brand-label",
+        "reflect": false,
+        "defaultValue": "\"by Gataca\""
+      },
+      "waitingStartSessionLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nString to show \"waiting start session\" label"
+        },
+        "attribute": "waiting-start-session-label",
+        "reflect": false,
+        "defaultValue": "\"waiting to start a session\""
+      },
+      "hideQrModalDescription": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nBoolean to show or not show the QR Modal description"
+        },
+        "attribute": "hide-qr-modal-description",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/components/gataca-autoqr.js

@@ -49,11 +49,9 @@ const GatacaAutoQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       },
     })
       .then((response) => {
-      console.log("Got RESPONSE", response);
       response
         .json()
         .then((data) => {
-        console.log("Got DATA", data);
         data = fixFunctions(data);
         this.config = data;
         this.loading = false;

package/dist/components/gataca-qr2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode, g as gatIconCheckSvg, a as gatIconRefreshSvg, d as gatIconAlertSvg } from './gat-icon-refresh.js';
 import { l as logoGatacaSvg, d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
 
-const gatacaQrCss = "@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 .modal-window{position:relative;border-radius:6px;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;width:300px;padding:1px;background-color:white;min-height:408px;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 p{font-family:\"Work Sans\", \"Helvetica Neue\", sans-serif;font-weight:normal;font-size:12px;letter-spacing:1px;color:#181B5E}.popUpContainer .modal-window .qrTitleContainer{padding:24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-weight:400;font-size:14px;line-height:16.5px;padding-top:12px;padding-bottom:5px;color:#A1A1A1}.popUpContainer .modal-window .bold{font-weight:600}.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 .reload{height:252px;width:252px;border:1px dashed #A1A1A1;border-radius:12px;position:relative;margin:24px;display:flex;justify-content:center;align-items:center}.popUpContainer #qrwait{display:flex;justify-content:center}.popUpContainer #qrwait,.popUpContainer #notify{width:100%;height:100%;top:0;left:0;border-radius:20px}.popUpContainer #notify{z-index:10;background-color:gray;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;align-self:center;display:flex;flex-direction:column;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background:rgba(255, 255, 255, 0.9);}.popUpContainer .notify-text{font-family:\"Work Sans\";font-style:normal;font-weight:400;font-size:14px;line-height:16px;text-align:center;font-feature-settings:\"salt\" on;color:#8B8B8B;flex:none;order:1;align-self:stretch;flex-grow:0}.popUpContainer .alert{display:flex;flex-direction:row;align-items:center;justify-content:start;width:252px;position:absolute;bottom:0;background:#FFE5E5;border-radius:12px}.popUpContainer .alert img{margin:12px}.popUpContainer .alert p{font-weight:400;font-size:14px;line-height:16px;color:black}.popUpContainer .success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.popUpContainer .success .successMsg{margin-top:20px;font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}";
+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=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 .modal-window{position:relative;border-radius:6px;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;width:300px;padding:1px;background-color:white;min-height:350px;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 p{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;color:#1e1e20}.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-weight:400;font-size:14px;line-height:16.5px;padding-top:12px;padding-bottom:5px;color:#A1A1A1}.popUpContainer .modal-window .bold{font-weight:600}.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 .reload{height:252px;width:252px;border:1px dashed #A1A1A1;border-radius:12px;position:relative;margin:24px;display:flex;justify-content:center;align-items:center}.popUpContainer #qrwait{display:flex;justify-content:center}.popUpContainer #qrwait,.popUpContainer #notify{width:100%;height:100%;top:0;left:0;border-radius:20px}.popUpContainer #notify{z-index:10;background-color:gray;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;align-self:center;display:flex;flex-direction:column;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background:rgba(255, 255, 255, 0.9);}.popUpContainer .notify-text{font-family:\"Work Sans\";font-style:normal;font-weight:400;font-size:14px;line-height:16px;text-align:center;font-feature-settings:\"salt\" on;color:#8B8B8B;flex:none;order:1;align-self:stretch;flex-grow:0}.popUpContainer .alert{display:flex;flex-direction:row;align-items:center;justify-content:start;width:252px;position:absolute;bottom:0;background:#FFE5E5;border-radius:12px}.popUpContainer .alert img{margin:12px}.popUpContainer .alert p{font-weight:400;font-size:14px;line-height:16px;color:black}.popUpContainer .success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.popUpContainer .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;}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}";
 
 const DEEP_LINK_PREFIX = "https://gataca.page.link/?apn=com.gatacaapp&ibi=com.gataca.wallet&link=";
 //Default values
@@ -14,7 +14,7 @@ const FUNCTION_ROLES = {
   certify: "credential",
 };
 const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() { super(); this.__registerHost(); this.__attachShadow(); this.gatacaLoginCompleted = createEvent(this, "gatacaLoginCompleted", 7); this.gatacaLoginFailed = createEvent(this, "gatacaLoginFailed", 7); this.checkStatus = undefined; this.createSession = undefined; this.successCallback = undefined; this.errorCallback = undefined; this.qrRole = undefined; this.callbackServer = undefined; this.autostart = true; this.autorefresh = false; this.v2 = false; this.qrModalTitle = "Quick Access"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.hideBrandTitle = 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() { super(); this.__registerHost(); this.__attachShadow(); this.gatacaLoginCompleted = createEvent(this, "gatacaLoginCompleted", 7); this.gatacaLoginFailed = createEvent(this, "gatacaLoginFailed", 7); this.checkStatus = undefined; this.createSession = undefined; this.successCallback = undefined; this.errorCallback = undefined; this.qrRole = undefined; this.callbackServer = undefined; this.autostart = true; this.autorefresh = false; this.v2 = false; this.qrModalTitle = "Quick Access"; this.modalTitleColor = "#4745B7"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.hideBrandTitle = false; this.logoSize = 0; this.logoSrc = logoGatacaSvg; 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.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; }
   disconnectedCallback() {
     this.stop();
   }
@@ -45,8 +45,8 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       else {
         if (err !== RESULT_STATUS.NOT_STARTED) {
           let error = expired
-            ? new Error("User did not scan the QR in the alloted time")
-            : new Error("Provided user credentials couldn't be validated");
+            ? new Error(this.userNotScanInTimeErrorLabel)
+            : new Error(this.credsNotValidatedErrorLabel);
           this.result = err;
           this.gatacaLoginFailed.emit(error);
           this.errorCallback(error);
@@ -76,7 +76,7 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async getSessionData() {
     return this.sessionData
       ? Promise.resolve(this.sessionData)
-      : Promise.reject(new Error("No successful login"));
+      : Promise.reject(new Error(this.failedLoginErrorLabel));
   }
   async getSessionId() {
     if (this.sessionId) {
@@ -143,26 +143,27 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       case RESULT_STATUS.ONGOING:
         return this.renderQR(this.getLink(), 300, true);
       case RESULT_STATUS.EXPIRED:
-        return this.renderRetryButton("QR Code expired");
+        return this.renderRetryButton(this.qrCodeExpiredLabel);
       case RESULT_STATUS.FAILED:
-        return this.renderRetryButton("User credentials not validated");
+        return this.renderRetryButton(this.credentialsNotValidatedLabel);
       case RESULT_STATUS.SUCCESS:
         return this.renderSuccess();
     }
   }
   renderSuccess() {
-    return (h("div", { class: "success" }, h("img", { src: gatIconCheckSvg, height: 52, width: 52 }), h("p", { class: "successMsg" }, "Successful Connection!")));
+    return (h("div", { class: "success" }, h("img", { src: gatIconCheckSvg, height: 52, width: 52 }), h("p", { class: "successMsg" }, this.successLoginLabel)));
   }
   renderRetryButton(errorMessage) {
-    return (h("div", { class: "reload" }, h("div", { id: "notify", onClick: () => this.display() }, h("img", { src: gatIconRefreshSvg, height: 24, width: 24 }), h("p", { class: "qrDescription" }, "Click inside the box to "), errorMessage ? (h("p", { class: "qrDescription bold" }, "Refresh QR Code")) : (h("p", { class: "qrDescription bold" }, "Scan QR Code")), errorMessage && (h("div", { class: "alert" }, h("img", { src: gatIconAlertSvg, height: 24, width: 24 }), h("p", null, errorMessage)))), h("div", { id: "qrwait" }, this.renderQR("waiting to start a session", 250))));
+    return (h("div", { class: "reload" }, h("div", { id: "notify", onClick: () => this.display() }, h("img", { src: gatIconRefreshSvg, height: 24, width: 24 }), h("p", { class: "qrDescription" }, this.clickInsideBoxLabel, " "), errorMessage ? (h("p", { class: "qrDescription bold" }, this.refreshQrLabel)) : (h("p", { class: "qrDescription bold" }, this.scanQrLabel, "e")), errorMessage && (h("div", { class: "alert" }, h("img", { src: gatIconAlertSvg, height: 24, width: 24 }), h("p", null, errorMessage)))), h("div", { id: "qrwait" }, this.renderQR(this.waitingStartSessionLabel, 250))));
   }
   renderQR(value, size, useLogo) {
-    return (h("gataca-qrdisplay", { qrData: value, rounded: true, size: size, "logo-size": useLogo ? 0.33 : 0 }));
+    return (h("gataca-qrdisplay", { qrData: value, rounded: true, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": this.logoSrc }));
   }
   render() {
     return (h("div", { class: "popUpContainer" }, h("div", { class: "modal-window is-visible", onClick: (event) => {
         event.stopPropagation();
-      } }, h("div", { class: "modal-window__content" }, h("div", { class: "qrTitleContainer" }, h("p", { class: "qrTitle" }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand" }, "by Gataca", " ", h("span", null, h("img", { src: logoGatacaSvg })))), this.result !== RESULT_STATUS.SUCCESS && (h("p", { class: "qrDescription" }, this.qrModalDescription))), h("div", { class: "qrSection" }, this.renderQRSection())))));
+      } }, h("div", { class: "modal-window__content" }, h("div", { class: "qrTitleContainer" }, h("p", { class: "qrTitle", style: { color: this.modalTitleColor || "#1e1e20" } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand" }, this.byBrandLabel, " ", h("span", null, h("img", { src: logoGatacaSvg })))), this.result !== RESULT_STATUS.SUCCESS &&
+      !this.hideQrModalDescription && (h("p", { class: "qrDescription" }, this.qrModalDescription))), h("div", { class: "qrSection" }, this.renderQRSection())))));
   }
   static get style() { return gatacaQrCss; }
 }, [1, "gataca-qr", {
@@ -176,8 +177,23 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "autorefresh": [4],
     "v2": [4, "v-2"],
     "qrModalTitle": [1, "qr-modal-title"],
+    "modalTitleColor": [1, "modal-title-color"],
     "qrModalDescription": [1, "qr-modal-description"],
     "hideBrandTitle": [4, "hide-brand-title"],
+    "logoSize": [2, "logo-size"],
+    "logoSrc": [1, "logo-src"],
+    "qrCodeExpiredLabel": [1, "qr-code-expired-label"],
+    "credentialsNotValidatedLabel": [1, "credentials-not-validated-label"],
+    "clickInsideBoxLabel": [1, "click-inside-box-label"],
+    "refreshQrLabel": [1, "refresh-qr-label"],
+    "scanQrLabel": [1, "scan-qr-label"],
+    "userNotScanInTimeErrorLabel": [1, "user-not-scan-in-time-error-label"],
+    "credsNotValidatedErrorLabel": [1, "creds-not-validated-error-label"],
+    "failedLoginErrorLabel": [1, "failed-login-error-label"],
+    "successLoginLabel": [1, "success-login-label"],
+    "byBrandLabel": [1, "by-brand-label"],
+    "waitingStartSessionLabel": [1, "waiting-start-session-label"],
+    "hideQrModalDescription": [4, "hide-qr-modal-description"],
     "sessionTimeout": [2, "session-timeout"],
     "pollingFrequency": [2, "polling-frequency"],
     "dynamicLink": [4, "dynamic-link"],

package/dist/components/gataca-qrdisplay2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const logoGatacaSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjUuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MzUuMyA1OTcuNDciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYzNS4zIDU5Ny40NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMxODFCNUU7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02MDUuNzksMzIzLjQxYy0yNy45Ny00MS45Ny03My40NC03MS4yOC0xMjUuOTktNzcuNDljOS4xNS0yMS4zMywxNC4yMy00NC44MywxNC4yMy02OS41MQoJCWMwLTEwLjE3LTAuODctMjAuMTQtMi41My0yOS44NUM0NzcuMzMsNjMuMzUsNDA0Ljg5LDAsMzE3LjY0LDBjLTk3LjQyLDAtMTc2LjM4LDc4Ljk3LTE3Ni4zOCwxNzYuMzkKCQljMCwyNC42OSw1LjA4LDQ4LjE5LDE0LjI0LDY5LjUyQzY3LjkzLDI1Ni4yNCwwLDMzMC43MSwwLDQyMS4wN2MwLDQwLjM5LDEzLjU5LDc3LjYxLDM2LjQzLDEwNy4zNQoJCWMzMi4yNSw0MS45OCw4Mi45NCw2OS4wNSwxMzkuOTYsNjkuMDZjNTIuOTYsMCwxMDAuNDctMjMuMzQsMTMyLjgtNjAuM2MyLjk1LTMuMzcsNS43OC02Ljg2LDguNDctMTAuNDUKCQljNS45MSw3Ljg4LDEyLjQ4LDE1LjIzLDE5LjYsMjIuMDJjNS42LDUuMzQsMTEuNTQsMTAuMzQsMTcuODEsMTQuOTFjMTAuMTIsNy4zOCwyMS4wNSwxMy43MSwzMi42MywxOC44NAoJCWMyMS43OCw5LjYzLDQ1Ljg4LDE0Ljk5LDcxLjIyLDE0Ljk5YzIuNTEsMCw1LTAuMDcsNy40OC0wLjE3YzkzLjk1LTMuOTIsMTY4LjktODEuMzEsMTY4LjktMTc2LjIyCgkJQzYzNS4zLDM4NC45NSw2MjQuNDMsMzUxLjM3LDYwNS43OSwzMjMuNDF6IE0yMjUuNzQsMTIzLjMzYzI5LjMxLTUwLjc2LDk0LjIxLTY4LjE2LDE0NC45Ny0zOC44NQoJCWM0My41OCwyNS4xNiw2Mi41Niw3Ni41Nyw0OC41MSwxMjIuNzNjLTIuMzEsNy42MS01LjUyLDE1LjA3LTkuNjcsMjIuMjVjLTkuMjcsMTYuMDYtMjIuMTEsMjguNzgtMzYuOTQsMzcuNzQKCQljLTEuMjIsMC43NC0yLjQ2LDEuNDYtMy43MSwyLjE1Yy0xMS45NCw2LjU3LTI1LjA0LDEwLjc3LTM4LjUzLDEyLjQxYy0yMS44NCwyLjY2LTQ0LjY4LTEuNDItNjUuMjUtMTMuMTQKCQljLTAuNDctMC4yNy0wLjkzLTAuNTQtMS40LTAuODFDMjEzLjY0LDIzOC4yNywxOTYuNiwxNzMuODEsMjI1Ljc0LDEyMy4zM3ogTTU1Mi40OSw0NzEuMTVjLTEyLjIzLDIyLjgxLTMxLjQ3LDM5LjI2LTUzLjU1LDQ4LjIzCgkJYy0zMC4xNywxMi4yNi02NC40MSw5LjIzLTkyLjYyLTcuMDRsLTE1LjIxLTguNzhsLTQ3LjE3LTI3LjIybC02MC4yMi0zNC43NmwtMi44Ny0xLjY2bC04Mi4zMi00Ny41MWwtNTcuMTIsNDcuOTNsMTA0Ljk1LDYwLjU4CgkJYy0zMy4yNCwyOS4xNS04Mi42MiwzNS40Mi0xMjMuMDQsMTIuMDljLTEzLjQyLTcuNzUtMjQuNS0xNy45OC0zMy4wMS0yOS43OWMtMjMuNjgtMzIuODUtMjcuMzktNzcuODUtNS44My0xMTUuMgoJCWMyOS4yLTUwLjU4LDkzLjc0LTY4LjAzLDE0NC40Mi0zOS4xNmMwLjQ3LDAuMjcsMC45MywwLjU0LDEuNCwwLjgxYzEuMjMsMC43LDIuNDcsMS4zOSwzLjcyLDIuMDdsMjEuODEsMTIuNTlsMzUuOCwyMC42NwoJCWw1OS44MiwzNC41M2wzLjE2LDEuODNsOTMuNzksNTQuMTNsNTcuMDQtNDcuODZsMC4wNS0wLjA5bC0xMTUuODYtNjYuODdjNC41LTMuODgsOS4yOS03LjM1LDE0LjMxLTEwLjM4CgkJYzEuMjMtMC43NCwyLjQ2LTEuNDYsMy43Mi0yLjE1YzMxLjU2LTE3LjM3LDcxLjE4LTE4LjI0LDEwNC42MSwxLjIxYzE2Ljg5LDkuODIsMzAuMDksMjMuNzMsMzkuMDYsMzkuNzgKCQlDNTY4LjQ1LDM5OS43Niw1NzAuMTIsNDM4LjI2LDU1Mi40OSw0NzEuMTV6Ii8+CjwvZz4KPC9zdmc+Cg==';
+const logoGatacaSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjUuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MzUuMyA1OTcuNDciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYzNS4zIDU5Ny40NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0NzQ1Qjc7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02MDUuNzksMzIzLjQxYy0yNy45Ny00MS45Ny03My40NC03MS4yOC0xMjUuOTktNzcuNDljOS4xNS0yMS4zMywxNC4yMy00NC44MywxNC4yMy02OS41MQoJCWMwLTEwLjE3LTAuODctMjAuMTQtMi41My0yOS44NUM0NzcuMzMsNjMuMzUsNDA0Ljg5LDAsMzE3LjY0LDBjLTk3LjQyLDAtMTc2LjM4LDc4Ljk3LTE3Ni4zOCwxNzYuMzkKCQljMCwyNC42OSw1LjA4LDQ4LjE5LDE0LjI0LDY5LjUyQzY3LjkzLDI1Ni4yNCwwLDMzMC43MSwwLDQyMS4wN2MwLDQwLjM5LDEzLjU5LDc3LjYxLDM2LjQzLDEwNy4zNQoJCWMzMi4yNSw0MS45OCw4Mi45NCw2OS4wNSwxMzkuOTYsNjkuMDZjNTIuOTYsMCwxMDAuNDctMjMuMzQsMTMyLjgtNjAuM2MyLjk1LTMuMzcsNS43OC02Ljg2LDguNDctMTAuNDUKCQljNS45MSw3Ljg4LDEyLjQ4LDE1LjIzLDE5LjYsMjIuMDJjNS42LDUuMzQsMTEuNTQsMTAuMzQsMTcuODEsMTQuOTFjMTAuMTIsNy4zOCwyMS4wNSwxMy43MSwzMi42MywxOC44NAoJCWMyMS43OCw5LjYzLDQ1Ljg4LDE0Ljk5LDcxLjIyLDE0Ljk5YzIuNTEsMCw1LTAuMDcsNy40OC0wLjE3YzkzLjk1LTMuOTIsMTY4LjktODEuMzEsMTY4LjktMTc2LjIyCgkJQzYzNS4zLDM4NC45NSw2MjQuNDMsMzUxLjM3LDYwNS43OSwzMjMuNDF6IE0yMjUuNzQsMTIzLjMzYzI5LjMxLTUwLjc2LDk0LjIxLTY4LjE2LDE0NC45Ny0zOC44NQoJCWM0My41OCwyNS4xNiw2Mi41Niw3Ni41Nyw0OC41MSwxMjIuNzNjLTIuMzEsNy42MS01LjUyLDE1LjA3LTkuNjcsMjIuMjVjLTkuMjcsMTYuMDYtMjIuMTEsMjguNzgtMzYuOTQsMzcuNzQKCQljLTEuMjIsMC43NC0yLjQ2LDEuNDYtMy43MSwyLjE1Yy0xMS45NCw2LjU3LTI1LjA0LDEwLjc3LTM4LjUzLDEyLjQxYy0yMS44NCwyLjY2LTQ0LjY4LTEuNDItNjUuMjUtMTMuMTQKCQljLTAuNDctMC4yNy0wLjkzLTAuNTQtMS40LTAuODFDMjEzLjY0LDIzOC4yNywxOTYuNiwxNzMuODEsMjI1Ljc0LDEyMy4zM3ogTTU1Mi40OSw0NzEuMTVjLTEyLjIzLDIyLjgxLTMxLjQ3LDM5LjI2LTUzLjU1LDQ4LjIzCgkJYy0zMC4xNywxMi4yNi02NC40MSw5LjIzLTkyLjYyLTcuMDRsLTE1LjIxLTguNzhsLTQ3LjE3LTI3LjIybC02MC4yMi0zNC43NmwtMi44Ny0xLjY2bC04Mi4zMi00Ny41MWwtNTcuMTIsNDcuOTNsMTA0Ljk1LDYwLjU4CgkJYy0zMy4yNCwyOS4xNS04Mi42MiwzNS40Mi0xMjMuMDQsMTIuMDljLTEzLjQyLTcuNzUtMjQuNS0xNy45OC0zMy4wMS0yOS43OWMtMjMuNjgtMzIuODUtMjcuMzktNzcuODUtNS44My0xMTUuMgoJCWMyOS4yLTUwLjU4LDkzLjc0LTY4LjAzLDE0NC40Mi0zOS4xNmMwLjQ3LDAuMjcsMC45MywwLjU0LDEuNCwwLjgxYzEuMjMsMC43LDIuNDcsMS4zOSwzLjcyLDIuMDdsMjEuODEsMTIuNTlsMzUuOCwyMC42NwoJCWw1OS44MiwzNC41M2wzLjE2LDEuODNsOTMuNzksNTQuMTNsNTcuMDQtNDcuODZsMC4wNS0wLjA5bC0xMTUuODYtNjYuODdjNC41LTMuODgsOS4yOS03LjM1LDE0LjMxLTEwLjM4CgkJYzEuMjMtMC43NCwyLjQ2LTEuNDYsMy43Mi0yLjE1YzMxLjU2LTE3LjM3LDcxLjE4LTE4LjI0LDEwNC42MSwxLjIxYzE2Ljg5LDkuODIsMzAuMDksMjMuNzMsMzkuMDYsMzkuNzgKCQlDNTY4LjQ1LDM5OS43Niw1NzAuMTIsNDM4LjI2LDU1Mi40OSw0NzEuMTV6Ii8+CjwvZz4KPC9zdmc+Cg==';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -35,7 +35,7 @@ const GatacaQRDisplay = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.size = 256;
     this.logoSize = 0;
     this.logoSrc = undefined;
-    this.qrColor = "#181B5E";
+    this.qrColor = "#1E1E20";
     this.rounded = true;
   }
   componentDidLoad() {

package/dist/components/gataca-qrws2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode, g as gatIconCheckSvg, a as gatIconRefreshSvg, d as gatIconAlertSvg } from './gat-icon-refresh.js';
 import { l as logoGatacaSvg, d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
 
-const gatacaQrwsCss = "@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 .modal-window{position:relative;border-radius:6px;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;width:300px;min-height:408px;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 p{font-family:\"Work Sans\", \"Helvetica Neue\", sans-serif;font-weight:normal;font-size:12px;letter-spacing:1px;color:#181B5E}.popUpContainer .modal-window .qrTitleContainer{padding:24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-weight:400;font-size:14px;line-height:16.5px;padding-top:12px;padding-bottom:5px;color:#A1A1A1}.popUpContainer .modal-window .bold{font-weight:600}.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 .reload{height:252px;width:252px;border:1px dashed #A1A1A1;border-radius:12px;position:relative;margin:24px;display:flex;justify-content:center;align-items:center}.popUpContainer #qrwait{display:flex;justify-content:center}.popUpContainer #qrwait,.popUpContainer #notify{width:100%;height:100%;top:0;left:0;border-radius:20px}.popUpContainer #notify{z-index:10;background-color:gray;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;align-self:center;display:flex;flex-direction:column;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background:rgba(255, 255, 255, 0.9);}.popUpContainer .notify-text{font-family:\"Work Sans\";font-style:normal;font-weight:400;font-size:14px;line-height:16px;text-align:center;font-feature-settings:\"salt\" on;color:#8B8B8B;flex:none;order:1;align-self:stretch;flex-grow:0}.popUpContainer .alert{display:flex;flex-direction:row;align-items:center;justify-content:start;width:252px;position:absolute;bottom:0;background:#FFE5E5;border-radius:12px}.popUpContainer .alert img{margin:12px}.popUpContainer .alert p{font-weight:400;font-size:14px;line-height:16px;color:black}.popUpContainer .success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.popUpContainer .success .successMsg{margin-top:20px;font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}";
+const gatacaQrwsCss = "@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 .modal-window{position:relative;border-radius:6px;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;width:300px;min-height:408px;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 p{font-family:\"Work Sans\", \"Helvetica Neue\", sans-serif;font-weight:normal;font-size:12px;letter-spacing:1px;color:#1e1e20}.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-weight:400;font-size:14px;line-height:16.5px;padding-top:12px;padding-bottom:5px;color:#A1A1A1}.popUpContainer .modal-window .bold{font-weight:600}.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 .reload{height:252px;width:252px;border:1px dashed #A1A1A1;border-radius:12px;position:relative;margin:24px;display:flex;justify-content:center;align-items:center}.popUpContainer #qrwait{display:flex;justify-content:center}.popUpContainer #qrwait,.popUpContainer #notify{width:100%;height:100%;top:0;left:0;border-radius:20px}.popUpContainer #notify{z-index:10;background-color:gray;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;align-self:center;display:flex;flex-direction:column;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background:rgba(255, 255, 255, 0.9);}.popUpContainer .notify-text{font-family:\"Work Sans\";font-style:normal;font-weight:400;font-size:14px;line-height:16px;text-align:center;font-feature-settings:\"salt\" on;color:#8B8B8B;flex:none;order:1;align-self:stretch;flex-grow:0}.popUpContainer .alert{display:flex;flex-direction:row;align-items:center;justify-content:start;width:252px;position:absolute;bottom:0;background:#FFE5E5;border-radius:12px}.popUpContainer .alert img{margin:12px}.popUpContainer .alert p{font-weight:400;font-size:14px;line-height:16px;color:black}.popUpContainer .success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.popUpContainer .success .successMsg{margin-top:20px;font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}";
 
 const DEEP_LINK_PREFIX = "https://gataca.page.link/?apn=com.gatacaapp&ibi=com.gataca.wallet&link=";
 const DEFAULT_SESSION_TIMEOUT = 300;

package/dist/components/gataca-ssibutton2.js

@@ -24,11 +24,26 @@ const GatacaSSIButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.autorefresh = false;
     this.v2 = false;
     this.qrModalTitle = "Quick Access";
+    this.modalTitleColor = "#4745B7";
     this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet";
     this.hideBrandTitle = false;
     this.dynamicLink = true;
+    this.logoSize = 0;
+    this.logoSrc = 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.hideQrModalDescription = false;
     this.open = false;
-    this.qr = (h("gataca-qr", { checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: true, autorefresh: this.autorefresh, v2: this.v2, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink }));
+    this.qr = (h("gataca-qr", { checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: true, autorefresh: this.autorefresh, v2: this.v2, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink, logoSize: this.logoSize, logoSrc: this.logoSrc, modalTitleColor: this.modalTitleColor, qrCodeExpiredLabel: this.qrCodeExpiredLabel, credentialsNotValidatedLabel: this.credentialsNotValidatedLabel, clickInsideBoxLabel: this.clickInsideBoxLabel, refreshQrLabel: this.refreshQrLabel, scanQrLabel: this.scanQrLabel, userNotScanInTimeErrorLabel: this.userNotScanInTimeErrorLabel, credsNotValidatedErrorLabel: this.credsNotValidatedErrorLabel, failedLoginErrorLabel: this.failedLoginErrorLabel, successLoginLabel: this.successLoginLabel, byBrandLabel: this.byBrandLabel, waitingStartSessionLabel: this.waitingStartSessionLabel, hideQrModalDescription: this.hideQrModalDescription }));
   }
   /**
    * Retrieve manually the session data on a successful login
@@ -67,9 +82,24 @@ const GatacaSSIButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "autorefresh": [4],
     "v2": [4, "v-2"],
     "qrModalTitle": [1, "qr-modal-title"],
+    "modalTitleColor": [1, "modal-title-color"],
     "qrModalDescription": [1, "qr-modal-description"],
     "hideBrandTitle": [4, "hide-brand-title"],
     "dynamicLink": [4, "dynamic-link"],
+    "logoSize": [2, "logo-size"],
+    "logoSrc": [1, "logo-src"],
+    "qrCodeExpiredLabel": [1, "qr-code-expired-label"],
+    "credentialsNotValidatedLabel": [1, "credentials-not-validated-label"],
+    "clickInsideBoxLabel": [1, "click-inside-box-label"],
+    "refreshQrLabel": [1, "refresh-qr-label"],
+    "scanQrLabel": [1, "scan-qr-label"],
+    "userNotScanInTimeErrorLabel": [1, "user-not-scan-in-time-error-label"],
+    "credsNotValidatedErrorLabel": [1, "creds-not-validated-error-label"],
+    "failedLoginErrorLabel": [1, "failed-login-error-label"],
+    "successLoginLabel": [1, "success-login-label"],
+    "byBrandLabel": [1, "by-brand-label"],
+    "waitingStartSessionLabel": [1, "waiting-start-session-label"],
+    "hideQrModalDescription": [4, "hide-qr-modal-description"],
     "open": [32],
     "getSessionData": [64]
   }]);