@ekyc_qoobiss/qbs-ect-cmp 3.6.27 → 3.6.28

package/dist/{qbs-ect-cmp/capture-error.entry.js → collection/components/common/capture-error/capture-error.js}

@@ -1,15 +1,9 @@
-import { r as registerInstance, e as createEvent, h } from './index-78a05b9e.js';
-import { d as delay } from './utils-8225f0b7.js';
-import { B as BaseComponent, F as FlowSteps, a as FlowMoments } from './base-component-2e490fd9.js';
-import './textValues-6bcc85dd.js';
-import './IDevice-15ecfdeb.js';
-
-const captureErrorCss = "";
-
-const CaptureError = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventCaptureErrorDone = createEvent(this, "captureErrorDone", 7);
+import { h } from '@stencil/core';
+import { delay } from '../../../utils/utils';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
+export class CaptureError {
+  constructor() {
     this.type = undefined;
     this.buttonEnabled = undefined;
     this.buttonText = undefined;
@@ -47,7 +41,60 @@ const CaptureError = class {
   render() {
     return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.titleR1), h("h1", { class: "color-red" }, this.titleR2), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR1), h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR2)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
   }
-};
-CaptureError.style = captureErrorCss;
-
-export { CaptureError as capture_error };
+  static get is() { return "capture-error"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["capture-error.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["capture-error.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "buttonEnabled": {},
+      "buttonText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventCaptureErrorDone",
+        "name": "captureErrorDone",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,121 @@
+import { h } from '@stencil/core';
+import store from '../../../helpers/store';
+import { FlowStatus } from '../../../models/FlowStatus';
+import { BaseComponent } from '../../base-component';
+import { FlowSteps } from '../../../models/FlowSteps';
+export class HowToInfo {
+  constructor() { this.idSide = undefined; this.topTitle = undefined; this.subTitle = undefined; this.imagePath = undefined; this.buttonText = undefined; this.buttonEnabled = undefined; }
+  async componentDidLoad() {
+    await this.baseComponent.initialize();
+  }
+  async disconnectedCallback() {
+    await this.baseComponent.finalize();
+  }
+  buttonClick() {
+    this.buttonEnabled = false;
+    this.eventHowToInfoDone.emit();
+  }
+  componentWillLoad() {
+    this.subTitle = '';
+    this.buttonEnabled = true;
+    if (store.flowStatus == FlowStatus.ID) {
+      this.topTitle = this.baseComponent.translations.HowToValues.IdTitile;
+      this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
+      this.buttonText = this.baseComponent.translations.HowToValues.IdButton;
+      if (this.idSide == 'front') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
+        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileFace;
+      }
+      if (this.idSide == 'back') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
+        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileBack;
+      }
+    }
+    if (store.flowStatus == FlowStatus.LIVENESS) {
+      this.baseComponent = new BaseComponent(FlowSteps.SelfieHowTo);
+      this.topTitle = this.baseComponent.translations.HowToValues.SelfieTitile;
+      this.subTitle = this.baseComponent.translations.HowToValues.SelfieSubTitile;
+      this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_selfie.png';
+      this.buttonText = this.baseComponent.translations.HowToValues.SelfieButton;
+    }
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
+  }
+  render() {
+    let sub = this.subTitle != '' ? h("p", { class: "font-size-2" }, this.subTitle) : null;
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "div-ci align-center" }, h("img", { src: this.imagePath })), h("div", { class: "text-center" }, h("h1", null, this.topTitle), sub), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.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": {},
+      "imagePath": {},
+      "buttonText": {},
+      "buttonEnabled": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventHowToInfoDone",
+        "name": "howToInfoDone",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/common/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;
+  }
+} */

package/dist/{qbs-ect-cmp/id-back-capture.entry.js → collection/components/common/id-back-capture/id-back-capture.js}

@@ -1,22 +1,19 @@
-import { r as registerInstance, e as createEvent, h, i as getElement } from './index-78a05b9e.js';
-import { C as Cameras } from './Cameras-dfbebc29.js';
-import { S as Stream, V as VerificationMode, I as IDML5Detector, F as FaceML5Detector } from './Stream-b867a2be.js';
-import { I as IDPose } from './IDPose-181bcb25.js';
-import { d as delay } from './utils-8225f0b7.js';
-import { I as IdCaptureValues, s as state } from './textValues-6bcc85dd.js';
-import { B as BaseComponent, F as FlowSteps, a as FlowMoments } from './base-component-2e490fd9.js';
-import './IDevice-15ecfdeb.js';
-import './ML5-657ef934.js';
-import './_commonjsHelpers-321aa363.js';
-
-const idBackCaptureCss = ".logo{max-height:450px;max-width:450px}.canvas-on-video{max-width:100%;max-height:100%;position:absolute;z-index:2;transform:scale(-1, 1)}";
-
-const IdBackCapture = class {
+import { h } from '@stencil/core';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+import { IDPose } from '../../../libs/IDML5Detector/IDPose';
+import { delay } from '../../../utils/utils';
+import store from '../../../helpers/store';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
+import { VerificationMode } from '../../../models/IVerificationMode';
+import { IdCaptureValues } from '../../../helpers/textValues';
+// import { IDPose } from '../../libs/IDML5Detector/IDPose';
+export class IdBackCapture {
   // @State() private animationPath: string;
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoIdBackCapture", 7);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
+  constructor() {
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -58,7 +55,7 @@ const IdBackCapture = class {
     this.openCamera();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints(state.cameraId, state.device);
+    const constraints = this.cameras.GetConstraints(store.cameraId, store.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -114,8 +111,81 @@ const IdBackCapture = class {
     let bgDemo = this.verified ? 'container' : 'container bg-black';
     return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
   }
-  get component() { return getElement(this); }
-};
-IdBackCapture.style = idBackCaptureCss;
-
-export { IdBackCapture as id_back_capture };
+  static get is() { return "id-back-capture"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["id-back-capture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["id-back-capture.css"]
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "cameraSize": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "showDemo": {},
+      "demoVideo": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoIdBackCapture",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "component"; }
+  static get listeners() {
+    return [{
+        "name": "videoStarted",
+        "method": "eventVideoStarted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "verificationFinished",
+        "method": "verificationFinished",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "takePhoto",
+        "method": "takePhoto",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/common/id-capture/id-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;
+  }
+} */

package/dist/{qbs-ect-cmp/id-capture.entry.js → collection/components/common/id-capture/id-capture.js}

@@ -1,22 +1,19 @@
-import { r as registerInstance, e as createEvent, h, i as getElement } from './index-78a05b9e.js';
-import { C as Cameras } from './Cameras-dfbebc29.js';
-import { S as Stream, V as VerificationMode, I as IDML5Detector, F as FaceML5Detector } from './Stream-b867a2be.js';
-import { I as IdCaptureValues, s as state } from './textValues-6bcc85dd.js';
-import { I as IDPose } from './IDPose-181bcb25.js';
-import { d as delay } from './utils-8225f0b7.js';
-import { B as BaseComponent, F as FlowSteps, a as FlowMoments } from './base-component-2e490fd9.js';
-import './IDevice-15ecfdeb.js';
-import './ML5-657ef934.js';
-import './_commonjsHelpers-321aa363.js';
-
-const idCaptureCss = ".logo{max-height:450px;max-width:450px}.canvas-on-video{max-width:100%;max-height:100%;position:absolute;z-index:2;transform:scale(-1, 1)}";
-
-const IdCapture = class {
+import { h } from '@stencil/core';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { IdCaptureValues } from '../../../helpers/textValues';
+import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+import { IDPose } from '../../../libs/IDML5Detector/IDPose';
+import { delay } from '../../../utils/utils';
+import store from '../../../helpers/store';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
+import { VerificationMode } from '../../../models/IVerificationMode';
+// import { IDPose } from '../../libs/IDML5Detector/IDPose';
+export class IdCapture {
   // @State() private animationPath: string;
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoIdCapture", 7);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
+  constructor() {
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -54,7 +51,7 @@ const IdCapture = class {
     this.openCamera();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints(state.cameraId, state.device);
+    const constraints = this.cameras.GetConstraints(store.cameraId, store.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -115,8 +112,81 @@ const IdCapture = class {
     let bgDemo = this.verified ? 'container' : 'container bg-black';
     return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
   }
-  get component() { return getElement(this); }
-};
-IdCapture.style = idCaptureCss;
-
-export { IdCapture as id_capture };
+  static get is() { return "id-capture"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["id-capture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["id-capture.css"]
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "cameraSize": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "showDemo": {},
+      "demoVideo": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoIdCapture",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "component"; }
+  static get listeners() {
+    return [{
+        "name": "videoStarted",
+        "method": "eventVideoStarted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "takePhoto",
+        "method": "takePhoto",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "verificationFinished",
+        "method": "verificationFinished",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/common/id-tilt/id-tilt.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;
+  }
+} */