@ekyc_qoobiss/qbs-ect-cmp 3.6.27 → 3.6.29

package/dist/collection/components/common/capture-error/capture-error.js

@@ -0,0 +1,102 @@
+import { h } from '@stencil/core';
+import { delay } from '../../../utils/utils';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
+import { Translations } from '../../../helpers/TranslationUtils';
+export class CaptureError {
+  constructor() {
+    this.type = undefined;
+    this.buttonEnabled = undefined;
+    this.buttonText = undefined;
+    this.baseComponent = new BaseComponent(FlowSteps.CiError);
+  }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+    this.buttonEnabled = false;
+    if (this.type == 'ID') {
+      this.titleR1 = this.translations.IdCaptureValues.ErrorTitleR1;
+      this.titleR2 = this.translations.IdCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = this.translations.IdCaptureValues.ErrorR1;
+      this.descriptionR2 = this.translations.IdCaptureValues.ErrorR2;
+    }
+    if (this.type == 'LIVENESS') {
+      this.titleR1 = this.translations.SelfieCaptureValues.ErrorTitleR1;
+      this.titleR2 = this.translations.SelfieCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = this.translations.SelfieCaptureValues.ErrorR1;
+      this.descriptionR2 = this.translations.SelfieCaptureValues.ErrorR2;
+    }
+  }
+  async componentDidLoad() {
+    await this.baseComponent.logStep(FlowSteps.CiError, FlowMoments.Initialized);
+    for (let i = 5; i >= 1; i--) {
+      this.buttonText = i.toString();
+      await delay(1000);
+    }
+    this.buttonText = this.translations.IdCaptureValues.Button;
+    this.buttonEnabled = true;
+  }
+  async buttonClick() {
+    this.buttonEnabled = false;
+    await this.baseComponent.logStep(FlowSteps.CiError, FlowMoments.Finalized);
+    this.eventCaptureErrorDone.emit();
+  }
+  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.translations.GlobalValues.FooterText))))));
+  }
+  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,123 @@
+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';
+import { Translations } from '../../../helpers/TranslationUtils';
+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();
+  }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+    this.subTitle = '';
+    this.buttonEnabled = true;
+    if (store.flowStatus == FlowStatus.ID) {
+      this.topTitle = this.translations.HowToValues.IdTitile;
+      this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
+      this.buttonText = this.translations.HowToValues.IdButton;
+      if (this.idSide == 'front') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
+        this.subTitle = this.translations.HowToValues.IdSubTitileFace;
+      }
+      if (this.idSide == 'back') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
+        this.subTitle = this.translations.HowToValues.IdSubTitileBack;
+      }
+    }
+    if (store.flowStatus == FlowStatus.LIVENESS) {
+      this.baseComponent = new BaseComponent(FlowSteps.SelfieHowTo);
+      this.topTitle = this.translations.HowToValues.SelfieTitile;
+      this.subTitle = this.translations.HowToValues.SelfieSubTitile;
+      this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_selfie.png';
+      this.buttonText = this.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.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,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 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 { Translations } from '../../../helpers/TranslationUtils';
+// 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);
@@ -39,6 +37,7 @@ const IdBackCapture = class {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
+    this.translations = await Translations.getValues();
     //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' });
@@ -46,19 +45,19 @@ const IdBackCapture = class {
   }
   async componentDidLoad() {
     await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TtileRotate;
+    this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TitleBack;
+    await delay(this.translations.GlobalValues.VideoLenght);
+    this.titleMesage = this.translations.IdCaptureValues.TitleBack;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
     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)
@@ -87,7 +86,7 @@ const IdBackCapture = 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';
@@ -112,10 +111,83 @@ const IdBackCapture = 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: "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)))));
+    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.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,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 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 { Translations } from '../../../helpers/TranslationUtils';
+// 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);
@@ -39,7 +37,8 @@ const IdCapture = class {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Title;
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.IdCaptureValues.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' });
@@ -49,12 +48,12 @@ const IdCapture = class {
     await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
     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 IdCapture = 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 IdCapture = 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": "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)))));
+    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.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;
+  }
+} */