@gataca/qr 4.0.3 → 4.2.0

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

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 import logoGataca from '../../assets/images/logo_gataca.svg';
 import '../gataca-qrdisplay/gataca-qrdisplay';
-import { base64UrlEncode, checkMobile, RESULT_STATUS } from '../../utils/utils';
+import { base64UrlEncode, checkMobile, RESULT_STATUS, shortenUrlIfPossible } from '../../utils/utils';
 import { Success } from './components/success/Success';
 import { RetryButton } from './components/retryButton/RetryButton';
 import { QR } from './components/qr/QR';
@@ -10,7 +10,54 @@ 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.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; }
+  constructor() {
+    this.qrRefreshGeneration = 0;
+    this.lastShortenRaw = null;
+    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;
+    this.qrHref = '';
+    this.qrShortenPending = false;
+  }
   disconnectedCallback() {
     this.stop();
   }
@@ -23,6 +70,10 @@ export class GatacaQRWS {
    * Force manually the display of a QR
    */
   async display() {
+    this.qrHref = '';
+    this.qrShortenPending = false;
+    this.lastShortenRaw = null;
+    this.qrRefreshGeneration++;
     let socket = new WebSocket(this.socketEndpoint);
     setTimeout(() => {
       this.socket.close(1000, '');
@@ -77,10 +128,16 @@ export class GatacaQRWS {
     this.result = wsresp.result;
     switch (wsresp.result) {
       case RESULT_STATUS.ONGOING:
-      case RESULT_STATUS.READ:
+      case RESULT_STATUS.READ: {
         this.sessionId = wsresp.sessionId;
         this.authenticationRequest = wsresp.authenticationRequest;
+        const raw = this.buildRawLink();
+        if (raw === null || raw === void 0 ? void 0 : raw.trim()) {
+          this.qrShortenPending = true;
+          void this.refreshQrHref();
+        }
         break;
+      }
       case RESULT_STATUS.SUCCESS:
         this.sessionData = wsresp.authenticatedUserData;
         this.gatacaLoginCompleted.emit(wsresp.authenticatedUserData);
@@ -111,6 +168,9 @@ export class GatacaQRWS {
   async stop() {
     this.sessionData = undefined;
     this.sessionId = undefined;
+    this.qrHref = '';
+    this.qrShortenPending = false;
+    this.lastShortenRaw = null;
     this.socket.close(1000, 'Client stopped the connection');
   }
   /**
@@ -119,19 +179,56 @@ export class GatacaQRWS {
   async getSessionData() {
     return this.sessionData ? Promise.resolve(this.sessionData) : Promise.reject(new Error('No successful login'));
   }
-  getLink() {
+  buildRawLink() {
+    var _a;
     if (this.v === '2' && this.qrRole == QR_ROLE_CONNECT) {
-      return this.authenticationRequest;
+      return (_a = this.authenticationRequest) !== null && _a !== void 0 ? _a : '';
     }
     const authRequestEncoded = '?dl=' + base64UrlEncode(this.authenticationRequest);
     return DEEP_LINK_PREFIX + authRequestEncoded;
   }
+  async refreshQrHref() {
+    var _a, _b, _c;
+    const raw = this.buildRawLink();
+    if (!(raw === null || raw === void 0 ? void 0 : raw.trim())) {
+      this.qrShortenPending = false;
+      return;
+    }
+    if (raw === this.lastShortenRaw && ((_a = this.qrHref) === null || _a === void 0 ? void 0 : _a.trim())) {
+      this.qrShortenPending = false;
+      return;
+    }
+    if (this.qrShortenPending && raw === this.lastShortenRaw && !((_b = this.qrHref) === null || _b === void 0 ? void 0 : _b.trim())) {
+      return;
+    }
+    const gen = ++this.qrRefreshGeneration;
+    this.lastShortenRaw = raw;
+    try {
+      const shortened = await shortenUrlIfPossible(raw);
+      const now = this.buildRawLink();
+      if (now === raw) {
+        this.qrHref = shortened;
+      }
+      else if (!((_c = this.qrHref) === null || _c === void 0 ? void 0 : _c.trim())) {
+        this.qrHref = now;
+      }
+    }
+    finally {
+      if (gen === this.qrRefreshGeneration) {
+        this.qrShortenPending = false;
+      }
+    }
+  }
+  getLink() {
+    return this.qrHref || this.buildRawLink();
+  }
   renderQRSection() {
+    var _a, _b, _c;
     switch (this.result) {
       case RESULT_STATUS.NOT_STARTED:
         return this.renderRetryButton();
       case RESULT_STATUS.ONGOING:
-        return this.renderQR(this.getLink(), true);
+        return this.qrShortenPending || !((_a = this.qrHref) === null || _a === void 0 ? void 0 : _a.trim()) ? this.renderQrLoadingSlot() : this.renderQR(this.getLink(), true, undefined, !!((_b = this.qrHref) === null || _b === void 0 ? void 0 : _b.trim()));
       case RESULT_STATUS.EXPIRED:
         return this.renderRetryButton(this.qrCodeExpiredLabel);
       case RESULT_STATUS.FAILED:
@@ -139,26 +236,35 @@ export class GatacaQRWS {
       case RESULT_STATUS.SUCCESS:
         return this.renderSuccess();
       case RESULT_STATUS.READ:
-        return this.renderReadQR({
-          title: this === null || this === void 0 ? void 0 : this.readQrTitle,
-          description: this === null || this === void 0 ? void 0 : this.readQrDescription
-        });
+        return this.qrShortenPending || !((_c = this.qrHref) === null || _c === void 0 ? void 0 : _c.trim())
+          ? this.renderQrLoadingSlot()
+          : this.renderReadQR({
+            title: this === null || this === void 0 ? void 0 : this.readQrTitle,
+            description: this === null || this === void 0 ? void 0 : this.readQrDescription
+          });
     }
   }
   renderSuccess() {
     return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel });
   }
   renderRetryButton(errorMessage) {
-    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this) }));
+    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, display: this.display.bind(this) }));
   }
   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) });
+    var _a;
+    const linkReady = !!((_a = this.qrHref) === null || _a === void 0 ? void 0 : _a.trim());
+    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: (url, useLogo, size) => this.renderQR(url, useLogo, size, linkReady) }));
   }
-  renderQR(value, useLogo, sizeQR) {
-    return h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc });
+  renderQR(value, useLogo, sizeQR, linkReady = true) {
+    return h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, linkReady: linkReady });
   }
-  renderRetryQR(value, useLogo) {
-    return h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, 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 });
+  renderQrLoadingSlot() {
+    const s = this.qrSize || 300;
+    return (h("div", { class: "qr-loading-slot", style: {
+        width: s + 'px',
+        height: s + 'px',
+        margin: '0 auto'
+      } }));
   }
   render() {
     var _a, _b;
@@ -883,7 +989,9 @@ export class GatacaQRWS {
       "sessionId": {},
       "authenticationRequest": {},
       "sessionData": {},
-      "result": {}
+      "result": {},
+      "qrHref": {},
+      "qrShortenPending": {}
     };
   }
   static get events() {

package/dist/collection/utils/utils.js

@@ -20,4 +20,47 @@ export var RESULT_STATUS;
   RESULT_STATUS[RESULT_STATUS["EXPIRED"] = 3] = "EXPIRED";
   RESULT_STATUS[RESULT_STATUS["READ"] = 5] = "READ";
 })(RESULT_STATUS || (RESULT_STATUS = {}));
+const GATACA_SHORTEN_API = 'https://links.gataca.io/api/v1/short';
+function extractShortUrlFromResponse(body) {
+  if (!body || typeof body !== 'object') {
+    return null;
+  }
+  const o = body;
+  for (const key of ['url', 'shortUrl', 'short_url', 'link']) {
+    const v = o[key];
+    if (typeof v === 'string' && v.trim() !== '') {
+      return v;
+    }
+  }
+  return null;
+}
+/**
+ * POSTs the link to shortener. On success with a non-empty url in the body, returns that url;
+ * otherwise returns the original link.
+ */
+export async function shortenUrlIfPossible(link) {
+  const trimmedLink = (link === null || link === void 0 ? void 0 : link.trim()) || '';
+  const linkHasLength = trimmedLink === null || trimmedLink === void 0 ? void 0 : trimmedLink.length;
+  if (!linkHasLength) {
+    return link !== null && link !== void 0 ? link : '';
+  }
+  try {
+    const res = await fetch(GATACA_SHORTEN_API, {
+      method: 'POST',
+      mode: 'cors',
+      credentials: 'omit',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url: trimmedLink })
+    });
+    if (res.status !== 200 && res.status !== 201) {
+      return link;
+    }
+    const data = await res.json().catch(() => null);
+    const short = extractShortUrlFromResponse(data);
+    return short !== null && short !== void 0 ? short : link;
+  }
+  catch (_a) {
+    return link;
+  }
+}
 //

package/dist/components/gat-icon-check.js

@@ -20,10 +20,53 @@ var RESULT_STATUS;
   RESULT_STATUS[RESULT_STATUS["EXPIRED"] = 3] = "EXPIRED";
   RESULT_STATUS[RESULT_STATUS["READ"] = 5] = "READ";
 })(RESULT_STATUS || (RESULT_STATUS = {}));
+const GATACA_SHORTEN_API = 'https://links.gataca.io/api/v1/short';
+function extractShortUrlFromResponse(body) {
+  if (!body || typeof body !== 'object') {
+    return null;
+  }
+  const o = body;
+  for (const key of ['url', 'shortUrl', 'short_url', 'link']) {
+    const v = o[key];
+    if (typeof v === 'string' && v.trim() !== '') {
+      return v;
+    }
+  }
+  return null;
+}
+/**
+ * POSTs the link to shortener. On success with a non-empty url in the body, returns that url;
+ * otherwise returns the original link.
+ */
+async function shortenUrlIfPossible(link) {
+  const trimmedLink = (link === null || link === void 0 ? void 0 : link.trim()) || '';
+  const linkHasLength = trimmedLink === null || trimmedLink === void 0 ? void 0 : trimmedLink.length;
+  if (!linkHasLength) {
+    return link !== null && link !== void 0 ? link : '';
+  }
+  try {
+    const res = await fetch(GATACA_SHORTEN_API, {
+      method: 'POST',
+      mode: 'cors',
+      credentials: 'omit',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url: trimmedLink })
+    });
+    if (res.status !== 200 && res.status !== 201) {
+      return link;
+    }
+    const data = await res.json().catch(() => null);
+    const short = extractShortUrlFromResponse(data);
+    return short !== null && short !== void 0 ? short : link;
+  }
+  catch (_a) {
+    return link;
+  }
+}
 //
 
 const gatIconAlertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjI5MDggMy44NjAyTDEuODIwNzUgMTguMDAwMkMxLjY0NjEyIDE4LjMwMjYgMS41NTM3MiAxOC42NDU1IDEuNTUyNzQgMTguOTk0N0MxLjU1MTc2IDE5LjM0MzkgMS42NDIyNCAxOS42ODczIDEuODE1MTggMTkuOTkwN0MxLjk4ODEyIDIwLjI5NDEgMi4yMzc0OCAyMC41NDcgMi41Mzg0NiAyMC43MjQxQzIuODM5NDQgMjAuOTAxMiAzLjE4MTU1IDIwLjk5NjQgMy41MzA3NSAyMS4wMDAySDIwLjQ3MDhDMjAuODIgMjAuOTk2NCAyMS4xNjIxIDIwLjkwMTIgMjEuNDYzIDIwLjcyNDFDMjEuNzY0IDIwLjU0NyAyMi4wMTM0IDIwLjI5NDEgMjIuMTg2MyAxOS45OTA3QzIyLjM1OTMgMTkuNjg3MyAyMi40NDk3IDE5LjM0MzkgMjIuNDQ4OCAxOC45OTQ3QzIyLjQ0NzggMTguNjQ1NSAyMi4zNTU0IDE4LjMwMjYgMjIuMTgwOCAxOC4wMDAyTDEzLjcxMDggMy44NjAyQzEzLjUzMjUgMy41NjYzMSAxMy4yODE1IDMuMzIzMzIgMTIuOTgxOSAzLjE1NDY5QzEyLjY4MjQgMi45ODYwNSAxMi4zNDQ1IDIuODk3NDYgMTIuMDAwOCAyLjg5NzQ2QzExLjY1NyAyLjg5NzQ2IDExLjMxOTEgMi45ODYwNSAxMS4wMTk2IDMuMTU0NjlDMTAuNzIgMy4zMjMzMiAxMC40NjkgMy41NjYzMSAxMC4yOTA4IDMuODYwMlYzLjg2MDJaIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiA5VjEzIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiAxN0gxMi4wMSIgc3Ryb2tlPSIjQ0QyQjMxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
 
 const gatIconCheckSvg = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUyIiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgNTIgNTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjI2IiBjeT0iMjYuNjcxOSIgcj0iMjYiIGZpbGw9IiMzRDlBNTAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zOC41MiAxNy43NDk1QzM5LjU4MDUgMTguODA5OSAzOS41ODA1IDIwLjUyOTMgMzguNTIgMjEuNTg5OEwyMy41ODQ2IDM2LjUyNTFDMjIuNTI0MiAzNy41ODU2IDIwLjgwNDggMzcuNTg1NiAxOS43NDQzIDM2LjUyNTFMMTIuOTU1NSAyOS43MzYzQzExLjg5NSAyOC42NzU5IDExLjg5NSAyNi45NTY1IDEyLjk1NTUgMjUuODk2QzE0LjAxNiAyNC44MzU1IDE1LjczNTQgMjQuODM1NSAxNi43OTU4IDI1Ljg5NkwyMS42NjQ1IDMwLjc2NDdMMzQuNjc5NyAxNy43NDk1QzM1Ljc0MDIgMTYuNjg5IDM3LjQ1OTUgMTYuNjg5IDM4LjUyIDE3Ljc0OTVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
 
-export { RESULT_STATUS as R, gatIconCheckSvg as a, base64UrlEncode as b, checkMobile as c, gatIconAlertSvg as g };
+export { RESULT_STATUS as R, gatIconCheckSvg as a, base64UrlEncode as b, checkMobile as c, gatIconAlertSvg as g, shortenUrlIfPossible as s };

package/dist/components/gataca-qr2.js

@@ -1,9 +1,17 @@
 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 gatIconAlertSvg, a as gatIconCheckSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './gat-icon-check.js';
+import { g as gatIconAlertSvg, a as gatIconCheckSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode, s as shortenUrlIfPossible } from './gat-icon-check.js';
 
 const QR = (props) => {
-  const { value, useLogo, logoSrc, size, qrType, style } = props;
+  const { value, useLogo, logoSrc, size, qrType, style, linkReady = true } = props;
+  const s = size !== null && size !== void 0 ? size : 256;
+  if (!linkReady) {
+    return (h("div", { class: "qr-loading-slot", style: {
+        width: s + 'px',
+        height: s + 'px',
+        margin: '0 auto'
+      } }));
+  }
   return h("gataca-qrdisplay", { qrData: value, rounded: true, qrType: qrType, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc, qrColor: style === null || style === void 0 ? void 0 : style.color, bgColor: style === null || style === void 0 ? void 0 : style.bgColor });
 };
 
@@ -53,7 +61,7 @@ const RefreshIcon = (props) => {
 
 const RetryButton = (props) => {
   var _a;
-  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, style, display, renderRetryQR } = props;
+  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, style, display } = props;
   const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
   const alertBgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.alertBgColor) ? style === null || style === void 0 ? void 0 : style.alertBgColor : '#ffdedf' };
   const alertBorderColor = { borderColor: (style === null || style === void 0 ? void 0 : style.alertBorderColor) ? style === null || style === void 0 ? void 0 : style.alertBorderColor : '#ee888c' };
@@ -72,7 +80,10 @@ const RetryButton = (props) => {
       errorMessage && (h("div", { class: "alert", style: Object.assign(Object.assign({ width: (modalWidth - 48).toString() + 'px' }, alertBgStyle), { border: `1px solid ${alertBorderColor}` }) },
         h("img", { src: gatIconAlertSvg, height: 24, width: 24 }),
         h("p", { style: { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' } }, errorMessage)))),
-    h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
+    h("div", { id: "qrwait", class: "qr-placeholder-slot", style: {
+        width: (modalWidth - 48).toString() + 'px',
+        height: modalWidth ? (modalWidth - 48).toString() + 'px' : ''
+      } })));
 };
 
 const Success = (props) => {
@@ -85,14 +96,65 @@ const Success = (props) => {
     h("p", { class: "successMsg", style: colorStyle }, successLoginLabel)));
 };
 
-const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:20px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>svg{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background-color:var(--loader-color, #4745B7);border-radius:2px;--to-opacity:1;opacity:var(--to-opacity)}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);--to-opacity:calc(1 - (0 / 8));animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);--to-opacity:calc(1 - (1 / 8));animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);--to-opacity:calc(1 - (2 / 8));animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);--to-opacity:calc(1 - (3 / 8));animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);--to-opacity:calc(1 - (4 / 8));animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);--to-opacity:calc(1 - (5 / 8));animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);--to-opacity:calc(1 - (6 / 8));animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);--to-opacity:calc(1 - (7 / 8));animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{opacity:1}100%{opacity:var(--to-opacity)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
+const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:20px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}.qr-placeholder-slot{box-sizing:border-box;border-radius:12px;background:rgba(0, 0, 0, 0.04)}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>svg{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background-color:var(--loader-color, #4745B7);border-radius:2px;--to-opacity:1;opacity:var(--to-opacity)}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);--to-opacity:calc(1 - (0 / 8));animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);--to-opacity:calc(1 - (1 / 8));animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);--to-opacity:calc(1 - (2 / 8));animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);--to-opacity:calc(1 - (3 / 8));animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);--to-opacity:calc(1 - (4 / 8));animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);--to-opacity:calc(1 - (5 / 8));animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);--to-opacity:calc(1 - (6 / 8));animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);--to-opacity:calc(1 - (7 / 8));animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{opacity:1}100%{opacity:var(--to-opacity)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
 
 const DEEP_LINK_PREFIX = 'https://api.gataca.io/qr/redirect.html';
 //Default values
 const DEFAULT_SESSION_TIMEOUT = 300; //5mins as in connect
 const DEFAULT_POLLING_FREQ = 3;
 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.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.qrStyle = undefined; 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.lastShortenRaw = null;
+    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.qrStyle = undefined;
+    this.sessionId = undefined;
+    this.authenticationRequest = undefined;
+    this.sessionData = undefined;
+    this.result = RESULT_STATUS.NOT_STARTED;
+    this.qrHref = '';
+  }
   disconnectedCallback() {
     this.stop();
   }
@@ -106,6 +168,7 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async display() {
     await this.getSessionId();
+    await this.refreshQrHref();
     this.result = RESULT_STATUS.ONGOING;
     this.poll()
       .then((data) => {
@@ -133,6 +196,30 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       window.location.href = this.getLink();
     }
   }
+  buildRawLink() {
+    var _a;
+    if (this.v === '2') {
+      return (_a = this.authenticationRequest) !== null && _a !== void 0 ? _a : '';
+    }
+    const authRequestEncoded = '?dl=' + base64UrlEncode(this.authenticationRequest);
+    return DEEP_LINK_PREFIX + authRequestEncoded;
+  }
+  async refreshQrHref() {
+    var _a;
+    const raw = this.buildRawLink();
+    if (raw === this.lastShortenRaw) {
+      return;
+    }
+    this.lastShortenRaw = raw;
+    const shortened = await shortenUrlIfPossible(raw !== null && raw !== void 0 ? raw : '');
+    const now = this.buildRawLink();
+    if (now === raw) {
+      this.qrHref = shortened;
+    }
+    else if (!((_a = this.qrHref) === null || _a === void 0 ? void 0 : _a.trim())) {
+      this.qrHref = now;
+    }
+  }
   /**
    * Stop manually an ongoing session
    */
@@ -145,6 +232,8 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   clean() {
     this.sessionData = undefined;
     this.sessionId = undefined;
+    this.qrHref = '';
+    this.lastShortenRaw = null;
   }
   /**
    * Retrieve manually the session data on a successful login
@@ -162,11 +251,7 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.sessionId;
   }
   getLink() {
-    if (this.v === '2') {
-      return this.authenticationRequest;
-    }
-    const authRequestEncoded = '?dl=' + base64UrlEncode(this.authenticationRequest);
-    return DEEP_LINK_PREFIX + authRequestEncoded;
+    return this.qrHref || this.buildRawLink();
   }
   async poll() {
     let endTime = new Date().getTime() + (this.sessionTimeout || DEFAULT_SESSION_TIMEOUT) * 1000;
@@ -204,11 +289,12 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return new Promise(checkCondition);
   }
   renderQRSection() {
+    var _a;
     switch (this.result) {
       case RESULT_STATUS.NOT_STARTED:
         return this.renderRetryButton();
       case RESULT_STATUS.ONGOING:
-        return this.renderQR(this.getLink(), true);
+        return this.renderQR(this.getLink(), true, undefined, !!((_a = this.qrHref) === null || _a === void 0 ? void 0 : _a.trim()));
       case RESULT_STATUS.EXPIRED:
         return this.renderRetryButton(this.qrCodeExpiredLabel);
       case RESULT_STATUS.FAILED:
@@ -226,16 +312,15 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel, style: this === null || this === void 0 ? void 0 : this.qrStyle });
   }
   renderRetryButton(errorMessage) {
-    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this), style: this === null || this === void 0 ? void 0 : this.qrStyle }));
+    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, display: this.display.bind(this), style: this === null || this === void 0 ? void 0 : this.qrStyle }));
   }
   renderReadQR(readQrMessages) {
-    return (h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this), style: this.qrStyle }));
-  }
-  renderQR(value, useLogo, sizeQR) {
-    return h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
+    var _a;
+    const linkReady = !!((_a = this.qrHref) === null || _a === void 0 ? void 0 : _a.trim());
+    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: (url, useLogo, size) => this.renderQR(url, useLogo, size, linkReady), style: this.qrStyle }));
   }
-  renderRetryQR(value, useLogo) {
-    return h(QR, { value: value, useLogo: useLogo && this.logoSize !== 0, qrType: this.qrType, size: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
+  renderQR(value, useLogo, sizeQR, linkReady = true) {
+    return (h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle, linkReady: linkReady }));
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
@@ -296,6 +381,7 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "authenticationRequest": [32],
     "sessionData": [32],
     "result": [32],
+    "qrHref": [32],
     "display": [64],
     "stop": [64],
     "getSessionData": [64]

package/dist/components/gataca-qrdisplay2.js

@@ -40,8 +40,8 @@ const GatacaQRDisplay = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.bgColor = '#FFFFFF';
     this.rounded = true;
   }
-  componentDidLoad() {
-    const qrCode = new QRCodeStyling({
+  getQrOptions() {
+    return {
       data: this.qrData,
       width: this.size,
       height: this.size,
@@ -65,14 +65,35 @@ const GatacaQRDisplay = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       backgroundOptions: {
         color: this.bgColor
       }
-    });
-    qrCode.append(this.qr);
+    };
+  }
+  componentDidLoad() {
+    this.mountOrUpdateQr();
+  }
+  onQrDataChange() {
+    this.mountOrUpdateQr();
+  }
+  mountOrUpdateQr() {
+    var _a;
+    if (!((_a = this.qrData) === null || _a === void 0 ? void 0 : _a.trim()) || !this.qr) {
+      return;
+    }
+    if (!this.qrCode) {
+      this.qrCode = new QRCodeStyling(this.getQrOptions());
+      this.qrCode.append(this.qr);
+    }
+    else {
+      this.qrCode.update({ data: this.qrData });
+    }
   }
   render() {
     return (h("div", { ref: (el) => {
         this.qr = el;
       } }));
   }
+  static get watchers() { return {
+    "qrData": ["onQrDataChange"]
+  }; }
 }, [0, "gataca-qrdisplay", {
     "qrData": [1, "qr-data"],
     "qrType": [1, "qr-type"],