@gataca/qr 2.0.12 → 2.0.13

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

@@ -55,6 +55,8 @@ table {
   border-spacing: 0;
 }
 
+/* Sizes */
+/* Trigonometry helpers */
 /*
 QR COMPONENT  
 */
@@ -139,7 +141,7 @@ img {
   color: #707074;
 }
 .popUpContainer .modal-window .bold {
-  font-weight: 600;
+  font-weight: 700;
 }
 .popUpContainer .modal-window .qrBrand {
   margin-top: 4px;
@@ -191,7 +193,7 @@ img {
   line-height: 24px;
 }
 
-.reload {
+.reload, .blured {
   height: 252px;
   width: 252px;
   border: 1px dashed #a1a1a1;
@@ -273,4 +275,125 @@ img {
   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);
+  }
 }

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

@@ -4,6 +4,7 @@ import "../gataca-qrdisplay/gataca-qrdisplay";
 import { base64UrlEncode, checkMobile, RESULT_STATUS } from "../../utils/utils";
 import { Success } from "./components/success/Success";
 import { RetryButton } from "./components/retryButton/RetryButton";
+import { ReadQR } from "./components/readQR/ReadQR";
 import { QR } from "./components/qr/QR";
 const DEEP_LINK_PREFIX = "https://gataca.page.link/?apn=com.gatacaapp&ibi=com.gataca.wallet&link=";
 //Default values
@@ -15,7 +16,7 @@ const FUNCTION_ROLES = {
   certify: "credential",
 };
 export class GatacaQR {
-  constructor() { this.checkStatus = undefined; this.createSession = undefined; this.successCallback = undefined; this.errorCallback = undefined; this.qrRole = undefined; this.callbackServer = undefined; this.autostart = true; this.autorefresh = false; this.v2 = false; this.qrModalTitle = "Quick Access"; this.modalTitleColor = "#4745B7"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.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.readedQrLabel = "QR Code already scanned."; this.clickInsideBoxReadedQrLabel = "Click the box to refresh."; 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.callbackServer = undefined; this.autostart = true; this.autorefresh = false; this.v2 = false; this.qrModalTitle = "Quick Access"; this.modalTitleColor = "#4745B7"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.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();
   }
@@ -63,7 +64,7 @@ export class GatacaQR {
    */
   async stop() {
     this.clean();
-    if (this.result === RESULT_STATUS.ONGOING) {
+    if (this.result === RESULT_STATUS.ONGOING || RESULT_STATUS.READ) {
       this.result = RESULT_STATUS.NOT_STARTED;
     }
   }
@@ -123,6 +124,7 @@ export class GatacaQR {
           resolve(data);
           break;
         case RESULT_STATUS.ONGOING:
+        case RESULT_STATUS.READ:
           if (component.sessionTimeout > 0 && new Date().getTime() < endTime) {
             setTimeout(checkCondition, interval, resolve, reject);
           }
@@ -149,18 +151,21 @@ export class GatacaQR {
         return this.renderRetryButton(this.credentialsNotValidatedLabel);
       case RESULT_STATUS.SUCCESS:
         return this.renderSuccess();
-      case RESULT_STATUS.READED:
-        return this.renderRetryButton(null, {
-          title: this === null || this === void 0 ? void 0 : this.readedQrLabel,
-          description: this === null || this === void 0 ? void 0 : this.clickInsideBoxReadedQrLabel,
+      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,
         });
     }
   }
   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, readedQrMessages) {
-    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), readedQrMessages: readedQrMessages }));
+  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) {
+    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 }));
@@ -762,7 +767,7 @@ export class GatacaQR {
         "reflect": false,
         "defaultValue": "\"waiting to start a session\""
       },
-      "readedQrLabel": {
+      "readQrTitle": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -774,13 +779,13 @@ export class GatacaQR {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nString to show when QR already read"
+          "text": "_[Optional]_\nString title to show when QR already read"
         },
-        "attribute": "readed-qr-label",
+        "attribute": "read-qr-title",
         "reflect": false,
-        "defaultValue": "\"QR Code already scanned.\""
+        "defaultValue": "\"Processing...\""
       },
-      "clickInsideBoxReadedQrLabel": {
+      "readQrDescription": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -792,11 +797,11 @@ export class GatacaQR {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nString to show \"click inside\" label for QR already read"
+          "text": "_[Optional]_\nString description to show when QR already read"
         },
-        "attribute": "click-inside-box-readed-qr-label",
+        "attribute": "read-qr-description",
         "reflect": false,
-        "defaultValue": "\"Click the box to refresh.\""
+        "defaultValue": "\"Please wait a moment\""
       },
       "hideQrModalDescription": {
         "type": "boolean",

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

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

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

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const AnimatedLoader = () => {
+  return (h("div", { class: "containerLoader" }, h("div", { class: "loader" }, h("div", { class: "loader__item loader__item__1" }), h("div", { class: "loader__item loader__item__2" }), h("div", { class: "loader__item loader__item__3" }), h("div", { class: "loader__item loader__item__4" }), h("div", { class: "loader__item loader__item__5" }), h("div", { class: "loader__item loader__item__6" }), h("div", { class: "loader__item loader__item__7" }), h("div", { class: "loader__item loader__item__8" }))));
+};

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

@@ -3,12 +3,11 @@ import refreshIcon from "../../../../assets/icons/gat-icon-refresh.svg";
 import alertIcon from "../../../../assets/icons/gat-icon-alert.svg";
 export const RetryButton = (props) => {
   var _a;
-  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR, readedQrMessages, } = props;
+  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR, } = props;
   return (h("div", { class: "reload", style: {
       width: (modalWidth - 48).toString() + "px",
       height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + "px" : "",
-    } }, h("div", { id: "notify", onClick: () => display() }, h("img", { src: refreshIcon, height: 24, width: 24 }), readedQrMessages ? (h("p", { class: "notify-text" }, readedQrMessages === null || readedQrMessages === void 0 ? void 0 :
-    readedQrMessages.title, " ")) : (h("p", { class: "notify-text" }, clickInsideBoxLabel, " ")), errorMessage ? (h("p", { class: "notify-text bold" }, refreshQrLabel)) : readedQrMessages ? (h("p", { class: "notify-text bold" }, readedQrMessages === null || readedQrMessages === void 0 ? void 0 : readedQrMessages.description)) : (h("p", { class: "notify-text bold" }, scanQrLabel)), errorMessage && (h("div", { class: "alert", style: {
+    } }, h("div", { id: "notify", onClick: () => display() }, h("img", { src: refreshIcon, height: 24, width: 24 }), h("p", { class: "notify-text" }, clickInsideBoxLabel, " "), errorMessage ? (h("p", { class: "notify-text bold" }, refreshQrLabel)) : (h("p", { class: "notify-text bold" }, scanQrLabel)), errorMessage && (h("div", { class: "alert", style: {
       width: (modalWidth - 48).toString() + "px",
     } }, h("img", { src: alertIcon, height: 24, width: 24 }), h("p", null, errorMessage)))), h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
 };

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

@@ -55,6 +55,8 @@ table {
   border-spacing: 0;
 }
 
+/* Sizes */
+/* Trigonometry helpers */
 /*
 QR COMPONENT  
 */
@@ -139,7 +141,7 @@ img {
   color: #707074;
 }
 .popUpContainer .modal-window .bold {
-  font-weight: 600;
+  font-weight: 700;
 }
 .popUpContainer .modal-window .qrBrand {
   margin-top: 4px;
@@ -191,7 +193,8 @@ img {
   line-height: 24px;
 }
 
-.reload {
+.reload,
+.blured {
   height: 252px;
   width: 252px;
   border: 1px dashed #a1a1a1;
@@ -273,4 +276,125 @@ img {
   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);
+  }
 }

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

@@ -5,6 +5,7 @@ import { base64UrlEncode, checkMobile, RESULT_STATUS, } from "../../utils/utils"
 import { Success } from "./components/success/Success";
 import { RetryButton } from "./components/retryButton/RetryButton";
 import { QR } from "./components/qr/QR";
+import { ReadQR } from "./components/readQR/ReadQR";
 const DEEP_LINK_PREFIX = "https://gataca.page.link/?apn=com.gatacaapp&ibi=com.gataca.wallet&link=";
 const DEFAULT_SESSION_TIMEOUT = 300;
 const QR_ROLE_CONNECT = "connect";
@@ -13,7 +14,7 @@ const FUNCTION_ROLES = {
   certify: "credential",
 };
 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.v2 = false; this.qrModalTitle = "Quick Access"; this.modalTitleColor = "#4745B7"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.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.readedQrLabel = "QR Code already scanned."; this.clickInsideBoxReadedQrLabel = "Click the box to refresh."; 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.callbackServer = undefined; this.socketEndpoint = undefined; this.sessionTimeout = DEFAULT_SESSION_TIMEOUT; this.wsOnOpen = undefined; this.wsOnMessage = undefined; this.autostart = true; this.autorefresh = false; this.v2 = false; this.qrModalTitle = "Quick Access"; this.modalTitleColor = "#4745B7"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.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();
   }
@@ -54,7 +55,7 @@ export class GatacaQRWS {
       socket.close(1000, "");
     };
     socket.onclose = () => {
-      if (this.result === RESULT_STATUS.ONGOING) {
+      if (this.result === RESULT_STATUS.ONGOING || RESULT_STATUS.READ) {
         this.result = RESULT_STATUS.EXPIRED;
       }
       if (this.result === RESULT_STATUS.EXPIRED) {
@@ -80,6 +81,7 @@ export class GatacaQRWS {
     this.result = wsresp.result;
     switch (wsresp.result) {
       case RESULT_STATUS.ONGOING:
+      case RESULT_STATUS.READ:
         this.sessionId = wsresp.sessionId;
         this.authenticationRequest = wsresp.authenticationRequest;
         break;
@@ -150,18 +152,21 @@ export class GatacaQRWS {
         return this.renderRetryButton(this.credentialsNotValidatedLabel);
       case RESULT_STATUS.SUCCESS:
         return this.renderSuccess();
-      case RESULT_STATUS.READED:
-        return this.renderRetryButton(null, {
-          title: this === null || this === void 0 ? void 0 : this.readedQrLabel,
-          description: this === null || this === void 0 ? void 0 : this.clickInsideBoxReadedQrLabel,
+      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,
         });
     }
   }
   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, readedQrMessages) {
-    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), readedQrMessages: readedQrMessages }));
+  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) {
+    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 }));
@@ -795,7 +800,7 @@ export class GatacaQRWS {
         "reflect": false,
         "defaultValue": "\"waiting to start a session\""
       },
-      "readedQrLabel": {
+      "readQrTitle": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -807,13 +812,13 @@ export class GatacaQRWS {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nString to show when QR already read"
+          "text": "_[Optional]_\nString title to show when QR already read"
         },
-        "attribute": "readed-qr-label",
+        "attribute": "read-qr-title",
         "reflect": false,
-        "defaultValue": "\"QR Code already scanned.\""
+        "defaultValue": "\"Processing...\""
       },
-      "clickInsideBoxReadedQrLabel": {
+      "readQrDescription": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -825,11 +830,11 @@ export class GatacaQRWS {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "_[Optional]_\nString to show \"click inside\" label for QR already read"
+          "text": "_[Optional]_\nString description to show when QR already read"
         },
-        "attribute": "click-inside-box-readed-qr-label",
+        "attribute": "read-qr-description",
         "reflect": false,
-        "defaultValue": "\"Click the box to refresh.\""
+        "defaultValue": "\"Please wait a moment\""
       },
       "hideQrModalDescription": {
         "type": "boolean",

package/dist/collection/utils/utils.js

@@ -18,5 +18,5 @@ export var RESULT_STATUS;
   RESULT_STATUS[RESULT_STATUS["SUCCESS"] = 1] = "SUCCESS";
   RESULT_STATUS[RESULT_STATUS["FAILED"] = 2] = "FAILED";
   RESULT_STATUS[RESULT_STATUS["EXPIRED"] = 3] = "EXPIRED";
-  RESULT_STATUS[RESULT_STATUS["READED"] = 5] = "READED";
+  RESULT_STATUS[RESULT_STATUS["READ"] = 5] = "READ";
 })(RESULT_STATUS || (RESULT_STATUS = {}));

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

@@ -18,7 +18,7 @@ var RESULT_STATUS;
   RESULT_STATUS[RESULT_STATUS["SUCCESS"] = 1] = "SUCCESS";
   RESULT_STATUS[RESULT_STATUS["FAILED"] = 2] = "FAILED";
   RESULT_STATUS[RESULT_STATUS["EXPIRED"] = 3] = "EXPIRED";
-  RESULT_STATUS[RESULT_STATUS["READED"] = 5] = "READED";
+  RESULT_STATUS[RESULT_STATUS["READ"] = 5] = "READ";
 })(RESULT_STATUS || (RESULT_STATUS = {}));
 
 const gatIconCheckSvg = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUyIiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgNTIgNTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjI2IiBjeT0iMjYuNjcxOSIgcj0iMjYiIGZpbGw9IiMzRDlBNTAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zOC41MiAxNy43NDk1QzM5LjU4MDUgMTguODA5OSAzOS41ODA1IDIwLjUyOTMgMzguNTIgMjEuNTg5OEwyMy41ODQ2IDM2LjUyNTFDMjIuNTI0MiAzNy41ODU2IDIwLjgwNDggMzcuNTg1NiAxOS43NDQzIDM2LjUyNTFMMTIuOTU1NSAyOS43MzYzQzExLjg5NSAyOC42NzU5IDExLjg5NSAyNi45NTY1IDEyLjk1NTUgMjUuODk2QzE0LjAxNiAyNC44MzU1IDE1LjczNTQgMjQuODM1NSAxNi43OTU4IDI1Ljg5NkwyMS42NjQ1IDMwLjc2NDdMMzQuNjc5NyAxNy43NDk1QzM1Ljc0MDIgMTYuNjg5IDM3LjQ1OTUgMTYuNjg5IDM4LjUyIDE3Ljc0OTVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';