@gataca/qr 0.0.20 → 0.0.22

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

@@ -1,4 +1,4 @@
-import { forceUpdate, h, } from "@stencil/core";
+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";
@@ -11,7 +11,7 @@ const DEEP_LINK_PREFIX = "https://api.gataca.io/qr/redirect.html";
 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.qrId = undefined; this.qrRole = undefined; 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.sessionId = undefined; this.authenticationRequest = undefined; this.sessionData = undefined; this.result = RESULT_STATUS.NOT_STARTED; }
   disconnectedCallback() {
     this.stop();
   }
@@ -26,15 +26,9 @@ export class GatacaQR {
   async display() {
     await this.getSessionId();
     this.result = RESULT_STATUS.ONGOING;
-    console.log("display0", "this.result", this.result);
-    forceUpdate(this);
-    console.log("display1", "this.result", this.result);
     this.poll()
       .then((data) => {
       this.result = RESULT_STATUS.SUCCESS;
-      console.log("display2", "this.result", this.result);
-      forceUpdate(this);
-      console.log("display3", "this.result", this.result);
       this.sessionData = data;
       this.gatacaLoginCompleted.emit(data);
       this.successCallback(data);
@@ -51,9 +45,6 @@ export class GatacaQR {
             ? new Error(this.userNotScanInTimeErrorLabel)
             : new Error(this.credsNotValidatedErrorLabel);
           this.result = err;
-          console.log("display4", "this.result", this.result);
-          forceUpdate(this);
-          console.log("display5", "this.result", this.result);
           this.gatacaLoginFailed.emit(error);
           this.errorCallback(error);
         }
@@ -88,14 +79,9 @@ export class GatacaQR {
     if (this.sessionId) {
       return this.sessionId;
     }
-    // console.log("111 getSessionId", "this.sessionId", this.sessionId);
-    if (this.createSession) {
-      let { sessionId, authenticationRequest } = await this.createSession();
-      // console.log("222 getSessionId", "sessionId", sessionId);
-      this.sessionId = sessionId;
-      this.authenticationRequest = authenticationRequest;
-    }
-    // console.log("333 getSessionId", "this.sessionId", this.sessionId);
+    let { sessionId, authenticationRequest } = await this.createSession();
+    this.sessionId = sessionId;
+    this.authenticationRequest = authenticationRequest;
     return this.sessionId;
   }
   getLink() {
@@ -142,7 +128,6 @@ export class GatacaQR {
     return new Promise(checkCondition);
   }
   renderQRSection() {
-    console.log("renderQRSection", "this.result", this.result);
     switch (this.result) {
       case RESULT_STATUS.NOT_STARTED:
         return this.renderRetryButton();
@@ -162,23 +147,19 @@ export class GatacaQR {
     }
   }
   renderSuccess() {
-    console.log("renderSuccess", "this.result", this.result);
     return (h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel }));
   }
   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) }));
   }
   renderReadQR(readQrMessages) {
-    console.log("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) }));
   }
   renderQR(value, useLogo) {
-    console.log("renderQR", value, useLogo);
-    return (h(QR, { qrId: this.qrId, value: value, useLogo: useLogo, size: (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, size: (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc }));
   }
   renderRetryQR(value, useLogo) {
-    // console.log("this.qrId", this.qrId);
-    return (h(QR, { qrId: this.qrId, value: value, useLogo: useLogo, 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, 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 }));
   }
   render() {
     var _a, _b;
@@ -291,7 +272,7 @@ export class GatacaQR {
         },
         "defaultValue": "undefined"
       },
-      "qrId": {
+      "qrRole": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -300,30 +281,36 @@ export class GatacaQR {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nUnique identificator for html tag"
+          "text": "***Mandatory just for V1***\nDecide if scanning the credential as a verifier to request credentials\nor as an issuer too issue credentials.\nOptions: connect | certify"
         },
-        "attribute": "qr-id",
+        "attribute": "qr-role",
         "reflect": false
       },
-      "qrRole": {
+      "qrType": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "DrawType",
+          "resolved": "\"canvas\" | \"svg\"",
+          "references": {
+            "DrawType": {
+              "location": "import",
+              "path": "qr-code-styling"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "***Mandatory just for V1***\nDecide if scanning the credential as a verifier to request credentials\nor as an issuer too issue credentials.\nOptions: connect | certify"
+          "text": "_[Optional]_\nSets the qr type. It can be \"svg\" or \"canvas\". \"svg\" by default."
         },
-        "attribute": "qr-role",
-        "reflect": false
+        "attribute": "qr-type",
+        "reflect": false,
+        "defaultValue": "\"svg\""
       },
       "callbackServer": {
         "type": "string",

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

@@ -3,8 +3,8 @@ import QRCodeStyling from "qr-code-styling";
 import logoGataca from "../../assets/images/logo_gataca.svg";
 export class GatacaQRDisplay {
   constructor() {
-    this.qrId = undefined;
     this.qrData = undefined;
+    this.qrType = "svg";
     this.size = 256;
     this.logoSize = 0;
     this.logoSrc = undefined;
@@ -18,7 +18,7 @@ export class GatacaQRDisplay {
       height: this.size,
       image: this.logoSize > 0 ? this.logoSrc || logoGataca : undefined,
       margin: 10,
-      type: "canvas",
+      type: this.qrType,
       dotsOptions: {
         color: this.qrColor,
         type: this.rounded ? "dots" : "square",
@@ -34,21 +34,17 @@ export class GatacaQRDisplay {
         imageSize: this.logoSize,
       },
     });
-    this.qr.id = this.qrId;
     qrCode.append(this.qr);
   }
   render() {
-    return (h("div", {
-      // id={this.qrId}
-      ref: (el) => {
+    return (h("div", { ref: (el) => {
         this.qr = el;
-      }
-    }));
+      } }));
   }
   static get is() { return "gataca-qrdisplay"; }
   static get properties() {
     return {
-      "qrId": {
+      "qrData": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -57,30 +53,36 @@ export class GatacaQRDisplay {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nUnique identificator for html tag"
+          "text": "_[Mandatory]_\nSets the contents of the QR"
         },
-        "attribute": "qr-id",
+        "attribute": "qr-data",
         "reflect": false
       },
-      "qrData": {
+      "qrType": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "DrawType",
+          "resolved": "\"canvas\" | \"svg\"",
+          "references": {
+            "DrawType": {
+              "location": "import",
+              "path": "qr-code-styling"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "_[Mandatory]_\nSets the contents of the QR"
+          "text": "_[Optional]_\nSets the qr type. It can be \"svg\" or \"canvas\". \"svg\" by default."
         },
-        "attribute": "qr-data",
-        "reflect": false
+        "attribute": "qr-type",
+        "reflect": false,
+        "defaultValue": "\"svg\""
       },
       "size": {
         "type": "number",

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

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

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

@@ -10,7 +10,7 @@ const DEEP_LINK_PREFIX = "https://api.gataca.io/qr/redirect.html";
 const DEFAULT_SESSION_TIMEOUT = 300;
 const QR_ROLE_CONNECT = "connect";
 export class GatacaQRWS {
-  constructor() { this.successCallback = undefined; this.errorCallback = undefined; this.qrRole = undefined; this.callbackServer = undefined; this.socketEndpoint = undefined; this.sessionTimeout = DEFAULT_SESSION_TIMEOUT; this.wsOnOpen = undefined; this.wsOnMessage = 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.dynamicLink = true; this.sessionId = undefined; this.authenticationRequest = undefined; this.sessionData = undefined; this.result = RESULT_STATUS.NOT_STARTED; }
+  constructor() { this.successCallback = undefined; this.errorCallback = undefined; this.qrRole = undefined; this.qrType = "svg"; this.callbackServer = undefined; this.socketEndpoint = undefined; this.sessionTimeout = DEFAULT_SESSION_TIMEOUT; this.wsOnOpen = undefined; this.wsOnMessage = 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.dynamicLink = true; this.sessionId = undefined; this.authenticationRequest = undefined; this.sessionData = undefined; this.result = RESULT_STATUS.NOT_STARTED; }
   disconnectedCallback() {
     this.stop();
   }
@@ -157,10 +157,10 @@ export class GatacaQRWS {
     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) }));
   }
   renderQR(value, useLogo) {
-    return (h(QR, { value: value, useLogo: useLogo, size: (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, size: (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc }));
   }
   renderRetryQR(value, useLogo) {
-    return (h(QR, { value: value, useLogo: useLogo, 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, qrType: this.qrType, useLogo: useLogo, 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 }));
   }
   render() {
     var _a, _b;
@@ -246,6 +246,29 @@ export class GatacaQRWS {
         "attribute": "qr-role",
         "reflect": false
       },
+      "qrType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DrawType",
+          "resolved": "\"canvas\" | \"svg\"",
+          "references": {
+            "DrawType": {
+              "location": "import",
+              "path": "qr-code-styling"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nSets the qr type. It can be \"svg\" or \"canvas\". \"svg\" by default."
+        },
+        "attribute": "qr-type",
+        "reflect": false,
+        "defaultValue": "\"svg\""
+      },
       "callbackServer": {
         "type": "string",
         "mutable": false,

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

@@ -7,8 +7,8 @@ const DEFAULT_SESSION_TIMEOUT = 300; //5mins as in connect
 const DEFAULT_POLLING_FREQ = 3;
 export class GatacaSSIButton {
   constructor() {
-    this.qrId = undefined;
     this.buttonText = "Easy login";
+    this.qrType = "svg";
     this.autostart = true;
     this.checkStatus = undefined;
     this.createSession = undefined;
@@ -46,9 +46,7 @@ export class GatacaSSIButton {
     this.authenticationRequest = undefined;
     this.sessionData = undefined;
     this.result = RESULT_STATUS.NOT_STARTED;
-    // console.log("qrId2", this.qrId);
-    this.qr = (h("gataca-qr", { ref: (el) => (this.qrElement = el), qrId: this.qrId, 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: this.autostart, autorefresh: this.autorefresh, v: this.v, 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 }));
-    this.qr.qrId = this.qrId;
+    this.qr = (h("gataca-qr", { ref: (el) => (this.qrElement = el), checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, qrType: this.qrType, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: this.autostart, autorefresh: this.autorefresh, v: this.v, 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
@@ -178,12 +176,10 @@ export class GatacaSSIButton {
     }
   }
   renderDesktopButton() {
-    // console.log("this.qrId333", this.qrId);
     return (h("div", { class: "gatacaButtonWrapper" }, h("button", { class: "gatacaButton", onClick: () => {
         this.open = !this.open;
         setTimeout(() => {
           var _a, _b;
-          this.qrElement.id = this.qrId;
           if (this.open) {
             (_a = this.qrElement) === null || _a === void 0 ? void 0 : _a.display();
           }
@@ -264,7 +260,7 @@ export class GatacaSSIButton {
   }
   static get properties() {
     return {
-      "qrId": {
+      "buttonText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -276,28 +272,34 @@ export class GatacaSSIButton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nUnique identificator for html tag"
+          "text": "_[Optional]_\nIn the case of being a button, modifies its text"
         },
-        "attribute": "qr-id",
-        "reflect": false
+        "attribute": "button-text",
+        "reflect": false,
+        "defaultValue": "\"Easy login\""
       },
-      "buttonText": {
+      "qrType": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "DrawType",
+          "resolved": "\"canvas\" | \"svg\"",
+          "references": {
+            "DrawType": {
+              "location": "import",
+              "path": "qr-code-styling"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nIn the case of being a button, modifies its text"
+          "text": "_[Optional]_\nSets the qr type. It can be \"svg\" or \"canvas\". \"svg\" by default."
         },
-        "attribute": "button-text",
+        "attribute": "qr-type",
         "reflect": false,
-        "defaultValue": "\"Easy login\""
+        "defaultValue": "\"svg\""
       },
       "autostart": {
         "type": "boolean",

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

@@ -5,6 +5,7 @@ export class GatacaSSIButtonWS {
     this.buttonText = "Easy login";
     this.successCallback = undefined;
     this.errorCallback = undefined;
+    this.qrType = "svg";
     this.qrRole = undefined;
     this.callbackServer = undefined;
     this.socketEndpoint = undefined;
@@ -19,7 +20,7 @@ export class GatacaSSIButtonWS {
     this.hideBrandTitle = false;
     this.dynamicLink = true;
     this.open = false;
-    this.qr = (h("gataca-qrws", { wsOnMessage: this.wsOnMessage, wsOnOpen: this.wsOnOpen, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, socketEndpoint: this.socketEndpoint, autostart: true, autorefresh: this.autorefresh, v: this.v, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink }));
+    this.qr = (h("gataca-qrws", { wsOnMessage: this.wsOnMessage, wsOnOpen: this.wsOnOpen, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, qrType: this.qrType, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, socketEndpoint: this.socketEndpoint, autostart: true, autorefresh: this.autorefresh, v: this.v, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink }));
   }
   /**
    * Retrieve manually the session data on a successful login
@@ -112,6 +113,29 @@ export class GatacaSSIButtonWS {
         },
         "defaultValue": "undefined"
       },
+      "qrType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DrawType",
+          "resolved": "\"canvas\" | \"svg\"",
+          "references": {
+            "DrawType": {
+              "location": "import",
+              "path": "qr-code-styling"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nSets the qr type. It can be \"svg\" or \"canvas\". \"svg\" by default."
+        },
+        "attribute": "qr-type",
+        "reflect": false,
+        "defaultValue": "\"svg\""
+      },
       "qrRole": {
         "type": "string",
         "mutable": false,

package/dist/components/gataca-autoqr.js

@@ -32,6 +32,7 @@ const GatacaAutoQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.gatacaLoginCompleted = createEvent(this, "gatacaLoginCompleted", 7);
     this.gatacaLoginFailed = createEvent(this, "gatacaLoginFailed", 7);
     this.configId = undefined;
+    this.qrType = "svg";
     this.configRepository = DEFAULT_REPOSITORY;
     this.successCallback = undefined;
     this.errorCallback = undefined;
@@ -75,18 +76,18 @@ const GatacaAutoQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   selectQR() {
     if (this.config.useButton) {
       if (this.config.useWs) {
-        this.qr = (h("gataca-ssibuttonws", { buttonText: this.config.buttonText, wsOnMessage: this.wsOnMessage || this.config.wsOnMessage, wsOnOpen: this.wsOnOpen || this.config.wsOnOpen, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, socketEndpoint: this.config.socketEndpoint, autostart: true, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+        this.qr = (h("gataca-ssibuttonws", { buttonText: this.config.buttonText, wsOnMessage: this.wsOnMessage || this.config.wsOnMessage, wsOnOpen: this.wsOnOpen || this.config.wsOnOpen, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrType: this.qrType, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, socketEndpoint: this.config.socketEndpoint, autostart: true, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
       }
       else {
-        this.qr = (h("gataca-ssibutton", { buttonText: this.config.buttonText, checkStatus: this.checkStatus || this.config.checkStatus, createSession: this.createSession || this.config.createSession, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, pollingFrequency: this.config.pollingFrequency, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+        this.qr = (h("gataca-ssibutton", { buttonText: this.config.buttonText, checkStatus: this.checkStatus || this.config.checkStatus, createSession: this.createSession || this.config.createSession, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrType: this.qrType, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, pollingFrequency: this.config.pollingFrequency, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
       }
     }
     else {
       if (this.config.useWs) {
-        this.qr = (h("gataca-qrws", { wsOnMessage: this.wsOnMessage || this.config.wsOnMessage, wsOnOpen: this.wsOnOpen || this.config.wsOnOpen, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, socketEndpoint: this.config.socketEndpoint, autostart: this.config.autostart, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+        this.qr = (h("gataca-qrws", { wsOnMessage: this.wsOnMessage || this.config.wsOnMessage, wsOnOpen: this.wsOnOpen || this.config.wsOnOpen, successCallback: this.successCallback || this.config.successCallback, qrType: this.qrType, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, socketEndpoint: this.config.socketEndpoint, autostart: this.config.autostart, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
       }
       else {
-        this.qr = (h("gataca-qr", { checkStatus: this.checkStatus || this.config.checkStatus, createSession: this.createSession || this.config.createSession, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, pollingFrequency: this.config.pollingFrequency, autostart: this.config.autostart, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+        this.qr = (h("gataca-qr", { checkStatus: this.checkStatus || this.config.checkStatus, createSession: this.createSession || this.config.createSession, successCallback: this.successCallback || this.config.successCallback, qrType: this.qrType, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, pollingFrequency: this.config.pollingFrequency, autostart: this.config.autostart, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
       }
     }
   }
@@ -105,6 +106,7 @@ const GatacaAutoQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return gatacaAutoqrCss; }
 }, [1, "gataca-autoqr", {
     "configId": [1, "config-id"],
+    "qrType": [1, "qr-type"],
     "configRepository": [1, "config-repository"],
     "successCallback": [16],
     "errorCallback": [16],

package/dist/components/gataca-qr2.js

@@ -1,4 +1,4 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { l as logoGatacaSvg, d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
 import { g as gatIconCheckSvg, a as gatIconRefreshSvg, d as gatIconAlertSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './gat-icon-alert.js';
 
@@ -62,8 +62,8 @@ const ReadQR = (props) => {
 };
 
 const QR = (props) => {
-  const { value, useLogo, logoSrc, size, qrId } = props;
-  return (h("gataca-qrdisplay", { id: qrId, qrData: value, rounded: true, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc }));
+  const { value, useLogo, logoSrc, size, qrType } = props;
+  return (h("gataca-qrdisplay", { qrData: value, rounded: true, qrType: qrType, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc }));
 };
 
 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)}}";
@@ -73,7 +73,7 @@ const DEEP_LINK_PREFIX = "https://api.gataca.io/qr/redirect.html";
 const DEFAULT_SESSION_TIMEOUT = 300; //5mins as in connect
 const DEFAULT_POLLING_FREQ = 3;
 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.qrId = undefined; this.qrRole = undefined; 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 = logoGatacaSvg; 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() { 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.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 = logoGatacaSvg; 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; }
   disconnectedCallback() {
     this.stop();
   }
@@ -88,15 +88,9 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async display() {
     await this.getSessionId();
     this.result = RESULT_STATUS.ONGOING;
-    console.log("display0", "this.result", this.result);
-    forceUpdate(this);
-    console.log("display1", "this.result", this.result);
     this.poll()
       .then((data) => {
       this.result = RESULT_STATUS.SUCCESS;
-      console.log("display2", "this.result", this.result);
-      forceUpdate(this);
-      console.log("display3", "this.result", this.result);
       this.sessionData = data;
       this.gatacaLoginCompleted.emit(data);
       this.successCallback(data);
@@ -113,9 +107,6 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
             ? new Error(this.userNotScanInTimeErrorLabel)
             : new Error(this.credsNotValidatedErrorLabel);
           this.result = err;
-          console.log("display4", "this.result", this.result);
-          forceUpdate(this);
-          console.log("display5", "this.result", this.result);
           this.gatacaLoginFailed.emit(error);
           this.errorCallback(error);
         }
@@ -150,14 +141,9 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.sessionId) {
       return this.sessionId;
     }
-    // console.log("111 getSessionId", "this.sessionId", this.sessionId);
-    if (this.createSession) {
-      let { sessionId, authenticationRequest } = await this.createSession();
-      // console.log("222 getSessionId", "sessionId", sessionId);
-      this.sessionId = sessionId;
-      this.authenticationRequest = authenticationRequest;
-    }
-    // console.log("333 getSessionId", "this.sessionId", this.sessionId);
+    let { sessionId, authenticationRequest } = await this.createSession();
+    this.sessionId = sessionId;
+    this.authenticationRequest = authenticationRequest;
     return this.sessionId;
   }
   getLink() {
@@ -204,7 +190,6 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return new Promise(checkCondition);
   }
   renderQRSection() {
-    console.log("renderQRSection", "this.result", this.result);
     switch (this.result) {
       case RESULT_STATUS.NOT_STARTED:
         return this.renderRetryButton();
@@ -224,23 +209,19 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   renderSuccess() {
-    console.log("renderSuccess", "this.result", this.result);
     return (h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel }));
   }
   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) }));
   }
   renderReadQR(readQrMessages) {
-    console.log("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) }));
   }
   renderQR(value, useLogo) {
-    console.log("renderQR", value, useLogo);
-    return (h(QR, { qrId: this.qrId, value: value, useLogo: useLogo, size: (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, size: (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc }));
   }
   renderRetryQR(value, useLogo) {
-    // console.log("this.qrId", this.qrId);
-    return (h(QR, { qrId: this.qrId, value: value, useLogo: useLogo, 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, 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 }));
   }
   render() {
     var _a, _b;
@@ -265,8 +246,8 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "createSession": [16],
     "successCallback": [16],
     "errorCallback": [16],
-    "qrId": [1, "qr-id"],
     "qrRole": [1, "qr-role"],
+    "qrType": [1, "qr-type"],
     "callbackServer": [1, "callback-server"],
     "autostart": [4],
     "autorefresh": [4],