@gataca/qr 0.0.7

package/dist/components/gataca-autoqr.js

@@ -0,0 +1,161 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$6 } from './gataca-qr2.js';
+import { d as defineCustomElement$5 } from './gataca-qrdisplay2.js';
+import { d as defineCustomElement$4 } from './gataca-qrws2.js';
+import { d as defineCustomElement$3 } from './gataca-ssibutton2.js';
+import { d as defineCustomElement$2 } from './gataca-ssibuttonws2.js';
+
+const gatacaAutoqrCss = "@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}.buttonContainer{display:inline-block;text-align:right;padding:10px;position:relative}.gatacaButtonWrapper{margin:8px}.gatacaButtonWrapper .gatacaButton{display:flex;min-width:100px;padding:8px 8px;background-color:white;font-size:12px;font-family:\"Work Sans\", sans-serif;letter-spacing:1px;font-weight:2;justify-content:space-between;align-items:center;border-radius:6px;border:1px solid rgba(24, 27, 94, 0.5);color:rgba(24, 27, 94, 0.8);box-shadow:0px 1px 3px rgba(48, 48, 48, 0.15);cursor:pointer}.gatacaButtonWrapper .gatacaButton>span{margin-right:10px}.gatacaButtonWrapper .gatacaButton:hover{box-shadow:0px 2px 8px rgba(48, 48, 48, 0.1)}.gatacaButtonWrapper .buttonText{text-align:right;font-size:8px;color:rgba(24, 27, 94, 0.5);font-family:\"Helvetica Neue\", sans-serif;letter-spacing:1px;padding-right:8px;font-weight:1}.gatacaButtonWrapper .buttonImg{height:25px;width:25px;margin:0;margin-right:20px}";
+
+const DEFAULT_REPOSITORY = "https://studio.gataca.io/api/v1/qrconfigs";
+const fixFunctions = (data) => {
+  var _a, _b, _c, _d, _e, _f;
+  data.errorCallback = deserializeFunction((_a = data.errorCallback) === null || _a === void 0 ? void 0 : _a.toString());
+  data.successCallback = deserializeFunction((_b = data.successCallback) === null || _b === void 0 ? void 0 : _b.toString());
+  data.wsOnMessage = deserializeFunction((_c = data.wsOnMessage) === null || _c === void 0 ? void 0 : _c.toString());
+  data.wsOnOpen = deserializeFunction((_d = data.wsOnOpen) === null || _d === void 0 ? void 0 : _d.toString());
+  data.checkStatus = deserializeFunction((_e = data.checkStatus) === null || _e === void 0 ? void 0 : _e.toString());
+  data.createSession = deserializeFunction((_f = data.createSession) === null || _f === void 0 ? void 0 : _f.toString());
+  return data;
+};
+const deserializeFunction = (data) => {
+  if (data) {
+    return new Function("return " + data)();
+  }
+  return undefined;
+};
+const GatacaAutoQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.gatacaLoginCompleted = createEvent(this, "gatacaLoginCompleted", 7);
+    this.gatacaLoginFailed = createEvent(this, "gatacaLoginFailed", 7);
+    this.configId = undefined;
+    this.configRepository = DEFAULT_REPOSITORY;
+    this.successCallback = undefined;
+    this.errorCallback = undefined;
+    this.checkStatus = undefined;
+    this.createSession = undefined;
+    this.wsOnOpen = undefined;
+    this.wsOnMessage = undefined;
+    this.config = undefined;
+    this.loading = undefined;
+    this.loading = true;
+    fetch(this.configRepository + "/" + this.configId, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => {
+      response
+        .json()
+        .then((data) => {
+        data = fixFunctions(data);
+        this.config = data;
+        this.loading = false;
+      })
+        .catch((err) => {
+        console.log("Cannot retrieve selected config", err);
+        this.loading = false;
+      });
+    })
+      .catch((err) => {
+      console.log("Cannot retrieve selected config", err);
+      this.loading = false;
+    });
+  }
+  /**
+   * Retrieve manually the session data on a successful login
+   */
+  async getSessionData() {
+    return this.qr.getSessionData();
+  }
+  selectQR() {
+    if (this.config.useButton) {
+      if (this.config.useWs) {
+        this.qr = (h("gataca-ssibuttonws", { buttonText: this.config.buttonText, wsOnMessage: this.wsOnMessage || this.config.wsOnMessage, wsOnOpen: this.wsOnOpen || this.config.wsOnOpen, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, socketEndpoint: this.config.socketEndpoint, autostart: true, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+      }
+      else {
+        this.qr = (h("gataca-ssibutton", { buttonText: this.config.buttonText, checkStatus: this.checkStatus || this.config.checkStatus, createSession: this.createSession || this.config.createSession, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, pollingFrequency: this.config.pollingFrequency, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+      }
+    }
+    else {
+      if (this.config.useWs) {
+        this.qr = (h("gataca-qrws", { wsOnMessage: this.wsOnMessage || this.config.wsOnMessage, wsOnOpen: this.wsOnOpen || this.config.wsOnOpen, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, socketEndpoint: this.config.socketEndpoint, autostart: this.config.autostart, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+      }
+      else {
+        this.qr = (h("gataca-qr", { checkStatus: this.checkStatus || this.config.checkStatus, createSession: this.createSession || this.config.createSession, successCallback: this.successCallback || this.config.successCallback, errorCallback: this.errorCallback || this.config.errorCallback, qrRole: this.config.qrRole, callbackServer: this.config.callbackServer, sessionTimeout: this.config.sessionTimeout, pollingFrequency: this.config.pollingFrequency, autostart: this.config.autostart, autorefresh: this.config.autorefresh, v: this.config.v, qrModalTitle: this.config.qrModalTitle, qrModalDescription: this.config.qrModalDescription, hideBrandTitle: this.config.hideBrandTitle, dynamicLink: this.config.dynamicLink }));
+      }
+    }
+  }
+  render() {
+    if (this.loading) {
+      //TODO: Improve loading message
+      return h("div", null, "Loading...");
+    }
+    if (this.config) {
+      this.selectQR();
+      return this.qr;
+    }
+    //TODO: Improve error message
+    return h("div", null, "Error loading your config...");
+  }
+  static get style() { return gatacaAutoqrCss; }
+}, [1, "gataca-autoqr", {
+    "configId": [1, "config-id"],
+    "configRepository": [1, "config-repository"],
+    "successCallback": [16],
+    "errorCallback": [16],
+    "checkStatus": [16],
+    "createSession": [16],
+    "wsOnOpen": [16],
+    "wsOnMessage": [16],
+    "config": [32],
+    "loading": [32],
+    "getSessionData": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gataca-autoqr", "gataca-qr", "gataca-qrdisplay", "gataca-qrws", "gataca-ssibutton", "gataca-ssibuttonws"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gataca-autoqr":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GatacaAutoQR);
+      }
+      break;
+    case "gataca-qr":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gataca-qrdisplay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gataca-qrws":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gataca-ssibutton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gataca-ssibuttonws":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GatacaAutoqr = GatacaAutoQR;
+const defineCustomElement = defineCustomElement$1;
+
+export { GatacaAutoqr, defineCustomElement };

package/dist/components/gataca-qr.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GatacaQr extends Components.GatacaQr, HTMLElement {}
+export const GatacaQr: {
+  prototype: GatacaQr;
+  new (): GatacaQr;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gataca-qr.js

@@ -0,0 +1,6 @@
+import { G as GatacaQR, d as defineCustomElement$1 } from './gataca-qr2.js';
+
+const GatacaQr = GatacaQR;
+const defineCustomElement = defineCustomElement$1;
+
+export { GatacaQr, defineCustomElement };

package/dist/components/gataca-qr2.js

@@ -0,0 +1,309 @@
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { l as logoGatacaSvg, d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
+import { g as gatIconCheckSvg, a as gatIconRefreshSvg, d as gatIconAlertSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './gat-icon-alert.js';
+
+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: gatIconCheckSvg, height: 52, width: 52 }),
+    h("p", { class: "successMsg" }, successLoginLabel)));
+};
+
+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: gatIconRefreshSvg, 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: gatIconAlertSvg, height: 24, width: 24 }),
+        h("p", null, errorMessage)))),
+    h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
+};
+
+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" }))));
+};
+
+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))));
+};
+
+const QR = (props) => {
+  const { value, useLogo, logoSrc, size } = props;
+  return (h("gataca-qrdisplay", { qrData: value, rounded: true, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc }));
+};
+
+const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:12px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>img{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background:transparent;border-radius:2px}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{background:#4745B7}100%{background:#CCCBF8}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
+
+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.callbackServer = undefined; this.autostart = true; this.autorefresh = false; this.v = "3"; this.qrModalTitle = "Quick Access"; this.modalTitleColor = "#4745B7"; this.qrModalDescription = "Sign up or sign in by scanning the QR Code with the Gataca Wallet"; this.hideModalTexts = false; this.hideModalBoxShadow = false; this.hideBrandTitle = false; this.logoSize = 0; this.logoSrc = logoGatacaSvg; this.qrSize = 300; this.modalWidth = 300; this.modalHeight = undefined; this.qrCodeExpiredLabel = "QR Code expired"; this.credentialsNotValidatedLabel = "User credentials not validated"; this.clickInsideBoxLabel = "Click inside the box to"; this.refreshQrLabel = "Refresh QR Code"; this.scanQrLabel = "Scan QR Code"; this.userNotScanInTimeErrorLabel = "User did not scan the QR in the allowed time"; this.credsNotValidatedErrorLabel = "Provided user credentials couldn't be validated"; this.failedLoginErrorLabel = "No successful login"; this.successLoginLabel = "Successful Connection!"; this.byBrandLabel = "by Gataca"; this.waitingStartSessionLabel = "waiting to start a session"; this.readQrTitle = "Processing..."; this.readQrDescription = "Please wait a moment"; this.hideQrModalDescription = false; this.sessionTimeout = DEFAULT_SESSION_TIMEOUT; this.pollingFrequency = DEFAULT_POLLING_FREQ; this.dynamicLink = true; this.sessionId = undefined; this.authenticationRequest = undefined; this.sessionData = undefined; this.result = RESULT_STATUS.NOT_STARTED; }
+  disconnectedCallback() {
+    this.stop();
+  }
+  async componentDidLoad() {
+    if (this.autostart) {
+      await this.display();
+    }
+  }
+  /**
+   * Force manually the display of a QR
+   */
+  async display() {
+    await this.getSessionId();
+    this.result = RESULT_STATUS.ONGOING;
+    this.poll()
+      .then((data) => {
+      this.result = RESULT_STATUS.SUCCESS;
+      this.sessionData = data;
+      this.gatacaLoginCompleted.emit(data);
+      this.successCallback(data);
+    })
+      .catch((err) => {
+      this.clean();
+      let expired = err === RESULT_STATUS.EXPIRED;
+      if (expired && this.autorefresh) {
+        this.display();
+      }
+      else {
+        if (err !== RESULT_STATUS.NOT_STARTED) {
+          let error = expired
+            ? new Error(this.userNotScanInTimeErrorLabel)
+            : new Error(this.credsNotValidatedErrorLabel);
+          this.result = err;
+          this.gatacaLoginFailed.emit(error);
+          this.errorCallback(error);
+        }
+      }
+    });
+    if (checkMobile() && this.dynamicLink) {
+      window.location.href = this.getLink();
+    }
+  }
+  /**
+   * Stop manually an ongoing session
+   */
+  async stop() {
+    this.clean();
+    if (this.result === RESULT_STATUS.ONGOING || RESULT_STATUS.READ) {
+      this.result = RESULT_STATUS.NOT_STARTED;
+    }
+  }
+  clean() {
+    this.sessionData = undefined;
+    this.sessionId = undefined;
+  }
+  /**
+   * Retrieve manually the session data on a successful login
+   */
+  async getSessionData() {
+    return this.sessionData
+      ? Promise.resolve(this.sessionData)
+      : Promise.reject(new Error(this.failedLoginErrorLabel));
+  }
+  async getSessionId() {
+    if (this.sessionId) {
+      return this.sessionId;
+    }
+    let { sessionId, authenticationRequest } = await this.createSession();
+    this.sessionId = sessionId;
+    this.authenticationRequest = authenticationRequest;
+    return this.sessionId;
+  }
+  getLink() {
+    if (this.v === "2") {
+      return this.authenticationRequest;
+    }
+    const authRequestEncoded = "?dl=" + base64UrlEncode(this.authenticationRequest);
+    return DEEP_LINK_PREFIX + authRequestEncoded;
+  }
+  async poll() {
+    let endTime = new Date().getTime() +
+      (this.sessionTimeout || DEFAULT_SESSION_TIMEOUT) * 1000;
+    let interval = (this.pollingFrequency || DEFAULT_POLLING_FREQ) * 1000;
+    let checkFunc = async (component) => {
+      if (component.result === RESULT_STATUS.NOT_STARTED) {
+        return { result: RESULT_STATUS.NOT_STARTED };
+      }
+      let id = await component.getSessionId();
+      return component.checkStatus(id);
+    };
+    let component = this;
+    let checkCondition = async function (resolve, reject) {
+      // If the condition is met, we're done!
+      let { result, data } = await checkFunc(component);
+      switch (result) {
+        case RESULT_STATUS.SUCCESS:
+          resolve(data);
+          break;
+        case RESULT_STATUS.READ:
+          component.result = RESULT_STATUS.READ;
+        case RESULT_STATUS.ONGOING:
+          if (component.sessionTimeout > 0 && new Date().getTime() < endTime) {
+            setTimeout(checkCondition, interval, resolve, reject);
+          }
+          else {
+            reject(RESULT_STATUS.EXPIRED);
+          }
+          break;
+        default:
+          reject(result);
+          break;
+      }
+    };
+    return new Promise(checkCondition);
+  }
+  renderQRSection() {
+    switch (this.result) {
+      case RESULT_STATUS.NOT_STARTED:
+        return this.renderRetryButton();
+      case RESULT_STATUS.ONGOING:
+        return this.renderQR(this.getLink(), true);
+      case RESULT_STATUS.EXPIRED:
+        return this.renderRetryButton(this.qrCodeExpiredLabel);
+      case RESULT_STATUS.FAILED:
+        return this.renderRetryButton(this.credentialsNotValidatedLabel);
+      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,
+        });
+    }
+  }
+  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) }));
+  }
+  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 }));
+  }
+  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 }));
+  }
+  renderRetryQR(value, useLogo) {
+    return (h(QR, { value: value, useLogo: useLogo, size: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc }));
+  }
+  render() {
+    var _a, _b;
+    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
+          ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + "px"
+          : "",
+      }, onClick: (event) => {
+        event.stopPropagation();
+      } }, 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: logoGatacaSvg })))), 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"
+          : "",
+      } }, this.renderQRSection())))));
+  }
+  static get style() { return gatacaQrCss; }
+}, [1, "gataca-qr", {
+    "checkStatus": [16],
+    "createSession": [16],
+    "successCallback": [16],
+    "errorCallback": [16],
+    "qrRole": [1, "qr-role"],
+    "callbackServer": [1, "callback-server"],
+    "autostart": [4],
+    "autorefresh": [4],
+    "v": [1],
+    "qrModalTitle": [1, "qr-modal-title"],
+    "modalTitleColor": [1, "modal-title-color"],
+    "qrModalDescription": [1, "qr-modal-description"],
+    "hideModalTexts": [4, "hide-modal-texts"],
+    "hideModalBoxShadow": [4, "hide-modal-box-shadow"],
+    "hideBrandTitle": [4, "hide-brand-title"],
+    "logoSize": [2, "logo-size"],
+    "logoSrc": [1, "logo-src"],
+    "qrSize": [2, "qr-size"],
+    "modalWidth": [2, "modal-width"],
+    "modalHeight": [2, "modal-height"],
+    "qrCodeExpiredLabel": [1, "qr-code-expired-label"],
+    "credentialsNotValidatedLabel": [1, "credentials-not-validated-label"],
+    "clickInsideBoxLabel": [1, "click-inside-box-label"],
+    "refreshQrLabel": [1, "refresh-qr-label"],
+    "scanQrLabel": [1, "scan-qr-label"],
+    "userNotScanInTimeErrorLabel": [1, "user-not-scan-in-time-error-label"],
+    "credsNotValidatedErrorLabel": [1, "creds-not-validated-error-label"],
+    "failedLoginErrorLabel": [1, "failed-login-error-label"],
+    "successLoginLabel": [1, "success-login-label"],
+    "byBrandLabel": [1, "by-brand-label"],
+    "waitingStartSessionLabel": [1, "waiting-start-session-label"],
+    "readQrTitle": [1, "read-qr-title"],
+    "readQrDescription": [1, "read-qr-description"],
+    "hideQrModalDescription": [4, "hide-qr-modal-description"],
+    "sessionTimeout": [2, "session-timeout"],
+    "pollingFrequency": [2, "polling-frequency"],
+    "dynamicLink": [4, "dynamic-link"],
+    "sessionId": [32],
+    "authenticationRequest": [32],
+    "sessionData": [32],
+    "result": [32],
+    "display": [64],
+    "stop": [64],
+    "getSessionData": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gataca-qr", "gataca-qrdisplay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gataca-qr":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GatacaQR);
+      }
+      break;
+    case "gataca-qrdisplay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GatacaQR as G, defineCustomElement as d };

package/dist/components/gataca-qrdisplay.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GatacaQrdisplay extends Components.GatacaQrdisplay, HTMLElement {}
+export const GatacaQrdisplay: {
+  prototype: GatacaQrdisplay;
+  new (): GatacaQrdisplay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gataca-qrdisplay.js

@@ -0,0 +1,6 @@
+import { G as GatacaQRDisplay, d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
+
+const GatacaQrdisplay = GatacaQRDisplay;
+const defineCustomElement = defineCustomElement$1;
+
+export { GatacaQrdisplay, defineCustomElement };