@ekyc_qoobiss/qbs-ect-cmp 1.5.11

package/dist/collection/components/controls/camera/camera.js

@@ -0,0 +1,306 @@
+import { Stream } from '../../../helpers/Stream';
+import { h } from '@stencil/core';
+// import { PipelineResult } from '../../../libs/FaceDetector/PipelineResult';
+// import Events from '../../../helpers/Events';
+export class Camera {
+  constructor() {
+    this.callbackErrors = (error, isError) => {
+      if (isError) {
+        this.errorCameraEvent.emit(error);
+        this.eventCloseCamera.emit();
+      }
+      else {
+        this.errorCameraEvent.emit(error);
+      }
+    };
+    this.callbackAutoCapturing = () => {
+      this.eventTakePhoto.emit();
+    };
+    // callbackFaceDetectionErrors = (e: PipelineResult) => {
+    //   Events.detectionError(e);
+    // };
+    this.callbackSelfieRecordingReady = (recording) => {
+      this.eventRecordingSelfieReady.emit(recording);
+    };
+    this.callbackIdRecordingReady = (recording) => {
+      this.eventRecordingIdReady.emit(recording);
+    };
+    this.callbackTimeElapsed = () => {
+      this.eventTimeElapsed.emit();
+    };
+    this.callbackChangeTitle = (message) => {
+      this.eventChangeTitle.emit(message);
+    };
+    this.callbackStopAnimation = () => {
+      this.eventStopAnimation.emit();
+    };
+    this.callbackVideoStarted = () => {
+      this.eventVideoStarted.emit(this.component.getBoundingClientRect());
+    };
+    this.modelPath = undefined;
+    this.device = undefined;
+    this.probabilityThreshold = undefined;
+    this.captureMode = undefined;
+  }
+  componentDidLoad() {
+    this.startStream();
+  }
+  render() {
+    let cameraVideoClass = 'cameraVideo';
+    let cameraCanvasClass = 'cameraCanvas';
+    if (this.captureMode == 'selfie') {
+      cameraVideoClass = 'cameraVideoSelfie';
+      cameraCanvasClass = 'cameraCanvasSelfie';
+    }
+    return (h("div", { class: "camera" }, h("video", { id: "video", loop: true, autoplay: true, playsinline: true, muted: true, class: cameraVideoClass, ref: el => (this.cameraVideo = el) }), h("canvas", { id: "output", class: cameraCanvasClass, ref: el => (this.cameraCanvas = el) })));
+  }
+  startStream() {
+    if (!Stream.instance)
+      Stream.getInstance(this.device, this.modelPath);
+    const stream = Stream.getInstance();
+    stream.updateHtmlElements(this.cameraVideo, this.cameraCanvas, this.component);
+    if (this.captureMode == 'selfie') {
+      stream.setFaceDetection(true);
+      stream.setCallbackRecordingReady(this.callbackSelfieRecordingReady);
+      // stream.setShowMask(true);
+      // stream.setProbabilityThreshold(this.probabilityThreshold);
+      // stream.setCallbackFaceDetectionErrors(this.callbackFaceDetectionErrors);
+    }
+    else {
+      stream.setIdDetection(true);
+      stream.setCallbackRecordingReady(this.callbackIdRecordingReady);
+      // stream.setShowMask(false);
+    }
+    stream.setCallbackErrors(this.callbackErrors);
+    stream.setCallbackAutoCapturing(this.callbackAutoCapturing);
+    stream.setCallbackChangeTitle(this.callbackChangeTitle);
+    stream.setCallbackStopAnimation(this.callbackStopAnimation);
+    stream.setCallbackVideoStarted(this.callbackVideoStarted);
+    stream.setCallbackTimeElapsed(this.callbackTimeElapsed);
+  }
+  static get is() { return "camera-comp"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["camera.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["camera.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modelPath": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "model-path",
+        "reflect": false
+      },
+      "device": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Device",
+          "resolved": "Device",
+          "references": {
+            "Device": {
+              "location": "import",
+              "path": "../../../models/IDevice"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "probabilityThreshold": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "probability-threshold",
+        "reflect": false
+      },
+      "captureMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "capture-mode",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventVideoStarted",
+        "name": "videoStarted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "eventCloseCamera",
+        "name": "closeCamera",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "errorCameraEvent",
+        "name": "errorCamera",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "eventTakePhoto",
+        "name": "takePhoto",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "eventRecordingSelfieReady",
+        "name": "recordingSelfieCapture",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "eventRecordingIdReady",
+        "name": "recordingIdCapture",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "eventTimeElapsed",
+        "name": "timeElapsed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "eventChangeTitle",
+        "name": "changeTitle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "eventStopAnimation",
+        "name": "stopAnimation",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "component"; }
+}

package/dist/collection/components/controls/loader-dots/loader-dots.css

@@ -0,0 +1,61 @@
+i,
+i::before,
+i::after {
+  animation-duration: 0.5s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+i {
+  width: 300px;
+  height: 75px;
+  margin: auto;
+  display: block;
+  background: no-repeat;
+  background-image: radial-gradient(closest-side, #47b6a2 90%, rgba(0, 0, 0, 0)), radial-gradient(closest-side, #47b6a2 90%, rgba(0, 0, 0, 0));
+  background-size: 75px 75px;
+  background-position: 0%, 50%;
+  position: relative;
+  transform: translateZ(0) scale(0.25);
+  animation-name: slide;
+}
+i::before,
+i::after {
+  content: '';
+  width: 75px;
+  height: 75px;
+  background: radial-gradient(closest-side, #47b6a2 90%, rgba(0, 0, 0, 0));
+  position: absolute;
+  top: 50%;
+  margin-top: -37.5px;
+  animation-name: reveal;
+}
+i::before {
+  left: 1%;
+  animation-delay: 40ms;
+}
+i::after {
+  right: 1%;
+  animation-direction: reverse;
+}
+
+@keyframes slide {
+  from {
+    background-position: 0%, 50%;
+  }
+  to {
+    background-position: 50%, 100%;
+  }
+}
+@keyframes reveal {
+  from {
+    transform: scale(0.001);
+  }
+  to {
+    transform: scale(1);
+  }
+}

package/dist/collection/components/controls/loader-dots/loader-dots.js

@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+export class LoaderDots {
+  render() {
+    return h("i", null);
+  }
+  static get is() { return "loader-dots"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["loader-dots.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["loader-dots.css"]
+    };
+  }
+}

package/dist/collection/components/end-redirect/end-redirect.css

@@ -0,0 +1,128 @@
+h1 {
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: 900;
+  font-size: 4vh;
+  line-height: 4vh;
+  letter-spacing: 0.01em;
+  color: #1f2024;
+}
+
+p {
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 2vh;
+  line-height: 3vh;
+  color: #1f2024;
+  text-align: justify;
+}
+
+.container {
+  gap: 10rem;
+  text-align: center;
+}
+
+.greet {
+  color: rgb(73, 78, 79);
+  visibility: hidden;
+  animation-name: rise;
+  animation-delay: 1s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes rise {
+  0% {
+    visibility: hidden;
+  }
+
+  50% {
+    visibility: visible;
+  }
+
+  100% {
+    visibility: visible;
+  }
+}
+
+.container-coin {
+  background-color: transparent;
+  perspective: 1000px;
+  rotate: 120deg 0deg;
+}
+
+.coin-flip {
+  animation: flip 0.4s ease-in;
+  animation-delay: 0.5s;
+  transform-style: preserve-3d;
+  animation-fill-mode: forwards;
+  visibility: hidden;
+}
+
+.coin-scale {
+  animation: show 0.4s ease-in;
+  animation-delay: 0.5s;
+  transform-style: preserve-3d;
+  animation-fill-mode: forwards;
+}
+
+.coin {
+  margin-top: 10rem;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateX(140deg);
+    visibility: visible;
+  }
+
+  25% {
+    transform: rotateX(120deg);
+    visibility: visible;
+  }
+
+  50% {
+    transform: rotateX(90deg);
+    visibility: visible;
+  }
+
+  75% {
+    transform: rotateX(75deg);
+    visibility: visible;
+  }
+
+  100% {
+    transform: rotateX(0deg);
+    visibility: visible;
+  }
+}
+
+@keyframes show {
+  0% {
+    transform: scale(0);
+  }
+
+  25% {
+    transform: scale(0.2);
+  }
+
+  40% {
+    transform: scale(0.4);
+  }
+
+  50% {
+    transform: scale(0.5);
+  }
+
+  60% {
+    transform: scale(0.6);
+  }
+
+  70% {
+    transform: scale(0.7);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/dist/collection/components/end-redirect/end-redirect.js

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core';
+import { CompleteValues, SessionKeys } from '../../helpers/textValues';
+// @ts-ignore
+import completeImg from '../../assets/complete.svg';
+import store from '../../helpers/store';
+export class EndRedirect {
+  componentDidLoad() {
+    sessionStorage.removeItem(SessionKeys.RequestIdKey);
+    sessionStorage.removeItem(SessionKeys.FlowStatusKey);
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, CompleteValues.Title), h("p", { class: "main-text font-size-18 mt-8 text-center" }, CompleteValues.Description)), h("div", { class: "buletin-container" }, h("div", { class: "container-coin" }, h("div", { class: "coin-scale" }, h("div", { class: "coin-flip" }, h("img", { class: "w-40 coin", src: completeImg }))))), h("div", null, h("p", { class: "font-weight-900 font-size-3 color-black-2 text-center mt-20" }, CompleteValues.Message), h("p", null, store.requestId)), h("div", { class: "btn-buletin" }, h("p", { class: "main-text font-size-18 text-center mb-0" }, CompleteValues.FooterText)))));
+  }
+  static get is() { return "end-redirect"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["end-redirect.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["end-redirect.css"]
+    };
+  }
+}

package/dist/collection/components/how-to-info/how-to-info.js

@@ -0,0 +1,105 @@
+import { h } from '@stencil/core';
+import { HowToValues } from '../../helpers/textValues';
+import store from '../../helpers/store';
+// @ts-ignore
+import idImg from '../../assets/howtos/idscan.svg';
+// @ts-ignore
+import livenessImg from '../../assets/howtos/liveness.svg';
+export class HowToInfo {
+  constructor() {
+    this.idSide = undefined;
+    this.topTitle = undefined;
+    this.subTitle = undefined;
+    this.descriptionR1 = undefined;
+    this.descriptionR2 = undefined;
+    this.descriptionR3 = undefined;
+    this.imagePath = undefined;
+    this.buttonText = undefined;
+  }
+  buttonClick() {
+    if (store.flowStatus == 'HOWTOID') {
+      if (this.idSide == '' || this.idSide == 'face') {
+        store.flowStatus = 'ID';
+      }
+      if (this.idSide == 'back') {
+        store.flowStatus = 'IDBACK';
+      }
+    }
+    if (store.flowStatus == 'HOWTOLIVENESS') {
+      store.flowStatus = 'LIVENESS';
+    }
+  }
+  componentWillLoad() {
+    this.subTitle = '';
+    if (store.flowStatus == 'HOWTOID') {
+      this.topTitle = HowToValues.IdTitile;
+      this.descriptionR1 = HowToValues.IdDescriptionR1;
+      this.descriptionR2 = HowToValues.IdDescriptionR2;
+      this.descriptionR3 = HowToValues.IdDescriptionR3;
+      this.imagePath = idImg;
+      this.buttonText = HowToValues.IdButton;
+      if (this.idSide == 'face') {
+        this.subTitle = HowToValues.IdSubTitileFace;
+      }
+      if (this.idSide == 'back') {
+        this.subTitle = HowToValues.IdSubTitileBack;
+      }
+    }
+    if (store.flowStatus == 'HOWTOLIVENESS') {
+      this.topTitle = HowToValues.SelfieTitile;
+      this.descriptionR1 = HowToValues.SelfieDescriptionR1;
+      this.descriptionR2 = HowToValues.SelfieDescriptionR2;
+      this.descriptionR3 = '';
+      this.imagePath = livenessImg;
+      this.buttonText = HowToValues.SelfieButton;
+    }
+  }
+  render() {
+    let details = store.flowStatus == 'HOWTOID' ? (h("ul", { class: "main-text font-size-2 pl-2-5" }, h("li", null, this.descriptionR1), h("li", null, this.descriptionR2), h("li", null, h("b", null, this.descriptionR3)))) : (h("ul", { class: "main-text font-size-2 pl-2-5" }, h("li", null, this.descriptionR1), h("li", null, this.descriptionR2)));
+    let sub = this.subTitle != '' ? h("p", null, this.subTitle) : null;
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", null, this.topTitle), sub, h("div", { class: "d-flex space-between align-center" }, details)), h("div", { class: "div-ci" }, h("img", { src: this.imagePath })), h("div", { class: "pos-relative" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, HowToValues.FooterText))))));
+  }
+  static get is() { return "how-to-info"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["how-to-info.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["how-to-info.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "idSide": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id-side",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "topTitle": {},
+      "subTitle": {},
+      "descriptionR1": {},
+      "descriptionR2": {},
+      "descriptionR3": {},
+      "imagePath": {},
+      "buttonText": {}
+    };
+  }
+}

package/dist/collection/components/id-back-capture/id-back-capture.css

@@ -0,0 +1,35 @@
+/* .cameraContainer {
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  position: relative;
+  overflow: hidden;
+} */
+
+.logo {
+  max-height: 450px;
+  max-width: 450px;
+}
+
+/* .block {
+  width: 90%;
+  padding-left: 5%;
+  padding-right: 5%;
+  margin-top: 5vh;
+} */
+
+.canvas-on-video {
+  max-width: 100%;
+  max-height: 100%;
+  position: absolute;
+  z-index: 2;
+  transform: scale(-1, 1);
+}
+/* 
+@media screen and (max-height: 414px) {
+  .logo {
+    background-size: 140px;
+    max-height: 140px;
+    max-width: 140px;
+  }
+} */