@ekyc_qoobiss/qbs-ect-cmp 3.6.27 → 3.6.29

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

@@ -1,22 +1,20 @@
-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 idTiltCss = ".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 IdTilt = 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 { Translations } from '../../../helpers/TranslationUtils';
+// import { IDPose } from '../../libs/IDML5Detector/IDPose';
+export class IdTilt {
   // @State() private animationPath: string;
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoTiltCapture", 7);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
+  constructor() {
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -39,7 +37,8 @@ const IdTilt = class {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.IDPoseMapping;
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.IdCaptureValues.IDPoseMapping;
     //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -49,12 +48,12 @@ const IdTilt = class {
     await this.baseComponent.logStep(FlowSteps.CiTilt, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
     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)
@@ -91,7 +90,7 @@ const IdTilt = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Loading;
+    this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
     this.showDemo = true;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
@@ -113,10 +112,83 @@ const IdTilt = class {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     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": "tilt" })))))), 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)))));
+    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": "tilt" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
-  get component() { return getElement(this); }
-};
-IdTilt.style = idTiltCss;
-
-export { IdTilt as id_tilt };
+  static get is() { return "id-tilt"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["id-tilt.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["id-tilt.css"]
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "cameraSize": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "showDemo": {},
+      "demoVideo": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoTiltCapture",
+        "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/random-actions/random-actions.js

@@ -0,0 +1,23 @@
+import { h } from '@stencil/core';
+import { Translations } from '../../../helpers/TranslationUtils';
+export class RandomActions {
+  constructor() { }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+  }
+  buttonClick() { }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.topTitle)), h("div", { class: "pos-relative show-bottom" }, 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" }, this.translations.GlobalValues.FooterText))))));
+  }
+  static get is() { return "random-actions"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["random-actions.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["random-actions.css"]
+    };
+  }
+}

package/dist/collection/components/common/selfie-capture/selfie-capture.css

@@ -0,0 +1,7 @@
+/* .cameraContainer {
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  position: relative;
+  overflow: hidden;
+} */

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

@@ -1,21 +1,18 @@
-import { r as registerInstance, e as createEvent, h, i as getElement } from './index-78a05b9e.js';
-import { C as Cameras } from './Cameras-dfbebc29.js';
-import { a as FacePose, S as Stream, V as VerificationMode, F as FaceML5Detector } from './Stream-b867a2be.js';
-import { a as SelfieCaptureValues, s as state } from './textValues-6bcc85dd.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 selfieCaptureCss = "";
-
-const SelfieCapture = class {
+import { h } from '@stencil/core';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { SelfieCaptureValues } from '../../../helpers/textValues';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
+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 { Translations } from '../../../helpers/TranslationUtils';
+export class SelfieCapture {
   // @State() private animationPath: string;
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoSelfieCapture", 7);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
+  constructor() {
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -43,8 +40,9 @@ const SelfieCapture = class {
     this.captureHeight = height - Math.round((window.screen.height - height) / 2);
     this.captureWidth = Math.round((this.captureHeight * 9) / 16);
   }
-  componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Title;
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.SelfieCaptureValues.Title;
     //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -54,12 +52,12 @@ const SelfieCapture = class {
     await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.demoEnded = true;
     this.openCamera();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints('', state.device, true);
+    const constraints = this.cameras.GetConstraints('', store.device, true);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -95,7 +93,7 @@ const SelfieCapture = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Loading;
+    this.titleMesage = this.translations.SelfieCaptureValues.Loading;
     this.closeCamera();
     this.demoEnded = false;
     this.demoVideo.src = this.uploadingLink;
@@ -104,7 +102,7 @@ const SelfieCapture = class {
   }
   render() {
     let cameraStyle;
-    if (state.device.isMobile && this.videoStarted) {
+    if (store.device.isMobile && this.videoStarted) {
       cameraStyle = {
         'width': this.captureWidth + 'px',
         'height': this.captureHeight + 'px',
@@ -117,10 +115,85 @@ const SelfieCapture = class {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), 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)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
-  get component() { return getElement(this); }
-};
-SelfieCapture.style = selfieCaptureCss;
-
-export { SelfieCapture as selfie_capture };
+  static get is() { return "selfie-capture"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["selfie-capture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["selfie-capture.css"]
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "demoEnded": {},
+      "demoVideo": {},
+      "uploadingLink": {},
+      "captureHeight": {},
+      "captureWidth": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoSelfieCapture",
+        "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/selfie-tilt/selfie-tilt.css

@@ -0,0 +1,7 @@
+/* .cameraContainer {
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  position: relative;
+  overflow: hidden;
+} */

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

@@ -1,21 +1,18 @@
-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, a as FacePose, F as FaceML5Detector } from './Stream-b867a2be.js';
-import { a as SelfieCaptureValues, s as state } from './textValues-6bcc85dd.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 selfieTiltCss = "";
-
-const SelfieTilt = class {
+import { h } from '@stencil/core';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { SelfieCaptureValues } from '../../../helpers/textValues';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+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 { FacePose } from '../../../libs/FaceML5Detector/FacePose';
+import { Translations } from '../../../helpers/TranslationUtils';
+export class SelfieTilt {
   // @State() private animationPath: string;
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoSelfieTiltCapture", 7);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
+  constructor() {
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -43,8 +40,9 @@ const SelfieTilt = class {
     this.captureHeight = height - Math.round((window.screen.height - height) / 2);
     this.captureWidth = Math.round((this.captureHeight * 9) / 16);
   }
-  componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Title;
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.SelfieCaptureValues.Title;
     //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -53,16 +51,16 @@ const SelfieTilt = class {
   async componentDidLoad() {
     this.mainStream = Stream.getInstance(VerificationMode.Tilt);
     await this.baseComponent.logStep(FlowSteps.SelfieTilt, FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
+    this.titleMesage = this.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
     this.demoEnded = false;
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[this.mainStream.facePose];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.demoEnded = true;
     this.openCamera();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints('', state.device, true);
+    const constraints = this.cameras.GetConstraints('', store.device, true);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -97,7 +95,7 @@ const SelfieTilt = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Loading;
+    this.titleMesage = this.translations.SelfieCaptureValues.Loading;
     this.closeCamera();
     this.demoEnded = false;
     this.demoVideo.src = this.uploadingLink;
@@ -106,7 +104,7 @@ const SelfieTilt = class {
   }
   render() {
     let cameraStyle;
-    if (state.device.isMobile && this.videoStarted) {
+    if (store.device.isMobile && this.videoStarted) {
       cameraStyle = {
         'width': this.captureWidth + 'px',
         'height': this.captureHeight + 'px',
@@ -119,10 +117,85 @@ const SelfieTilt = class {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), 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)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
-  get component() { return getElement(this); }
-};
-SelfieTilt.style = selfieTiltCss;
-
-export { SelfieTilt as selfie_tilt };
+  static get is() { return "selfie-tilt"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["selfie-tilt.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["selfie-tilt.css"]
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "demoEnded": {},
+      "demoVideo": {},
+      "uploadingLink": {},
+      "captureHeight": {},
+      "captureWidth": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoSelfieTiltCapture",
+        "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/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;
+}