@ekyc_qoobiss/qbs-ect-cmp 1.2.0

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

@@ -0,0 +1,47 @@
+.camera {
+  width: 100%;
+  height: 100%;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.cameraCanvas,
+.cameraCanvasSelfie,
+.cameraCanvasSelfieDesk {
+  z-index: 3;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 10px;
+}
+
+.cameraCanvasSelfie,
+.cameraCanvasSelfieDesk {
+  transform: scale(-1, 1);
+  -webkit-transform: scale(-1, 1);
+}
+
+.cameraVideo,
+.cameraVideoSelfie,
+.cameraVideoSelfieDesk {
+  z-index: 2;
+  position: absolute;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 10px;
+}
+
+.cameraVideoSelfie,
+.cameraVideoSelfieDesk {
+  transform: scale(-1, 1);
+  -webkit-transform: scale(-1, 1);
+}
+
+.cameraMobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: black;
+}

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

@@ -0,0 +1,309 @@
+import { Stream } from '../../../helpers/Stream';
+import { h } from '@stencil/core';
+// import { PipelineResult } from '../../../libs/FaceDetector/PipelineResult';
+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.callbackVideoStarted = () => {
+      this.eventVideoStarted.emit(this.component.getBoundingClientRect());
+    };
+    this.callbackVerificationFinished = () => {
+      this.verificationFinished.emit();
+    };
+    this.modelPath = undefined;
+    this.device = undefined;
+    this.probabilityThreshold = undefined;
+    this.captureMode = undefined;
+  }
+  componentDidLoad() {
+    this.startStream();
+  }
+  render() {
+    let cameraVideoClass = 'cameraVideo';
+    let cameraCanvasClass = 'cameraCanvas';
+    if (this.device.isWin) {
+      cameraVideoClass = 'cameraVideoSelfieDesk';
+      cameraCanvasClass = 'cameraCanvasSelfieDesk';
+    }
+    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.setCallbackVideoStarted(this.callbackVideoStarted);
+    stream.setCallbackTimeElapsed(this.callbackTimeElapsed);
+    stream.setVerificationFinished(this.callbackVerificationFinished);
+  }
+  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": "verificationFinished",
+        "name": "verificationFinished",
+        "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, #1FEAA6 90%, rgba(0, 0, 0, 0)), radial-gradient(closest-side, #1FEAA6 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, #1FEAA6 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/flow/agreement-info/agreement-info.js

@@ -0,0 +1,73 @@
+import { h } from '@stencil/core';
+import store from '../../../helpers/store';
+import { AgreementInfoValues } from '../../../helpers/textValues';
+import { FlowStatus } from '../../../models/FlowStatus';
+export class AgreementInfo {
+  constructor() {
+    this.agreementsChecked = undefined;
+    this.termsChecked = undefined;
+    this.openAgreements = undefined;
+    this.openTerms = undefined;
+    this.agreementsChecked = false;
+    this.termsChecked = false;
+  }
+  componentWillLoad() {
+    this.openAgreements = false;
+    this.openTerms = false;
+  }
+  buttonClick() {
+    if (this.agreementsChecked && this.termsChecked) {
+      store.flowStatus = FlowStatus.PHONE;
+    }
+  }
+  agreementAcceptanceEmitted(data) {
+    if (data.detail.agreementType == 'agreement') {
+      this.agreementsChecked = data.detail.result;
+      this.openAgreements = false;
+    }
+    if (data.detail.agreementType == 'terms') {
+      this.termsChecked = data.detail.result;
+      this.openTerms = false;
+    }
+  }
+  agreementsClicked() {
+    this.openAgreements = true;
+  }
+  termsClicked() {
+    this.openTerms = true;
+  }
+  render() {
+    let agreementsCheck = h("agreement-check", { agreementType: "agreement" });
+    let termsCheck = h("agreement-check", { agreementType: "terms" });
+    let mainComp = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, AgreementInfoValues.Title), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), AgreementInfoValues.Agreement)), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), AgreementInfoValues.Terms))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, AgreementInfoValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, AgreementInfoValues.FooterText))))));
+    return this.openAgreements ? agreementsCheck : this.openTerms ? termsCheck : mainComp;
+  }
+  static get is() { return "agreement-info"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["agreement-info.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["agreement-info.css"]
+    };
+  }
+  static get states() {
+    return {
+      "agreementsChecked": {},
+      "termsChecked": {},
+      "openAgreements": {},
+      "openTerms": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "agreementAcceptance",
+        "method": "agreementAcceptanceEmitted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/flow/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/flow/end-redirect/end-redirect.js

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+import { CompleteValues } from '../../../helpers/textValues';
+// @ts-ignore
+import completeImg from '../../../assets/complete.svg';
+import store from '../../../helpers/store';
+import Events from '../../../helpers/Events';
+export class EndRedirect {
+  componentDidLoad() {
+    Events.init(window);
+    Events.flowCompleted();
+  }
+  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", { class: "text-center" }, 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"]
+    };
+  }
+}