@gataca/qr 2.0.8 → 2.0.10

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

@@ -1,4 +1,5 @@
 @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");
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -111,7 +112,7 @@ img {
 .popUpContainer .modal-window__content .hidenText {
   display: none;
 }
-.popUpContainer .modal-window p {
+.popUpContainer .modal-window .modalText {
   font-family: "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
   font-size: 20px;
   font-style: normal;
@@ -119,7 +120,6 @@ img {
   line-height: 24px;
   margin-top: 10px;
   letter-spacing: 1px;
-  color: #1e1e20;
 }
 .popUpContainer .modal-window .qrTitleContainer {
   padding: 14px 24px;
@@ -131,12 +131,12 @@ img {
   line-height: 23.5px;
 }
 .popUpContainer .modal-window .qrDescription {
-  font-weight: 400;
+  font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
-  line-height: 16.5px;
-  padding-top: 12px;
-  padding-bottom: 5px;
-  color: #A1A1A1;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: #707074;
 }
 .popUpContainer .modal-window .bold {
   font-weight: 600;
@@ -160,112 +160,117 @@ img {
 .popUpContainer .noBoxShadow {
   box-shadow: none;
 }
-.popUpContainer .reload {
+.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 {
   height: 252px;
   width: 252px;
-  border: 1px dashed #A1A1A1;
+  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;
 }
-.popUpContainer #qrwait {
+
+#qrwait {
   display: flex;
   justify-content: center;
 }
-.popUpContainer #qrwait,
-.popUpContainer #notify {
+
+#qrwait,
+#notify {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 20px;
 }
-.popUpContainer #notify {
+
+#notify {
   z-index: 10;
-  background-color: gray;
   position: absolute;
   justify-self: center;
   justify-items: center;
   justify-content: center;
   align-items: center;
   align-content: center;
-  align-self: center;
   display: flex;
   flex-direction: column;
-  padding: 24px;
   box-sizing: border-box;
-  /* Auto layout */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
   padding: 20px;
-  background: rgba(255, 255, 255, 0.9);
-  /* Grey Colors/Grey 400 */
+  background: rgba(255, 255, 255, 0.95);
 }
-.popUpContainer .notify-text {
-  font-family: "Work Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  text-align: center;
-  font-feature-settings: "salt" on;
-  color: #8B8B8B;
-  flex: none;
-  order: 1;
-  align-self: stretch;
-  flex-grow: 0;
-}
-.popUpContainer .alert {
+#notify > img {
+  padding-bottom: 12px;
+}
+
+.alert {
   display: flex;
   flex-direction: row;
-  align-items: center;
   justify-content: start;
   width: 252px;
   position: absolute;
-  bottom: 0;
-  background: #FFE5E5;
-  border-radius: 12px;
+  bottom: 0px;
+  border: 1px solid #ee888c;
+  background: #ffdedf;
+  border-radius: 11px;
+  box-sizing: border-box;
+  padding: 12px;
+  align-items: center;
+  gap: 12px;
 }
-.popUpContainer .alert img {
-  margin: 12px;
+.alert > img {
+  margin: 0;
 }
-.popUpContainer .alert p {
-  font-weight: 400;
+.alert > p {
+  font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
-  line-height: 16px;
-  color: black;
-}
-.popUpContainer .success {
-  display: flex;
-  height: 300px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0px;
-}
-.popUpContainer .success .successMsg {
-  line-height: 23.5px;
-  color: var(--neutral-1000, #1E1E20);
-  text-align: center;
-  /* Heading/6 */
-  font-family: "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
-  font-size: 20px;
   font-style: normal;
-  font-weight: 700;
-  line-height: 24px;
-  /* 120% */
-}
-.popUpContainer .is-visible {
-  opacity: 1;
-  visibility: visible;
+  font-weight: 400;
+  margin-top: 0;
+  line-height: 16px;
+  color: #1e1e20;
 }
 
-.is-transparent {
-  opacity: 0;
+.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;
 }

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

@@ -1,10 +1,10 @@
 import { h, } from "@stencil/core";
-import alertIcon from "../../assets/icons/gat-icon-alert.svg";
-import successIcon from "../../assets/icons/gat-icon-check.svg";
-import refreshIcon from "../../assets/icons/gat-icon-refresh.svg";
 import logoGataca from "../../assets/images/logo_gataca.svg";
 import "../gataca-qrdisplay/gataca-qrdisplay";
 import { base64UrlEncode, checkMobile, RESULT_STATUS } from "../../utils/utils";
+import { Success } from "./components/success/Success";
+import { RetryButton } from "./components/retryButton/RetryButton";
+import { QR } from "./components/qr/QR";
 const DEEP_LINK_PREFIX = "https://gataca.page.link/?apn=com.gatacaapp&ibi=com.gataca.wallet&link=";
 //Default values
 const DEFAULT_SESSION_TIMEOUT = 300; //5mins as in connect
@@ -152,33 +152,19 @@ export class GatacaQR {
     }
   }
   renderSuccess() {
-    var _a;
-    return (h("div", { class: "success", style: {
-        height: this.modalHeight
-          ? ((_a = this.modalHeight) === null || _a === void 0 ? void 0 : _a.toString()) + "px"
-          : "300px",
-      } }, h("img", { src: successIcon, height: 52, width: 52 }), h("p", { class: "successMsg" }, this.successLoginLabel)));
+    return (h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel }));
   }
   renderRetryButton(errorMessage) {
-    var _a;
-    return (h("div", { class: "reload", style: {
-        width: (this.modalWidth - 50).toString() + "px",
-        height: this.modalWidth
-          ? ((_a = (this.modalWidth - 50)) === null || _a === void 0 ? void 0 : _a.toString()) + "px"
-          : "",
-      } }, h("div", { id: "notify", onClick: () => this.display() }, h("img", { src: refreshIcon, height: 24, width: 24 }), h("p", { class: "qrDescription" }, this.clickInsideBoxLabel, " "), errorMessage ? (h("p", { class: "qrDescription bold" }, this.refreshQrLabel)) : (h("p", { class: "qrDescription bold" }, this.scanQrLabel)), errorMessage && (h("div", { class: "alert", style: {
-        width: (this.modalWidth - 50).toString() + "px",
-      } }, h("img", { src: alertIcon, height: 24, width: 24 }), h("p", null, errorMessage)))), h("div", { id: "qrwait" }, this.renderRetryQR(this.waitingStartSessionLabel))));
+    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 === null || this === void 0 ? void 0 : this.display, renderRetryQR: this === null || this === void 0 ? void 0 : this.renderRetryQR }));
   }
   renderQR(value, useLogo) {
-    return (h("gataca-qrdisplay", { qrData: value, rounded: true, size: this.qrSize, "logo-size": useLogo ? 0.33 : 0, "logo-src": this.logoSrc }));
+    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 }));
   }
   renderRetryQR(value, useLogo) {
-    return (h("gataca-qrdisplay", { qrData: value, rounded: true, size: this.qrSize - 50, "logo-size": useLogo ? 0.33 : 0, "logo-src": this.logoSrc }));
+    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 }));
   }
   render() {
     var _a, _b;
-    console.log("result", this.result);
     return (h("div", { class: "popUpContainer" }, h("div", { class: `is-visible modal-window ${this.hideModalTexts ? "" : "large-modal"} ${this.hideModalBoxShadow ? "noBoxShadow" : ""}`, style: {
         width: (this.modalWidth - 2).toString() + "px",
         height: this.modalHeight
@@ -186,8 +172,8 @@ export class GatacaQR {
           : "",
       }, onClick: (event) => {
         event.stopPropagation();
-      } }, h("div", { class: "modal-window__content" }, h("div", { class: `qrTitleContainer ${this.hideModalTexts ? "hidenText" : ""}` }, h("p", { class: "qrTitle", style: { color: this.modalTitleColor || "#1e1e20" } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand" }, this.byBrandLabel, " ", h("span", null, h("img", { src: logoGataca })))), this.result !== RESULT_STATUS.SUCCESS &&
-      !this.hideQrModalDescription && (h("p", { class: "qrDescription" }, this.qrModalDescription))), h("div", { class: "qrSection", style: {
+      } }, h("div", { class: "modal-window__content" }, h("div", { class: `qrTitleContainer ${this.hideModalTexts ? "hidenText" : ""}` }, h("p", { class: "qrTitle modalText", style: { color: this.modalTitleColor || "#1e1e20" } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand modalText" }, this.byBrandLabel, " ", h("span", null, h("img", { src: logoGataca })))), this.result !== RESULT_STATUS.SUCCESS &&
+      !this.hideQrModalDescription && (h("p", { class: "qrDescription modalText" }, this.qrModalDescription))), h("div", { class: "qrSection", style: {
         width: this.modalWidth.toString() + "px",
         height: this.modalWidth
           ? ((_b = this.modalWidth) === null || _b === void 0 ? void 0 : _b.toString()) + "px"

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

@@ -0,0 +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 }));
+};

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

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+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, } = 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 }), 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/components/success/Success.js

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

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

@@ -1,3 +1,5 @@
+@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");
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -78,9 +80,14 @@ img {
   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;
@@ -89,8 +96,6 @@ img {
   align-items: center;
   display: flex;
   z-index: 1001;
-  width: 300px;
-  min-height: 408px;
   padding: 1px;
   background-color: white;
   border-radius: 12px;
@@ -104,12 +109,17 @@ img {
   height: 100%;
   text-align: left;
 }
-.popUpContainer .modal-window p {
-  font-family: "Work Sans", "Helvetica Neue", sans-serif;
-  font-weight: normal;
-  font-size: 12px;
+.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;
-  color: #1e1e20;
 }
 .popUpContainer .modal-window .qrTitleContainer {
   padding: 14px 24px;
@@ -121,12 +131,12 @@ img {
   line-height: 23.5px;
 }
 .popUpContainer .modal-window .qrDescription {
-  font-weight: 400;
+  font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
-  line-height: 16.5px;
-  padding-top: 12px;
-  padding-bottom: 5px;
-  color: #A1A1A1;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: #707074;
 }
 .popUpContainer .modal-window .bold {
   font-weight: 600;
@@ -147,105 +157,120 @@ img {
   width: 252px;
   height: 252px;
 }
-.popUpContainer .reload {
+.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 {
   height: 252px;
   width: 252px;
-  border: 1px dashed #A1A1A1;
+  border: 1px dashed #a1a1a1;
   border-radius: 12px;
   position: relative;
-  margin: 24px;
+  top: 24px;
+  margin: 0 24px 24px;
   display: flex;
+  overflow: hidden;
   justify-content: center;
   align-items: center;
 }
-.popUpContainer #qrwait {
+
+#qrwait {
   display: flex;
   justify-content: center;
 }
-.popUpContainer #qrwait,
-.popUpContainer #notify {
+
+#qrwait,
+#notify {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 20px;
 }
-.popUpContainer #notify {
+
+#notify {
   z-index: 10;
-  background-color: gray;
   position: absolute;
   justify-self: center;
   justify-items: center;
   justify-content: center;
   align-items: center;
   align-content: center;
-  align-self: center;
   display: flex;
   flex-direction: column;
-  padding: 24px;
   box-sizing: border-box;
-  /* Auto layout */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
   padding: 20px;
-  background: rgba(255, 255, 255, 0.9);
-  /* Grey Colors/Grey 400 */
+  background: rgba(255, 255, 255, 0.95);
 }
-.popUpContainer .notify-text {
-  font-family: "Work Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  text-align: center;
-  font-feature-settings: "salt" on;
-  color: #8B8B8B;
-  flex: none;
-  order: 1;
-  align-self: stretch;
-  flex-grow: 0;
-}
-.popUpContainer .alert {
+#notify > img {
+  padding-bottom: 12px;
+}
+
+.alert {
   display: flex;
   flex-direction: row;
-  align-items: center;
   justify-content: start;
   width: 252px;
   position: absolute;
-  bottom: 0;
-  background: #FFE5E5;
-  border-radius: 12px;
+  bottom: 0px;
+  border: 1px solid #ee888c;
+  background: #ffdedf;
+  border-radius: 11px;
+  box-sizing: border-box;
+  padding: 12px;
+  align-items: center;
+  gap: 12px;
 }
-.popUpContainer .alert img {
-  margin: 12px;
+.alert > img {
+  margin: 0;
 }
-.popUpContainer .alert p {
-  font-weight: 400;
+.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: black;
-}
-.popUpContainer .success {
-  display: flex;
-  height: 300px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0px;
-}
-.popUpContainer .success .successMsg {
-  margin-top: 20px;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 23.5px;
-}
-.popUpContainer .is-visible {
-  opacity: 1;
-  visibility: visible;
+  color: #1e1e20;
 }
 
-.is-transparent {
-  opacity: 0;
+.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;
 }